Before getting in to the article I would like to ask you all a question !
How people with eye disablities use your website ? is the website you've made is accessible for them ?
wait ! what ? is there a scenario like that ? 😳 🙄 🤔 😲 these were my reactions and questions I got soon after this question was thrown over me. Come on I'm doing stuff's on web for over 4 years but never thought of this scenario and I'm clueless to answer this .
But the reality is big "YES" there's a way ! to be frank this was the most shocking thing more than the question . Again the same set of reactions but this time they've doubbled 😳 🙄 🤔 😲 😳 🙄 🤔 😲 .
Ok if yes then how ?? many of us would have used those things without knowing their use cases .
Aria Tags
Yeah Aria tags are the game changer here they has the capacity to handle this tricky use case .
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. stated in MDN
Have you researched the usage of these tags while using ? I didn't 🙋🏾 ! I thought they are only used for SEO kind of things . Another thing is other attributes we use can be accessed somehow like using
- document.getElementById("demo");
- document.getElementsByClassName("demo-class");
- document.getElementsByName("demo-input");
- document.getElementsByTagName("input");
or you can access the values during the event handle like onChange using
e.target.value , e.target.name
but have you tried of accessing these aria tags ?? just try ! they can't be accessed like the other attributes ! these are not they've built for . Why because ARIA doesn't augment any of the element's inherent behavior.
ARIA works by changing and augmenting the standard DOM accessibility tree .
Screen Reader
So we've added the aria tags but how it will be helpful to read for the people with disablities?. Here comes the next life saver Screen Reader . Screen Reader is an app which make use of these aria tags and make a helpful voice commands for the people to use the website. They are available as an desktop app and also as a chrome extension. Check one of them here
Here I've created a small form using react that supports aria tag install the extension mentioned above , close your eyes and try submitting the form ! let me know If you've made it !
These attributes starting with aria- are the thing we're talking about !!
.
That's it ! So next time when you build an application make sure your application supports aria tags , Technology is not for particular people, Make the technology accessible for everyone 💪🏽
Get into these docs before starting aria tags
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://developers.google.com/web/fundamentals/accessibility/semantics-aria
Manage your Work From Home 🏡 issues using this kit
check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen
Thanks for your time
Happy coding ! Keep Sharing
Stay Safe
Top comments (0)