5 Steps to Improve Your Website’s Accessibility

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:

A stylized form on a web browser, with empty chat 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:

• Write a text label for each field and button. Included expected formats(opens in a new tab) in plain language.

• Provide instructions to help users understand how to complete the form(opens in a new tab). Be sure to indicate required inputs, data formats, and other relevant information.

• Omit the words for element names like button, graphic or link from their labels. Screen readers identify elements when reading the respective labels(opens in a new tab).

• Make sure icons and images intended as button labels have the button’s action as their alt text(opens in a new tab) instead of a visual description of the icon or image (think “attach file” instead of “paperclip”).

A stylized web page that shows a series of page headings, next to empty chat 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(opens in a new tab) that provide insight into the content.

• Do not select heading levels based on their appearance. Plan your web page’s heading structure(opens in a new tab) in advance to ensure you follow the correct order.

• Avoid using headings for their sizing or visual appearance alone. Skipping heading ranks(opens in a new tab) (for example, following an <h2> header with an <h4> heading) can be confusing to screen reader users.

A stylized web page with an image of a dog on it, next to a chat bubble that is reading a description of the dog out loud

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(opens in a new tab). Omit the words “graphic” or “link” because assistive technology will convey element context.

• Include null alt text(opens in a new tab) (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(opens in a new tab) 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.

A stylized web page with a series of accordion tabs. One tab is expanded with a chat bubble announcing that it is currently 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:

• Clearly define the expected web page or app responses to user actions for all controls(opens in a new tab). This helps developers understand what to build.

• Use ARIA to convey the state of a control(opens in a new tab) to assistive technology (expanded, collapsed, selected, etc.).

A stylized version of a pop-up window on a web page where none of the fields or buttons are labeled for accessibility

5. Make Sure Everyone Can Navigate Your Site

For a website to be accessible, it needs to be navigable by keyboard alone — which is how people with screen readers use the internet. Most interactive elements, such as links or pop-ups, are typically indicated visually on a webpage. With a screen reader, you can focus on these elements by using the tab key on a keyboard.

Here are a couple of best practices to make your site keyboard-friendly:

• Make sure that all user-facing controls can be used with a keyboard alone(opens in a new tab) — as well as a mouse.

• Test web page operation(opens in a new tab) using only a keyboard.

Not sure where to begin? Check your site’s accessibility status with the AudioEye website scanner and use the checklist to start addressing your site’s accessibility issues.