Quality Assurance Consultant
Design for Web Accessibility
This blog sheds some light on how to make the user interface design and visual design elements more accessible to people with disabilities. These tips help meet the Web Content Accessibility Guidelines (WCAG) requirements.
1. SUFFICIENT CONTRAST BETWEEN FOREGROUND AND BACKGROUND
The foreground text should have sufficient contrast with the background colors. A web page should have minimum Contrast by default – 4.5:1 for a normal-sized text.
Sometimes, the text is unreadable when there is no sufficient Contrast between the foreground text and the background. High Contract (dark text on a light background or bright text on a dark background) helps people with visibility impairment or aging.
2. USING OTHER ELEMENTS TO CONVEY INFORMATION
Color is an important part of Web Design. Even though color can be used to convey information, it is not the only way to indicate an action or response. You can provide additional identification like an asterisk apart from color to indicate required form fields or use labels to differentiate areas on graphs.
3. INTERACTIVE ELEMENTS SHOULD BE EASILY IDENTIFIABLE
Interactive elements on the Web such as links and buttons should be easily identifiable. For example, change of appearance of links on a mouse hover, or keyboard focus. Use different styles so that users can easily identify interactive elements.
4. FORM ELEMENTS SHOULD BE CLEARLY LABELLED
All form fields should have sufficient descriptive labels. For the left-to-right languages, the labels should be placed on the left side or above the field. Checkboxes and Radio buttons are usually on the right side. Labels and Fields should not have too much space between them.
5. EASILY IDENTIFIABLE FEEDBACK INFORMATION
Provide clear feedback for interactions, for example, alerting the user when they miss important information to fill in the form. Important feedback information should be presented clearly and prominently.
6. CREATE DESIGN FOR DIFFERENT VIEWPORTS
With different-sized view ports in the market, consider how page information will be presented on different-sized viewports like different mobile phones or zoomed browser windows. The Text and Line width should maximize readability and legibility.