Accessibility is the practice of making your websites usable by as many people as possible.
Why Accessibility?
It is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can help people with disabilities participate more actively in society.
The impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.
Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.
Accessibility Standards
The Web Content Accessibility Guidelines (WCAG) is an internationally recognised standard created by the World Wide Web Consortium (W3C).
The purpose of the WCAG standard is to define how to “… make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general.”.
- Web Content Accessibility Guidelines
- WCAG Checklist from WUHCAG, Web Aim and A11y.
- Websites made for disabilities including visual, auditory, physical, speech, cognitive, language, learning & neurological disabilities.
Accessibility Use cases
- Basic HTML/ HTML5 code is not accessibility enabled.
- Text colour / Contrast should be correct.
- You can check the foreground and background ratio from : https://webaim.org/resources/contrastchecker/
- Some libraries like Reactstrap are partially accessibility enabled
- Images should have alternative texts (using alt).
- Form elements should have labels (using for/html-for attributes).
- Links should have a meaning (using aria-labels).
- Page heading should be readable (using correct heading tags)
Converting basic HTML to Accessible element
Generally, a basic HTML element may or may not work well in terms of accessibility. But a little understanding and knowledge on creating accessible elements will work flawlessly. Below is an example of a Select box which is not accessible by default.
Select Box :
Accessible Select Box :
HTML :
JAVASCRIPT :
React Accessibility Architecture
Things to keep in mind
Landmarks :
<header role="banner"> <p>Put company logo, etc. here.</p> </header>
<nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav>
<main role="main"> <p>Put main content here.</p> </main>
<footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer>
Aria Labels :
It should be used to provide a text alternative to an element that has no visible text on the screen.
<button> send </button> // accessible name: send
<button aria-label=“send email”> send </button>
// accessible name: send email
<button aria-label=“menu”> </button>
Aria Role and Aria Level :
Aria Role is used for the purpose of identifying group of elements.
Aria Level is used for defining heading structure.
Role Types :
Comment, Complementary, list, list item, main, mark, navigation, region, Suggestion, alert, application, article, banner, button, cell, etc…
Accessibility testing addson & Softwares
