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:

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 in plain language.
• Provide instructions to help users understand how to complete the form. 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.
• Make sure icons and images intended as button labels have the button’s action as their alt text instead of a visual description of the icon or image (think “attach file” instead of “paperclip”).

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.

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.

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. This helps developers understand what to build.
• Use ARIA to convey the state of a control to assistive technology (expanded, collapsed, selected, etc.).

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 — as well as a mouse.
• Test web page operation 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.