Accessibility is one of the most critical web design trends of 2020, as awareness, best practices, and even Federal and international laws expand to be more inclusive of users with varying abilities and certain health conditions. Businesses and the governments are finally catching up to the fact that a lack of accessibility is unfairly exclusive to millions of people—and, from a business perspective—that it can be a costly oversight that prevents many new customer relationships. Creating an accessible website is good for everyone.
If you’re having a new website built or undergoing a redesign, or if you just haven’t paid attention to making your brand’s site user-friendly to people with different needs, it’s time to get acquainted with the best ways to promote accessibility. Creating an accessible website isn’t just a way to be more inclusive and facilitate new leads and sales; it also helps you steer clear of lawsuits over a lack of legally mandated minimum accessibility compliance.
Below are the most important ways of creating an accessible website for your company, nonprofit, or personal brand. These include tips that go above and beyond the minimal accessibility requirements by law, which is good for your users, good for you, and keeps you ahead of the game as laws evolve.
How to Design an Accessible Website
- Provide alternative ways to experience content on your site; for example, caption videos, offer written transcripts of audio content, or include sign language interpretation
- Enable keyboard navigation, as some users with disabilities cannot operate a mouse; create a button shortcut to allow those using their keyboard to bypass the top-level navigation and go directly to the main content on the page
- Write descriptive, keyworded alt text for your images so that people using technology like a screen reader will know what images are there and what they represent; this has the added benefit of being good for your SEO
- Use coding to hide purely decorative elements of web pages from screen readers and similar devices
- Ensure adequate contrast between text and its background; the contrast ratio should be at least 4.5:1 (or, if the font is at least 24 pixels or 19 pixels bolded, at least 3:1)
- Make sure your site is well designed to facilitate text resizing by users without the display getting all messed up
- Keep site copy and blog content clear and concise
- Do not use color alone to denote important text; also do something like create an icon, underline, etc. (use both, because while color coding is prohibitive to some users, it’s also helpful to others)
- Refrain from making any essential instructions or information understandable solely by a visual or audible element
- Avoid a cluttered appearance on any web page; avoid distracting graphics, make good use of white space, and keep content easily scannable with informative subheadings
- Make anchor text descriptive of where the link goes, rather than writing something like “click here,” to help people with screen-reading technology know where the link takes them
- Create accessible web forms by having all fields clearly labeled and making sure that users with screen readers can be alerted if something is incomplete or has an invalid value entered, and that they can receive confirmation that the form is completed with valid values
- Never have media elements (e.g., videos, music, etc.) that automatically start to play on any web page; these can pose a variety of accessibility issues, such as being difficult for some users to stop, being confusing, or startling people with sudden sound (most people find this irritating anyway)
- Eliminate or greatly extend time-outs on web forms and e-commerce checkout pages to accommodate users who cannot complete these elements as quickly as others
- Skip the flashing graphics, or at the very least, make sure nothing on any page flashes more than three times per second; more rapid flashing can trigger seizures in users with epilepsy or other seizure disorders, as well as other unpleasant physical reactions in people with other medical conditions (they’re also generally considered tacky and annoying)
- Don’t use tables when they’re unnecessary, as these are usually relayed by screen readers and similar devices in a confusing way that distracts from their content (and they can also be difficult for some users to process visually)
- Ensure access to changing content on pages that aren’t static; for example, many screen readers only “see” the content that appears when the page first loads, so you may need to use something like ARIA landmarks to help them understand when content changes
- Allow plenty of time for all users to absorb the content of automatic navigation elements like sliders or carousels (or avoid these altogether)
- Include screen reader-friendly alternatives to on-site experiences that don’t carry over well to this sort of technology (like maps)
- Go through every page of your website using the WAVE Evaluation Tool; this Chrome extension finds and identifies many accessibility problems (it’s not perfect, but it’s definitely helpful)
