From optimizing for search engines to PPC advertising, webmasters use every trick in the book to attract as many website visitors as possible. However, not all webmasters take the steps necessary to make sure that their site can be used by everyone. According to a 2021 WebAIM accessibility evaluation report, more than 97% of websites are inaccessible to people with disabilities.
Why does this matter? One in four Americans and 15% of the world’s population have some form of disability, which means millions of people are struggling to use the web. Achieving website accessibility compliance is not only a moral obligation, but it’s also good for business as it expands your market reach and helps you attract new customers.
In this post, we’ll discuss the importance of website accessibility and offer ten tips for how to make a website accessible for the disabled.
What Is Website Accessibility?
Website accessibility means developing an inclusive design so that people with physical impairments can easily access online content. Many disabled individuals use screen readers and speech-to-text software to interact with the web. Building an accessible design makes it easier for assistive technologies and users with disabilities to navigate your website.
Who determines what is an accessible design? The World Wide Web Consortium (W3C) is responsible for developing digital accessibility compliance standards. Known as the Web Content Accessibility Guidelines (WCAG), W3C’s recommendations are the de facto standard for building inclusive designs and determining website accessibility.
Why Should You Comply With Accessibility Standards?
So why should you bother complying with WCAG recommendations? Remember we said that building universally accessible websites is good for business because it helps you cater to more customers, thereby increasing your revenue. Still not convinced? OK, how about this: Complying with WCAG standards helps you avoid legal trouble.
The Americans With Disabilities Act (ADA) prohibits discrimination against disabled individuals in places of public accommodation. In jurisdictions like California, websites are regarded as places of public accommodation. More than 3,500 lawsuits were filed against websites in 2020 for violating ADA. Achieving accessibility compliance helps you prevent run-ins with the law.
10 Ways to Make Your Website More Accessible
`Now that you’ve learned about the significance of having an accessible website, let’s discuss how to optimize your website for disabled users. Developing an accessible website doesn’t mean rebuilding your site from scratch. With simple adjustments to reading order, color contrast, and font size, you can make your website usable for a wider audience.
Here are 10 tips for how to make a website accessible for the disabled:
1. Ensure Your Site is Keyboard-Friendly
People with visual and motor skill disabilities can’t use a mouse or trackpad to navigate web content. These individuals can access online content using the Tab key or assistive technologies that rely on keyboard-only navigation. Therefore, enabling tab-based navigation and making your site keyboard-friendly can help with digital accessibility compliance.
Using focusable elements like links, buttons, or the HTML tabindex attribute can make your website more accessible. A great way to make your site keyboard-friendly is to break up page content into jump links. These links help disabled individuals use the tab/arrow keys to jump to important portions of the page without navigating through large chunks of content.
2. Use Correct Headings to Structure Content
Screen readers rely on heading code to interpret page content. An <h1> code tells the screen reader that it’s the page title, <h2> are the main points, and <h3> are less important sub-point content. Screen readers use heading levels to help disabled users navigate web pages in a logical progression.
Following the correct heading hierarchy ensures accessibility compliance as it prevents screen reader confusion and allows disabled users to follow your content in visual order. More than 67% of screen reader users prefer to navigate a web page through its headings. Here’s how to make a website accessible for the disabled using the correct heading hierarchy:
- Use <h1> only for the main page heading; do not use <h1> anywhere else on the page
- Do not skip heading levels when moving down the hierarchy (e.g. jump from <h1> to <h3>); but it’s fine to skip headings if moving up the hierarchy (e.g. go from <h4> to <h2>)
- Do not choose headings based on their appearance; select appropriate heading levels based on their rank in the hierarchy
3. Add Alt Text to All Images
Alt text ⏤ or alternative text ⏤ is a succinct description of an image on a web page. One of the most important principles of web accessibility compliance, alt text is used by screen readers to describe an image to people that can’t see it. Despite the significance of alt text for digital accessibility, many websites don’t bother to write meaningful alt text.
All images on your website should have alt text to make your content accessible to visually disabled people. How can you write good alt text? Alt text should be concise: no more than 250 characters. And don’t write “image of”, “picture of”, or “graphic of” in the description because the screen reader will say something along those lines before it reads the alt text.
4. Create Descriptive Links
Along with headings, links are another feature screen reader users use to navigate through a web page. When screen readers go through links, they read out the anchor text to the user without providing context. Anchor text like “click here” or “learn more” confuse screen reader users because they don’t know what these links are about or where they will take them to.
Creating descriptive links is crucial for achieving accessibility compliance because it improves the navigation experience for disabled users. It is acceptable to have up to eight words in the anchor text, so go ahead and develop descriptive links that provide the most information. A “click here to register for a free account” link is more helpful to screen reader users than “click here”.
5. Choose Colors With Care
Another tip for how to make a website accessible for the disabled is to watch your colors. Along with total blindness, about 1 in 12 men have color blindness, and millions of other people have reduced color contrast sensitivity. Color choices impact accessibility compliance because they can make it either harder or easier for visually impaired people to use your content.
Use these tips to choose your colors wisely:
- Don’t use color cues to convey information; screen readers can’t detect colors
- Create sufficient contrast between foreground text and background colors; normal text must have a 4.5:1 contrast ratio, while 3:1 is enough for large text
- Take advantage of free applications like WebAIM’s color contrast checker to develop accessible designs
- Avoid red or green indicators as people with color blindness can’t see them
6. Design Accessible Forms
Web forms are commonly used to interact with site users. But the traditional ways of designing forms, such as applying color cues to indicate required fields, adding placeholder text, and using CAPTCHA verification make forms inaccessible to people with visual disabilities. It’s crucial to design inclusive forms so you can meet accessibility compliance requirements.
How can you design accessible forms? Let’s start with the color cues. Instead of using red color to indicate required fields, use asterisks and ARIA attributes. The asterisks help people with red-green color blindness to identify required fields. For screen reader users, write the following code inside the <input> tag: aria-required=”true” for required fields, and aria-required=”false” for optional fields.
Here are additional ways to make your forms more accessible:
- Do not use placeholder text because its light grey color can be invisible to people with reduced contrast sensitivity
- Instead of placeholder text, give all information about each form field inside the <label> tag
- Use logic questions or SMS/email authentication in place of CAPTCHAs to verify form submission
7. Don’t Use Tables for Layouts
Do you want to know how to make a website accessible for the disabled? Stop using <table> for building page layouts. Not only does <table> slow page load, but it also deters website accessibility compliance. When a screen reader encounters the <table> tag, it informs the user that there is a table with “x” number of columns and rows. This confuses the user and distracts them from your content.
If you want to improve your website’s UX for disabled users, don’t use tables for anything other than tabular data. It is best to use CSS to build page layouts instead of the <table> element. CSS layouts require less HTML code, do not alter the page’s visual order, and create fewer potential accessibility issues.
8. Support Fluid Text Resizing
So far, we’ve discussed accessibility compliance for color blindness and fully blind web users. Along with one million blind Americans, another 30 million have trouble seeing even when wearing glasses or contact lenses. Most browsers enable text resizing to make reading easier for low-vision internet users. If your website is not flexible, this resizing can break your layout.
You should enable fluid text resizing to make content more accessible and prevent your site from breaking. A good way to do this is to avoid absolute font-size units like pixels and points. Using relative units like percentages and ems makes your layout more responsive and flexible. Also, don’t set the viewport to user-scalable=no because this disables browser zoom.
9. Develop Accessible Video and Multimedia Content
Besides vision disabilities, almost 15% of American adults have some form of hearing impairment. Therefore it’s necessary to develop accessible multimedia content so that everyone can see and hear them. This not only helps you achieve accessibility compliance but also increases brand engagement.
Are you wondering how to make a website’s multimedia content accessible for the disabled? Follow these tips to produce video and audio content that everyone can use:
- Add closed captions to videos.
- Provide a transcript for podcasts.
- Include real-time captioning in live videos and audios.
- Allow automatically playing media to be paused, stopped, or hidden.
10. Take Advantage of ARIA Attributes
Accessible Rich Internet Applications (ARIA) are technical specifications that make web content more accessible for assistive technology users. ARIA works by adding accessibility attributes to HTML elements that don’t have these capabilities natively. ARIA, along with HTML5, CSS3, and JavaScript are required to meet WCAG’s accessibility compliance.
So, when should you use ARIA? W3C recommends not to use ARIA if there are HTML elements and attributes that provide the same functionality you need. If the feature you’re looking for is not available in HTML ⏤ like the required form fields we discussed above ⏤ then you can use ARIA attributes to make the element more accessible.
Here are some of the best uses for ARIA:
- Descriptive labels ⏤ The aria-label attribute can add more description to links like “read more” or “click here”
- Alerts ⏤ If you want to alert a screen reader user of an event, such as successful submission of a web form, you can use ARIA live regions and alert messages to accomplish this
- Build relationships ⏤ ARIA attributes can also be used to build relationships between parent/child elements
- Accessible forms ⏤ The aria-required=“true” or “false” attributes can be used to indicate required or optional form fields
Get More Help With Web Accessibility Compliance
As you can see, developing an accessible website is relatively straightforward once you know what to do. The effort you put in will pay off in increased customers, an improved brand image, and a reduced risk of lawsuits. If you need more help with building an ADA-compliant website, you can partner with a professional web design agency. Check out our rankings of the best web design service companies to find the ideal partner for accomplishing your accessibility goals.