Recently someone contact me and asked me about increasing site's accessibility. I only had some points to explain. The points were basic and common. So, i researched on this topic and came out with some needy and cool ways you can increase your website's accessibility.
Let'z get into it.
1. Use of <button>
The basic thing you learn when u start with web dev course is use of <button>. But after sometime you guys forget that and use <div>. I know by default it is really ugly and need style, but you’re losing all the button functionality such as keyboard events which screen readers look for to help with navigation.
2. Videos which have Audio (Mainly it's intro of the brand.)
- Provide captions
- Provide full text transcript of the video or a version of the video with a text description
- Code a mechanism to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 to 4 seconds
3. The <main> tag
The <main> represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. So the user can directly go the main content(which he/she wants or searching).
4. The aria-label attribute
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. In short, This is used to describe an elements role for screen readers.
BONUS 😃🙂
Using Google Chrome Accessibility Developer Tools. This is an open-source site accessibility auditing tool.
Link -> Github - Google Chrome Accessibility Developer ToolsYou can change the colors of some text and text on images that don't look good. Because disabled people will have some problem with it. See this chrome extension this will tell you how your website will look for a color bind person. Link -> Colorbinding
Thanks For Reading. Hope you will get this post useful. 😀