Designing for the web with accessibility in mind from the very beginning will empower new designers to create beautiful and compelling experiences that everyone, including people with disabilities, can use and enjoy. These are some of the basics that new designers, or designers new to accessibility, should know.
Content must be POUR
The Web Content Accessibility Guidelines (WCAG) 2.1 will be your new best friend. To design web experiences that are accessible and compliant, the more you understand the parameters outlined in WCAG, the better off you’ll be. WCAG is organized by four foundational principles, which state that content must be Perceivable, Operable, Understandable, and Robust (POUR).
- Perceivable: For content and user interface elements to be perceivable, they must be built in a way that doesn’t depend on one sense, such as sight or hearing. Content also needs to be adaptable and distinguishable.
- Operable: All interface components and navigation must be able to be reached and operated — and not just with a mouse. Among other things, this means everything must be keyboard-accessible, people need to have enough time to complete tasks, navigation needs to be carefully cared for so people know both where they are on a site and how to find where they want to go, and there is no content that is built in a way known to cause seizures (like flashing content).
- Understandable: Content needs to be understandable both by the users and any assistive technologies they might use, such as screen readers. To achieve understandability, content and interface elements must readable, predictable, and built in a way that helps users avoid and correct any input mistakes.
- Robust: WCAG teaches that “content must be robust enough that it can be interpreted by a wide range of user agents, including assistive technologies.” As technologies and user agents evolve, content has to remain accessible. Clean and complete coding goes a long way toward achieving robustness.
Read: Common Web Accessibility Myths
Non-text content
A critical pillar of digital accessibility is that any content that is anything other than true text (with few exceptions, including graphics that are only decorative and provide no information), needs to have an accessible text alternative. If this is an image, that may be satisfied by alt text in the alt attribute. If it’s a complex graphic or infographic, a text alternative may be that information also appearing in text form on the page or another page that’s linked to. For media, like prerecorded videos, captions and transcripts are key and must always be built into the experience.
Images of text
Images that contain text, as opposed to actual text, present accessibility challenges. Except when it’s necessary to use an image of text (a company’s logo is a good example of something that may contain text and has to remain an image), always strive to use true text. Text is naturally accessible to assistive technology and allows for user customization, so people can adjust the content in a way that allows them to use it — font, size, color, contrast, and background can all be set according to the user’s needs.
Choose easy-to-read fonts
Font style is an important design and brand consideration, but many are surprised to learn how important it is for accessible web design. In general, aim for fonts that are simple and unadorned. For digital designs, sans serif fonts are usually a safer bet. Designers should remember to account for readers with dyslexia or other disabilities. The popularity of a font may also come into play — choosing a more popular font may increase the likelihood that the end user’s computer can display it as intended.
Read: Best Fonts to Use for Website Accessibility
Color contrast
Color contrast refers to the difference in light between text (or anything in the foreground) and its background. By using sufficiently-contrasting colors, people with low vision, low-contrast vision, or color blindness will be more able to read and operate the content and interface. Color contrast is measured in a ratio, and for most content WCAG recommends meeting a minimum contrast ratio of 4.5:1. You can check the contrast of any web page using the a11y® Color Contrast Accessibility Validator.
Color can’t be the only visual means of conveying information
The use of color is essential to many designers and helpful to many users, but color alone can’t be the only means of conveying information. For example, a link in a paragraph surrounded by static content shouldn’t be identified only by it being a different color — it should also be underlined or visually distinguishable in some other way. Or, consider form fields. The use of red or another color to indicate a required field or an error must be accompanied by another visual element (like an asterisk or a message in text). Because not everyone will detect color, we can’t rely solely on it.
Navigation should be predictable and consistent
To allow people to become oriented to how to use your site and to understand how to move around it, navigation mechanisms should be used and appear in a consistent way. For example, if your design includes a hyperlinked logo that takes users back to the home page, always place the logo in the same place on every page and make sure it points to the same location. Or, maybe you use a standard masthead that contains a series of navigational links and a search bar — you’d want to keep those elements consistently positioned and labelled for your users. WCAG states that any navigational mechanisms repeated on multiple pages should be positioned in the same order.
Tab order
To understand the importance of defining a logical tab order means truly understanding the different ways people will navigate a website. Some will use keyboards in place of a mouse, either alone or along with other assistive technologies like screen readers. Some will use switches or other devices that replace keyboard or mouse usage. Some will use speech technology, or any other number of assistive technologies. But all have the civil right afforded by the Americans with Disabilities Act (ADA) to access content. To make the content easy to navigate and understand, consider the order in which elements should receive focus if being tabbed to with a keyboard or other device. It should usually match the visual order of active elements.
Keyboard focus indicator
This is a sometimes-overlooked aspect of web design. For users who have sight but navigate by keyboard or similar methods, they need to know which element on the page is receiving focus at any given time. To achieve this, ensure there is a visible focus indicator that clearly identifies whichever active element the user is currently selecting. This is critical for navigation and operation. Choose color and format carefully, and remember that to be visible the indicator needs meet color contrast minimums.
Is your current website accessible?
Start with a free and confidential website scan or contact us. We look forward to helping you achieve, maintain, and prove digital compliance.
