The biggest reason web developers do not implement accessibility is that either they are not aware of what it is or they feel it is very hard. Today I am going to share basic accessibility every developer should be aware of and should implement while doing development.
1) Title tags
Every page should have a Title tag. If your application is SPA then with route change update the title tag too.
2) Alt tags
It is important to have alt tags of every image we have. They are helpful for screen readers as well as if the image is broken the alt tag will appear on the screen. Alt tags should be descriptive. Remember all the decorative images should not be the part of the DOM and should not have alt tags. There are other rules with the alt tags which I will share in my next blog.
3) Semantic tags
Never ever compromise in using the semantic tags for your markup (view). Always use the right tag for the right thing, follow the order of headings, and put the right type with the button.
4) anchor link (new window links)
anchor links should be used whenever there is redirecting to other pages.
If any link is external and taking the user to a new tab or window. It should mention that with the link. This will help the screen readers to read aloud that this link will take you to a new window/tab.
5) Videos & Audio
Do not auto-play videos and audios on the web. Always allow the user to control the play and pause. For videos provide the subtitles, transcript, and audio too.
Try to provide the different languages support.
6) keyboard access
If you are not able to navigate your web application by using just a keyboard then there is a major issue. Always provide support of keyboard (tab) as well as shorthand commands too.
7) ARIA- *
To have the accessibility support in your web application apart from the above-stated points take advantage of ARIA-* (roles, Landmarks, etc.) tags. ARIA helps in providing those tags which are not available in HTML and are necessary for accessibility.
Eg: if you are making a carousel to make screen readers it is Carousel we should use aria-role="carousel".
8) Dynamic data and state
If you are working with dynamic data states (hide and show) then you should take the help of the ARIA-states & properties.
These tags will alert the screen readers whenever there is a change in the DOM because of data got load, checkbox got checked, etc.
If we won't use these tags then the user of the screen reader won't know when the data got update & when the states got changed.
9) Dates, Currency, Time, etc.
Apart from the code, there are few modules like date, time, currency, phone numbers, etc. these get change as per the country and time-zone. We should make sure that these modules are aligned with the country, time-zone, etc. from where the users are trying to access the site.
10) Do not use colors to present the state
This is a very common practice of the designers (UX) to design the states (error, success, information, etc) by the colors. Eg: all error messages would be in the red color, all success messages would be in green color. They do not provide any description just a single statement - "Fill all the information marked in red."
The downside of this practice is screen readers won't be able to understand the colors, folks with vision problems won't be able to understand which fields to fix. Hence, the solution does not just have color-oriented messages
Happy Learning!!
Top comments (0)