5 Steps to Improve Your Website’s Accessibility

Back to blog

5 Steps to Improve Your Website’s Accessibility

Posted September 02, 2022

AudioEye

Posted September 02, 2022

Making Accessibility Visible: A Checklist
Making Accessibility Visible: A Checklist

Ready to see AudioEye in action?

Watch Demo

As a follow up to our video series Making Accessibility Visible, we’ve created an accessibility checklist for content creators, web designers, and developers. Use the checklist to incorporate accessibility best practices into your web design. 

In 2021, we published a series of videos to demonstrate what it’s like for people with visual impairments to navigate the internet. To illustrate the importance of web accessibility, we shared examples of both accessible and inaccessible sites.

Now, we’ve compiled a list of best practices that can help you avoid the accessibility issues highlighted in the series. Think of it as your web accessibility checklist — in five key steps:

Sign up form and screen reader speaking bubbles

1. Give Every Button and Form Field a Label

Buttons and form fields help screen reader users interact with different elements to buy products, book appointments, fill out forms, and more. A label for a form control helps screen reader users better understand its purpose.

Here are a few best practices for adding buttons and form field labels:

Web page with a heading 1, heading 2, and heading 3 with screen reader speech bubbles

2. Make Sure Your Headings Are Helpful

We use headings to organize content on web pages. People who use screen readers rely on headings to understand the page structure and navigate its content.

Use the tips below to write helpful headings:

  • Write meaningful headings that provide insight into the content.
  • Do not select heading levels based on their appearance. Plan your web page’s heading structure in advance to ensure you follow the correct order.
  • Avoid using headings for their sizing or visual appearance alone. Skipping heading ranks (for example, following an <h2> header with an <h4> heading) can be confusing to screen reader users.
Web page with an image of a dog and a screen reader speech bubble

3. Better Alt Text = Better User Experiences

Image alternative text, or alt text, is a written description of an image that screen readers can read out loud to people with visual impairments, sensory processing disorders, or learning disabilities.

Here are a few alt text best practices to keep in mind:

  • Write alt text for all important images. Include language that evokes the image's purpose conveyed in context. Omit the words “graphic” or “link” because assistive technology will convey element context.
  • Include null alt text (alt=””) for images that are not important, are used for layout, or do not serve a function. This ensures they are hidden from assistive technologies.
  • If the alt text is describing a product, be sure to include key elements like style, design, materials, features, and benefits. Colors should also be described, if they have unique or non-standard names (like cerulean).
  • Avoid using image file names as alt text. This does not describe the image or assist users in their understanding.
An accordion on a web page with two collapsed and one expanded

4. Keep Visitors Informed of What’s Happening

Without proper labels and descriptions of functional elements, screen reader users can miss out on the functionality and key messages of a web page, including status updates that inform users on the results of their actions (for example: changing a delivery address), errors, and more.

Follow the recommendations below to add proper descriptions of functional elements:

A subscription form pop-up and screen reader speech bubbles

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading