The goal of Universal Design is to create an environment that can be accessed, understood and used by all people, regardless of ability or disability. By following its principles, we can make websites that are both beautiful and accessible.
Below are eight elements of Universal Design to keep in mind when working to make websites accessible to everyone.
1. Audio and visual transcription and description for videos
Video should be produced and delivered in ways that ensure that everyone can access the content. Captions, transcripts, and audio descriptions can help make videos accessible to all. In addition, video should be delivered in an accessible media player.
2. Keyboard accessible navigation
Users who can’t use a mouse often navigate the internet using a keyboard. Therefore, interactive and navigation elements must be accessible by tabbing.
3. Keyboard-focus indicators
Visual markers help those who navigate the internet using a keyboard by indicating which element on the page is active. Links, buttons, form fields, individual menu items, tooltips, and widget actions should all be focusable. To test if your website has keyboard-focus indications, tab around to see if you can tell where you are on the page.
4. Skip and Skip-to-Search
Now imagine tabbing through multiple pages on a website that has large and complicated headings. You’d be there all day just trying to reach the main information area of the page. If your website has a large heading (such as a mega menu), use CSS to create a SKIP link, which allows the user to to tab quickly through the header to the main content. An alternative to this is SKIP TO SEARCH, which is only visible through keyboard functionality.
5. Wording of text links
Avoid uninformative link phrases, and never use text links such as CLICK HERE. “Click” is irrelevant to many assistive technologies because it puts too much focus on mouse mechanics. In addition, it isn’t descriptive enough for screen readers. Instead, label links by describing where they link to. For example, rather than saying Click here to learn more about carrot juice” you might say “Learn more about carrot juice by reading this article on Veggie Times.”
6. Styling of text links
Text links within the body of a web page should always be underlined. While browsers underline links by default, many designers remove the styling through CSS because they don’t like the way it looks. Bad idea! When the underline is missing, users with low vision or color blindness may have trouble distinguishing links from regular text, as may anyone with a poor monitor or when using a computer in an environment that is not lit well. Finally, it is simply easier to see underlined links.
7. The Aria Label attribute
The Aria Label attribute is a bridge between HTML and screen readers. It provides an invisible label where a visible label is not practical. For example, for sighted users an “X” in the upper corner of a pop-up indicates where to click to close the popup window. Visually impaired users may not see the “X.” The Aria label can offer the unsighted user more content and text about where to go, but to most other users, the additional labels will not be visible.
8. Color contrast ratio
Accessible color contrast requires the contrast between foreground color and background color to be distinguishable by individuals with different color perception abilities in a wide variety of environments. Understandably, people with moderately low vision who do not use color-contrast-enhancing assistive technology may require higher contrast between text and background than a fully slighted user would. Accessibility standards require a minimum contrast ratio of 4.5:1 for normal text, 18.5px or larger and 3:1 for large text, 24px or larger. There are several free online tools to measure contrast. WebAIM, contrast-radio.com and ColorBox are three.
Improving web accessibility with Universal Design
According to the U.S. Census Bureau, nearly 20% of the population has some type of disability, so if your website is not accessible, you are potentially excluding 20% of the population. And that population is only going to grow. Why?
The U.S. Census Bureau predicts that between 2012 and 2050 population aged 65 and over will double. Such a dramatic increase in the elderly population will make disability even more common. For that reason, implementing web accessibility should be a priority now.
Universal design allows us to build accessible websites from day one. And we know that building accessibility in from the beginning is less expensive than trying to go back and fix any issues. With almost 20% of the population already self-identified as having a disability and the elderly population growing rapidly, it only makes sense to offer everyone the same chance of accessing the information about your business or organization. And in the end, isn’t this just the right thing to do?