This assignment was extremely eye-opening to how little I know about web dev period. I'll certainly check out the Bootstrap documentation, turn on VoiceOver, and continue to implement more accessible coding practices into my projects. There certainly should be more conversation (vlog/ blog) posts about this. Thank you for kicking off the discussion! In your opinion, or from your experience, what are the most important ARIA attributes to include in a web app?
I'm a Systems Reliability and DevOps engineer for Netdata Inc. When not working, I enjoy studying linguistics and history, playing video games, and cooking all kinds of international cuisine.
The first answer that comes to mind is 'all of them, used correctly', but that's obviously not very helpful.
The big thing here is figuring out on an element-by-element basis 'What is this element doing or being used for that doesn't fit it's standard usage in a web page?' Especially make a point to audit all your <div> and <span> attributes like this, they're the most widely abused markup tags in HTML, so they're also the most likely case to be missed.
The other big one is making sure that buttons that are normally just icons when accessing the app or page visually are handled properly. In particular, make the icon itself it's own element with aria-hidden='true', and then wrap that in the actual button (or whatever you're hooking the button logic up to) and make sure that the wrapper has an appropriate aria-label set on it so that the screen reader will announce what the button actually is without spouting useless information about the icon.
I'm a Systems Reliability and DevOps engineer for Netdata Inc. When not working, I enjoy studying linguistics and history, playing video games, and cooking all kinds of international cuisine.
I tried to respond to this using my screen reader and, woah. Super difficult.
FWIW, DEV is actually not particularly bad when it comes to accessibility with a screen reader (they're not great either, but I've see quite a few sites that were much worse). A lot of the issue is just learning to use the screen reader effectively, as it requires a very different mental paradigm from interacting with a computer visually. The best analogy I can come up with is that it's like learning to use the Linux command-line on an old VT100 serial terminal (not an emulator, but an actual VT100) when you're used to using Windows 10 on a brand-new computer. I would suggest first getting used to using just the keyboard to interact with the web (this is also a good way to test accessibility), as it will help you get used to navigating the page in the way a screen reader usually presents it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This assignment was extremely eye-opening to how little I know about web dev period. I'll certainly check out the Bootstrap documentation, turn on VoiceOver, and continue to implement more accessible coding practices into my projects. There certainly should be more conversation (vlog/ blog) posts about this. Thank you for kicking off the discussion! In your opinion, or from your experience, what are the most important ARIA attributes to include in a web app?
The first answer that comes to mind is 'all of them, used correctly', but that's obviously not very helpful.
The big thing here is figuring out on an element-by-element basis 'What is this element doing or being used for that doesn't fit it's standard usage in a web page?' Especially make a point to audit all your
<div>and<span>attributes like this, they're the most widely abused markup tags in HTML, so they're also the most likely case to be missed.The other big one is making sure that buttons that are normally just icons when accessing the app or page visually are handled properly. In particular, make the icon itself it's own element with
aria-hidden='true', and then wrap that in the actual button (or whatever you're hooking the button logic up to) and make sure that the wrapper has an appropriatearia-labelset on it so that the screen reader will announce what the button actually is without spouting useless information about the icon.I like the answer 'All of them, used correctly'! I tried to respond to this using my screen reader and, woah. Super difficult.
FWIW, DEV is actually not particularly bad when it comes to accessibility with a screen reader (they're not great either, but I've see quite a few sites that were much worse). A lot of the issue is just learning to use the screen reader effectively, as it requires a very different mental paradigm from interacting with a computer visually. The best analogy I can come up with is that it's like learning to use the Linux command-line on an old VT100 serial terminal (not an emulator, but an actual VT100) when you're used to using Windows 10 on a brand-new computer. I would suggest first getting used to using just the keyboard to interact with the web (this is also a good way to test accessibility), as it will help you get used to navigating the page in the way a screen reader usually presents it.