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 .
Yeah Aria tags are the game changer here they has the capacity to handle this tricky use case .
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
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 .
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
Manage your Work From Home 🏡 issues using this kit
Thanks for your time
Happy coding ! Keep Sharing