Accessibility. It’s been talked about for years and made major waves in the physical world, but its stake in the digital space isn’t quite as defined.
Although it’s not yet a legal requirement for every business, you should still strive for an accessible website. Not only does it open the door to users with disabilities, it also makes it easier for users to navigate your website. A.k.a.: It improves user experience across the board.
Many elements contribute to an accessible experience, and here to explain them to us is our Development Team Lead Jared Chesebro and Senior Designer Alycia Jones. Here’s what they’ll walk us through in this blog:
- Accessible Design Requirements
- How Accessibility Affects Web Development
- How Accessibility Affects Web Design
- Resources for Testing Your Site
Accessible Design Requirements
One reason accessible web design is such a popular topic is because so many websites get it wrong. WebAIM conducts annual tests to measure web accessibility, and in the 2022 study, they noted an average of 50.8 errors on every page they scanned!
Now we’re not saying your website has to be perfect, but I think we can all agree that 50 is above an acceptable error threshold.
Before we get into the recommended elements of an accessible website, let’s look at the legal side of web accessibility.
The Legal Side
Accessibility regulations all stem from the Americans with Disabilities Act (ADA), which states it is illegal to discriminate based on disability in public spaces. These rules applied primarily to physical establishments, but there was some debate about whether the internet should be considered a public space. To address those concerns, Section 508 was added, which addresses the internet specifically.
Title I of the ADA requires that “any business with at least 15 full-time employees that operates for 20 or more weeks every year” must have an accessible website. Title III poses the same requirements for any business that falls into the “public accommodations” category, such as hotels, banks, public transportation and even public universities and colleges.
“This is a huge push for websites to meet accessibility guidelines,” Jared says. “And it benefits your site too because the more accessible it is, the more people can interact with it.”
Part of this push is reprimanding sites that don’t comply. There has been a wave of lawsuits in the past year, especially in California, New York and Florida, as people demand accessible online resources.
To help businesses create compliant websites, the World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG), which address the requirements outlined in Section 508 of the ADA.
So what does it take to have an accessible website? Let’s ask W3C.
Web Accessibility Standards
The Web Accessibility Initiative is W3C’s effort to make it easy for people to adhere to WCAG. It lays out the organization’s suggestions in plain language that’s easy to follow and implement.
To meet W3C’s standards of accessibility, your website must:
- Include alt text on images
- Have the ability to pause, play and cycle through all carousels or videos
- Include captions on all videos
- Keep HTML semantics logical and organized
- Allow keyboard navigation
- Use high-contrast colors
- Have minimum touch target sizes of 44x44 pixels
- Ensure your site responds and resizes correctly for all types of devices and screen sizes
This is a long list, but it’s by no means comprehensive. It takes a lot of work to create a truly accessible website, but these bullet points are a good place to start.
If you don’t need accommodations to access websites, it can be tough to understand how these things make it easier for people with disabilities. Jared explains, “Things like alt text and clear HTML structures make it easier for people using screen readers to navigate your website. Keyboard navigation is helpful for people with physical impairments who might not be able to use a mouse to navigate their computer screens.”
As for design, Alycia helps us understand the importance of text size, color and contrast. “When you have a high contrast, it helps users read and see things more distinctly. It also helps colorblind people accurately view your site and makes buttons easier to find and click. Appropriately sized text — ideally at least 16 pt. — will not only help people on the desktop, but it also makes it easier to read your content on small devices.”
How Accessibility Affects Web Development
That list was a lot, but we promise there’s no reason to worry. Jared says that for seasoned developers, making these changes requires only minor tweaks to the existing code and are easy to implement when starting from scratch.
He does recommend a little continued education for anyone in the web design or development space, though. Things like:
- Sharpening your knowledge of HTML5 and semantic markup. Using correct markup provides an easy-to-understand, hierarchical structure that outlines your content for screen readers and web crawlers.
- Ensuring keyboard commands support website navigation, jump links, functionality triggers and the option to skip to the main content.
- Adding alt text only where it counts. “Many developers and content editors get this wrong and assume you must add alt text to all images,” Jared says. “Rather than adding it to every image, keep it to images that are more than just aesthetic. The alt text should be helpful and illustrative of images that enhance the understanding of the content on the page.”
- Familiarizing yourself with the tools and techniques that help with building accessible websites, such as ARIA and accessibility scanning tools
- Developing strategies to meet the WCAG 2.1 AA requirements
Most importantly, Jared says it’s key for developers and designers to work together when building an accessible website. He notes that it’s difficult to make some design elements accessible on the back end and vice versa, so working together can save a lot of time and energy for the whole team.
“It’s not always worth it to design something that’s difficult to make accessible.”
How Accessibility Affects Web Design
Alycia agrees that design and development go hand in hand, which is why it’s critical for the web designer to think about accessibility too. People with visual impairments or simply low vision can be significantly impacted by the way a website is designed, so Alycia shares some tips on how to avoid issues for those user groups:
- Use focus states on your web pages. A focus state is when the cursor lights up or somehow distinguishes the area it’s on from the rest of the web page. It could be by increasing the brightness or creating color contrast. This accessibility feature helps people use keyboard navigation track where they are on the page as they move through its content.
- Label form fields. Some forms use low-contrast placeholder text instead of descriptive labels. This causes problems for people with vision impairments because the labels don’t give their screen reader any helpful information and they disappear when a user clicks on the box. Instead, opt for descriptive text in your form fields like “First name” and “Email address” and use the same color as your standard text. This will help to provide more contrast and context for users.
- Use multiple differentiators. Color blindness affects 12 million people in the U.S.. So if you’re only using color to differentiate elements on your website, there’s a large audience that can’t access your information. Alycia recommends adding things like patterns and textures to help separate elements. For example, a bar graph that has blue bars with polka dots and green bars with stripes.
- Pair text with icons wherever possible. “This helps users with reading or cognitive disabilities, or those who speak another language, understand your content more easily,” Alycia explains. Instead of relying on text alone to convey information, consider including graphics or images to add context.
👉 Check out some real-world examples of accessible design: 10 Examples of ADA Compliant Accessible Web Design
Test Your Site
Even when you consider all of these design and development tips, you might still have some accessibility blind spots on your website. That’s why both our experts recommend testing your website.
Two helpful testing tools are WAVE (by WebAIM) for any website and the Axe DevTools Chrome extension for websites on Google’s browser. These programs will scan your site and flag accessibility errors so you can see what areas need attention or what issues you missed consistently across your web pages.
Expand Your Reach with Accessible Web Design
Accessibility standards might not be legally required, but they can significantly impact how many people your website will reach. When your site is designed with all users in mind, you make it easier for people to discover your brand, learn about your business and engage with you.
To learn more about how your web development and design affect your business, check our blog about Common Website Mistakes Losing You Leads.
