"Web-Stack" developer with a focus on accessibility design and development patterns, data visualization and DevOps automation.
Fell in love with Node, JS, SPA's and the JAMStack. Bye LAMP.
You forgot the most important point about buttons from an accessibility viewpoint. Using type="button" when you aren't using it to submit data!
If you forget this type, some browsers default back to type="submit". By also using proper type you don't need e.PreventDefault either.
If you want to get better at #a11y development I would focus more on HTML symantics and what changes when you add aria elements because it can change the behaviour of elements and their intended meanings to users.
To learn more I would highly recommend readying Hedyon Pickering's Accessible Components. It's mandatory reading for all our frontend Devs at our shop because we're a charity that needs to build accessibility into everything we do.
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
You forgot the most important point about buttons from an accessibility viewpoint. Using
type="button"when you aren't using it to submit data!If you forget this type, some browsers default back to
type="submit". By also using proper type you don't neede.PreventDefaulteither.If you want to get better at #a11y development I would focus more on HTML symantics and what changes when you add aria elements because it can change the behaviour of elements and their intended meanings to users.
To learn more I would highly recommend readying Hedyon Pickering's Accessible Components. It's mandatory reading for all our frontend Devs at our shop because we're a charity that needs to build accessibility into everything we do.
TIL
developer.mozilla.org/en-US/docs/W...