Web accessibility is the ease of use of information and communication technologies, such as the Internet, by people with disabilities. Websites need to be developed so that disabled users can access the information.
Reading order should be considered
The reading order and visual order should be the same.
Good contrast has to provide
Should be careful with light colored shades like Orange, Yellow, and Gray.
Wherever possible use true text
True text loads fast and easy to translate. It also enlarges better, use CSS styles to improve visual effect.
Watch the use of Upper case letters
It is difficult to read for screen readers and cannot read correctly, so try to avoid all Upper case letters.
Use appropriate font size
It is officially stated that visitors must be able to resize all text on the page up to 200% of its original size. Font size can vary based on the font chosen, but 14px – 16px is minimal.
Balanced Line Length
Line length should be balanced, make sure that it should not too short or too long.
Links should be Recognizable
Differentiate links in the body of the page with underlines or something other than color alone.
Consider link focus indicators while designing
Ensure keyboard users can visually identify links when navigating with a keyboard.
Design a “Move to Top Main Content” Link
A keyboard accessible link for users to skip navigation should be at the top of the page.
Ensure Link Text Makes Sense on Its Own
Avoid “Click Here” or other ambiguous link text, such as “more” or “continue”.
Use Animation, Video, and Audio Carefully
Provide a play/pause button.
Don’t Convey Content only with Color
Users often can’t distinguish or may override page colors.
Form Controls should be Accessible
Ensure form controls have descriptive labels and instructions.
Pay close attention to form validation errors and recovery mechanisms.
Web accessibility while coding in Angular/React/HTML/CSS
Identifying the page language
Adjust speaking rate of content in order to provide the correct accent and pronunciation, identifying the page language helps screen reader to switch language profiles. To determine the page language or a section of page language while developing a web page the lang attribute should be used. <html lang=”en”> </html>
Write your HTML smartly
Using tags like <button> gets you all the keyboard events for free and it saves valuable time, helps in achieving accessibility. Nest or Structure your Heading tags correctly. It will help to create and speak out the text hierarchy correctly in assistive devices. It will add value to navigation. Use paragraph, span and heading tags for text content. Use correct page layout like don’t write footer or header inside main tag. Use html5 Semantic tags header, main, section, article, aside and footer for page layout. It will help the user to navigate easily from one section to another section.
Alternative text should be used media
The alt text could be captions or audio description for web based audio or video and images. It will help at the time when visitors can’t see media in their browsers due to browser issues or formatting issues.
Error handling and mistake correction
It may get frustrating when user fills the form details. It may get frustrating when user fills the form details. For example: Name should not have special characters or numbers, Password should be strong enough by including special characters and alphanumeric values, Phone number to be written in specific format adding or removing space from field.
- Keep error messages next or below the fields and highlight the text and set focus to respective fields.
- Remove any space from phone number and other fields while validating user inputs.
- Show help text and suggest corrections/audio content to help user understand the format of that fields.
- Provide some means for reviewing, confirming, and correcting information before finalizing the submission.
