Accessibility

It is important to ensure your site is usable by all visitors. The following article presents helpful guidelines to make sure your website is ADA Accessible. You can also follow the steps in the section Bolt Checkout Accessibility to make your ecommerce store even more ADA Accessible for screen readers.

This article contains tips and suggestions for best practices surrounding web accessibility. The information in this article is not comprehensive. Visit W3.org for a list of web accessibility auditing tools.

General Guidelines

Alt Text

Alt text helps users with disabilities navigate your site when using screen readers and other adaptive aids. Use descriptive alt text for images and decorative elements to ensure users aren’t missing important information on your site.

Example

<img src="/assets/images/t-shirt.png" alt="Blue t-shirt on black background">

Use Contrast

Some colors on your site may be invisible to users with visual impairments. Make sure text and navigation elements are easily understandable by using sufficient contrast between text and its background. Use this contrast checker or other tools to determine if your site uses correctly contrasting colors.

Avoid Relying on Visual Indicators

Avoid using images, decorative patterns, colors (e.g., using green for success) or symbols (e.g., arrows) to indicate what you want users to focus on. Navigation should use plain text to instruct users where to go. Success messages should be plainly stated using text.

Use Informative HTML

Your site should use HTML to indicate the purpose of each element, where possible. Screen readers and other adaptive aids are trained to follow semantic HTML and allow the user to read or hear the content on the site in an intuitive way.

Example

<head>
    <h1>Welcome</h1>
</head>
<main>
    <article> This is a website. 
        <aside> This is a widget. </aside>
    </article>
</main>

Bolt Checkout Accessibility

You can enhance Bolt Checkout to be even more ADA accessible using screen readers by making the following changes.

ARIA or Accessible Rich Internet Applications allow you to make elements on a webpage more accessible. You can supplement HTML with aria when elements need additional accessibility features.

Location Current Behavior Update
Step 3 of Checkout: CVV tooltip aria-hidden=true Tooltip content needs to be reachable by a screen reader event when visually hidden. Remove aria-hidden=true from the CVV element. Add a screen reader only CSS class to the tooltip text when it is not visible (e.g. sr-only), and remove the class when it becomes visible.
Step 2 of Shipping: Radio buttons Radio buttons do not have matching values. Ensure each name attribute on a radio button in this set has a matching value.
Step 2 of Shipping: Radio buttons No <legend> element. Wrap shipping options in a <legend> tag for ease of use by screen readers. See Using the Fieldset and Legend Elements for more information.
Checkout Doesn’t indicate what step of checkout the user is currently on. Displays a progress bar.
Account Creation: Address Does not have additional context for + Add New Address text. Add alt text that explains its purpose (e.g. alt="Adds a new form field for additional address information".)
📖On This Page