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.
NOTE
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.
TIP
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".) |