5 Steps to Improve Your Website’s Accessibility
- 1. Give Every Button and Form Field a Label
- 2. Make Sure Your Headings Are Helpful
- 3. Better Alt Text = Better User Experiences
- 4. Keep Visitors Informed of What’s Happening
- 5. Make Sure Everyone Can Navigate Your Site
See AudioEye in action
Watch Demo
5 Steps to Improve Your Website’s Accessibility
![Making Accessibility Visible: A Checklist](https://images.prismic.io/audioeye-web/3bbe9511-3967-4df7-baba-147c9dd3a97c_MAV-a-checklist-cover.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
![Making Accessibility Visible: A Checklist](https://images.prismic.io/audioeye-web/3bbe9511-3967-4df7-baba-147c9dd3a97c_MAV-a-checklist-cover.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
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](https://images.prismic.io/audioeye-web/82e87e48-6094-462e-93df-c4bba8b7b617_MAV-a-checklist-buttons-form-fields.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
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”).
![Web page with a heading 1, heading 2, and heading 3 with screen reader speech bubbles](https://images.prismic.io/audioeye-web/7c2f2d32-202a-4d2c-93ed-cbf309a5299b_MAV-a-checklist-headings.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
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](https://images.prismic.io/audioeye-web/1403e9d7-b4fe-4cb3-b7ab-fdb1d69b54e4_MAV-a-checklist-image-alt-text.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
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](https://images.prismic.io/audioeye-web/b813423a-5a58-430b-897b-35401e146dcd_MAV-a-checklist-functional-elements.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
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.).
![A subscription form pop-up and screen reader speech bubbles](https://images.prismic.io/audioeye-web/4a0741f9-82ca-4711-ba9a-9adea4539a99_MAV-a-checklist-keyboard-focus-dialog-behavior.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&w=1160&h=609)
Ready to see AudioEye in action?
Watch Demo
Ready to test your website for accessibility?
Share post
Topics:
Keep Reading
Accessible Icons: Definition and Importance for Accessibility
Icons can be cute and handy, but are yours user-friendly for everyone? Here’s why you should ensure they are – and how to do it.
accessibility
July 26, 2024
Mastering HTML Accessibility: Best Practices for Accessible Coding
Explore HTML accessibility best practices and guidelines for creating accessible web content and how it improves the experience for users with disabilities.
accessibility
July 25, 2024
WCAG Audit: What It is and How to Do It
WCAG audits determine your website’s conformance level, which reflects usability and compliance to accessibility laws. Here’s why you need one.
accessibility
July 22, 2024