Make your Website accessible for people with eye👁 disablities
Tags: react, webdev, html, ux
Published: 2021-05-26 16:42:56

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 
![input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya3jd8lhd8x0fm2jrgwa.png)
 * 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](https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn/related)


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 !

{% codesandbox bold-hertz-tcrvp %}

These attributes starting with aria- are the thing we're talking about !! 

![ariatags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f2es0kviqa18grg4bc6.png) . 

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] (https://dev.to/karthick3018/manage-work-from-home-effectively-using-wfh-kit-6bc)

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)
*check my styles on* [codepen](https://codepen.io/karthick30)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*