WAI Standards on Accessible Design for the World Wide Web
With the internet such a commonplace tool for almost everyone to do just about everything you can think of, more than ever, it’s important to think about inclusivity and accessibility when designing a website or web application.
W3C and the WAI
Luckily for us, there is an organization called the World Wide Web Consortium, A.K.A. the W3C (led by the inventor of the World Wide Web, Sir Tim Berners-Lee!), which develops all sorts of web standards including those for HTML, CSS, and the Web Accessibility Initiative (WAI). Straight from their website, the WAI “develops web accessibility guidelines, technical specifications, and educational resources to help make the web accessible to people with disabilities.”
The WAI goes into detailed standards, reasoning behind their guidelines, technical specifications on how to follow each guideline, and even user experience stories and videos from people who have greatly benefitted from the initiative! I highly recommend taking a look at their website if you have more interest in the subject, but I’ve also laid out some WAI basics to consider when trying to design a user-friendly accessible website or application (will refer to solely websites below, but these recommendations are applicable across the board).
Design Recommendations
Color Contrast
More technically, I’m referring to “luminance contrast”, but it is best to give options of high and low contrasting colors for background and text in order to accommodate those with visual impairments or reading disabilities. One way to accommodate this need is to build in a few color options for a website that a user could choose from in the settings.
Those with low contrast sensitivity from aging or those with other visual impairments frequently benefit from high contrast between text and background colors.
Although high contrast colors work well for most users, others, like those with reading disabilities such as dyslexia, need low contrast colors in order for the material to be legible.
In many applications, you can use the color eyedropper tool when selecting a text color and background color to show you the contrast ratio.
Don’t Depend Solely on Color
Although color can be important for legibility, it’s important to not rely on color as an indicator. A few examples of this are the frequent use of the color red to indicate a required field, using a faded out color to represent a previous price, or green to indicate a sale price.
People who are colorblind would have difficulty differentiating the red, required fields on the left marked solely with color, but could easily see the asterisk added on the right-side example.
The same concept applies here when making graphs or charts. You can use numbers to label or use different patterns to differentiate things, in addition to marking them with color.
Clear Navigation
Navigation on websites should be consistent on all of the website’s pages. This includes naming, styling, and positioning. A clear indicator of the user’s position on the website at any given time can be very helpful for those who need these visual cues.
Users who use the keyboard to toggle through a website also need this clear navigation. Toggling through a cluttered website with unclearly laid out sections using the keyboard can cause a user to get stuck in an unintended section of text. Headings make it easy for screen readers to know which sections are relevant to their search for content and allow easy tabbing through the page.
For people with certain disabilities, navigating a website just using one method can be daunting, and certain navigation features can be implemented to make this easier for them. For example, for users with dyslexia, adding a search feature can be very helpful. Since search bars allow users to misspell words and offer error correction or word prediction, they can be very helpful for those users who have difficulty with various cognitive impairments.
Include Alternate Text and Media Choices
For those who depend on screen readers to view the web, alternate text for images and proper labeling through the website can be incredibly helpful. Audio-described versions of videos should be made available for videos without much audio content if at all possible.
For those with hearing impairments, you can offer visible links to transcripts of the audio.
Less is More
Websites with lots of ads and moving content can be very distracting for people with ADHD and dyslexia, among others. Try to minimize these distractions, or if they are required, make sure you include controls for those things that start movement automatically, such as advertisements, audio, and carousels of content.
Consider viewport sizes and those who need to enlarge text to make it clearly legible. In order to design for max legibility, on smaller screens, navigation and secondary information should be made viewable through icons and not be part of the main view.
Minimizing the amount of information on each page when compared to larger viewports can be super helpful and make the most of the amount of space available on smaller screens. Make sure text can enlarge on websites and will reflow and populate the page in a manner that doesn’t cause design flaws.
Certain methods of user authentication should be avoided due to their downfalls in this area. CAPTCHA images do not resize well and cause difficulties for those with visual impairments so try to use other alternatives.
For More Information:
Please check out the very comprehensive WAI section of the W3C website: https://www.w3.org/WAI
