This post was most recently updated on June 17th, 2019
What is Accessibility or Web Accessibility :
People with disabilities should able to easily access the web content.Implementing web accessibility will give equal opportunity and chance to people with disabilities or older people (who are facing changing abilities due to aging).In United states there is law “Americans with Disabilities Act – 1990” which addresses the needs of people with disabilities.
W3.org website gives the guidelines to achieve web Accessibility. These guidelines are categorized in 3 different levels of conformance like A, AA & AAA.
We need to achieve web Accessibility for people with
- Poor vision or Blindness
- Reading problems
- Physically disable people who failed to operate keyboard or mouse efficiently.
- Hearing problems
Implementing accessibility in web application is not expensive if we add this activity in early part of development.
To achieve Web Accessibility it is always helpful to implement level “A” then “AA” and then “AAA”
If your website is compatible for all available browser then need to perform Accessibility testing separately on each browser.
Here listing down some Level A Accessibility Checklist.
A.1 Non text-content : Provide meaningful short text alternatives for non text content. Due to poor website loading time or slow internet connection images not get loaded in time. Some time some users / firewall blocks the images and surf the website. so it is always better to provide alternative information about the control which we want to load using “ALT” tag.
It is not mandatory to put alt text everywhere , No need to add alt text (keep blank for alt text) if images,logos are presented only for design/decoration.
A.2 Audio-only and Video-only (Prerecorded) : If Website content are in audio or in video format then create a Transcript for what is said in audio or in video.
A.3 Captions : Captions are provided for all audio / video recordings. These captions must sync with audio / video content. This is bit hard task in comparison with alt text or text transcript.
A.4 Audio Description or Media Alternative (Prerecorded) : Area which is not explained in video audibly can be converted in text. You can provide full text transcript.
A.5 Info and Relationships : you need a simple structure to represent your web content. Use of proper headings , representing text in section with proper title/headings will help you to achieve Info & Relationships Accessibility. Giving proper headings to new section by using header tags is important. Use correct html,labels for forms.
A.6 Meaningful Sequence : Presenting your website content in meaningful sequence is very important. This applies to all controls,text available in page.Wherever necessary use paragraph,headers,list to represent the content.
A.7 Use of Color : Do not represent content in “color” language. For e.g Compulsory fields are mark in Red Color, Click on right Green Arrow to move forward , Avoid such kind of words in instructions or error because those who are color blind for them these instructions / error messages are not useful as they may find difficult to understand this Red , Green or any other colored text instructions.
A.8 Audio Control : Audio control should have start , stop , pause , mute buttons. Automatically playing sounds is not good practice.
A.9 Keyboard : All functions/content should be operable using Keyboard without any delay. User should able to operate your website using keyboard without using Mouse.
A.10 No Keyboard Trap : User should able to enter and exit from the component using keyboard. for example using tab he reached to Drop down list but he is not able to expand it , this we can say a keyboard trap as user is not able to select value from drop down using keyboard. All website content should be accessible using tab,space,arrows etc.
A.11 Timing Adjustable : If website is content is dynamic or time bound then there should be mechanism to overcome this issue. For e.g user should able to extend default time period to read text content, or filling form or view the dynamic pictures appearing on website. If Text/ Images are updating dynamically then user must have mechanism to delay this activity as per his ability. Should have access to turn off time limit.
A.12 Pause, Stop, Hide : It is not recommended that website should contain moving,scrolling blinking text. but to overcome this you can provide start ,stop pause , hide functionality for such contents.
A.13 Three Flashes or Below Threshold : Avoid using flashes that occurs more than 3 times per second.
A.14 Bypass Blocks : Give mechanism so that user can bypass the content of website which is repeated in multiple pages. Implement functionality like “skip to main content” so that user can avoid extra navigation & other repetitive content.
A.15 Page Titled : Use or frame your page titles which represent or give information about particular page. for example “Accessibility – Different A Levels”
A.16 Focus Order : Every part of page should be navigated using Tab Key and focusable components receive focus in an order that preserves meaning and operability.
A.17 Link Purpose (In Context) : Link text should give information about what is link is about and what is going to happened after clicking on link. for e.g if you want to navigate to user to some particular user profile by clicking on link then text should be “Visit Profile of XYZ”
A.18 Language of Page : Set language of your website. This is one time activity and will be helpful for users which are using screen readers.
A.19 On Focus : When any component/control receives focus then its behaviour /context or appearance should not be changed.
A.20 On Input : It’s a good practice to give user chance to revisit,edit information which they entered and then submit or save it by confirming it from end user. Avoid auto submit method.
A.21 Error Identification : Always guide user by giving appropriate error message about what is wrong and what is expected.
A.22 Labels or Instructions : All labels associated with input field should have clear meaning and should give information to user what is that input field is all about.
