Did you know that poor website design and development can make interaction difficult, or even impossible, for people with disabilities?
Among others, these disabilities can include:
- Age-related impairments
- Deaf-blindness
- Cognitive, learning, and neurological disabilities
- Visual impairment
Though federal, state, and local government websites are required to meet specific guidelines, all other websites in the U.S. are not legally bound to follow them. However, the legal landscape is hazy, and businesses can face lawsuits for discrimination.
Regardless of compliance laws, equal access and opportunity are services every business wants to provide their customers. In order to address accessibility issues, you’ll want to start by educating yourself about what it entails.
What are the Web Accessibility Standards?
There are three standards to familiarize yourself with: WCAG, ADA Compliance, and Section 508. Each standard has the same goal, to accommodate people with disabilities, but in varied ways.
WCAG: Web Content Accessibility Guidelines (WCAG) are created through a process developed by the World Wide Web Consortium (W3C). W3C is an international organization with the goal of ensuring one single web accessibility standard. WCAG primarily focuses on HTML accessibility.
ADA Web Compliance: American’s with Disabilities Act (ADA) is a civil rights law that prohibits discrimination based on a disability. It requires businesses and public spaces to accommodate people with disabilities.
Section 508: This federal law necessitates that federal agencies utilize technology for information and communication that can be used by people with disabilities.
There are some great online resources that share information about steps to take to ensure an accessible website. Two of our top picks are W3C and Web Accessibility in Mind (WebAIM). However, with so much information available, we think a primer on best practices is a great way to start the process.
7 Web Accessibility Best Practices
Accessibility features are meant to span the entirety of your website. This includes everything from content and alt tags to photos and design elements. Also, while these are tips for websites, keep in mind your apps, as they also need to be accessible.
1. Buttons and links should follow the 3:1 color ratio
At least a 3:1 color contrast should be used for buttons, links, icons, hover and more. A high contrast ratio ensures that anyone visiting your site will be able to see the color change and recognize the object. WebAIM has a great resource for checking color contrast that can be found here. Links should also have an additional distinction (for example, become underlined) when hovered over.
2. All page functionality is available using the keyboard
The most common issue around accessibility that often leads to lawsuits is when users cannot interface with a website using a keyboard. Keyboard control allows a user using a screen reader to navigate a website without the need for a mouse. Users should be able to use a keyboard to fully move through a website’s navigation, links, fill out a form, or even order a product.
3. Screen Reader compatibility
Screen readers are able to convert digital text into speech and aid the user in navigating with the keyboard. For a screen reader to follow the hierarchy of the website, semantic markup needs to be used. This means web elements use HTML tags conveying some information about the type of content contained between the opening and closing tags including headlines (H1, H2), regions/landmarks, lists (UL, OL, and DI), emphasized or special text (strong, code, abbr, blockquote, for example), etc.
4. Legible font sizes
It is recommended that you use at least 16px font for body text. This ensures more users are able to read through your website. Google Search Console recommends that font sizes are larger than 12px for SEO and usability purposes. Also, don’t forget the color contrast rule!
5. Videos should have captions
All web videos with voice over audio should also have captions to visually convey the information. Not only will this help give access to people who are deaf or hard of hearing, but also provide the information to users who watch videos without sound. According to a 2019 study, Verizon Media partnering with Publicis Media found that 80% of people are more likely to watch an entire video when captions are available.
6. Create accessible forms
Screen readers should be able to tab and enter through the form in a logical way using their keyboard. Be sure that form fields are labeled and easily understandable, because those that aren’t could be skipped. Place reminder text (text labels) near a field that needs input, not inside the field. This allows a user to fill out the form more easily if they forget what the input field requires.
7. Include alt text in all images
Alt text (alternative text), also referred to as alt tags, is a phrase or word used to describe the image. Adding alt tags informs the user as to what the image is in case they cannot see it. Alt tags should be less than 12 words and describe the image in a natural way. For example, if you used a picture of a car crossing a bridge, you’d want to use: “car-crossing-bridge” and not “buy-this-car”.
By designing your website to exceed accessibility standards, you are better serving your customers and ensuring all visitors have the same opportunities. We invite you to read these stories from web users regarding accessibility challenges. These personal experiences are a helpful way to gain deeper understanding of barriers many face when using websites.
If your company is looking to expand your website’s accessibility, we invite you to contact us today. Our design and SEO teams are eager to help make the web more accessible.
