---
title: Atomic Commerce Accessibility
slug: paof0563
canonical_url: https://docs.coveo.com/en/paof0563/
collection: coveo-for-commerce
source_format: adoc
---
# Atomic Commerce Accessibility
Coveo designed [Atomic for commerce](https://docs.coveo.com/en/pb6e3284/) with accessibility in mind.
[Atomic for commerce](https://docs.coveo.com/en/pb6e3284/) controls specific elements of a web page to ensure those parts of the user experience adhere to accessibility standards.
The complete accessibility of your [commerce interfaces](https://docs.coveo.com/en/pbkb0241/) depends on additional implementation steps.
This article provides guidance for improving the accessibility of your [commerce interfaces](https://docs.coveo.com/en/pbkb0241/) when using [Atomic for commerce](https://docs.coveo.com/en/pb6e3284/).
## Improve contrast ratios
We recommend that the color contrast ratios in your interface conform to [WCAG Level AA](https://www.w3.org/WAI/WCAG2AA-Conformance) (see [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)).
If you're using the theme that's included with [Atomic for commerce](https://docs.coveo.com/en/pb6e3284/) (`coveo.css`), you can ensure that [Atomic for commerce](https://docs.coveo.com/en/pb6e3284/) conforms to accessibility standards by replacing it with the accessibility theme (`accessible.css`).
If you're using a custom theme, [customize the colors and font sizes](https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/) in your interface to conform to accessibility standards.
## Add headings
According to a [survey by WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding), 67.7% of respondents were likely to navigate by headings first when trying to find information on a lengthy web page.
[Atomic for commerce](https://docs.coveo.com/en/pb6e3284/) is a component-based library that lets you divide your [commerce interfaces](https://docs.coveo.com/en/pbkb0241/) to suit your needs, so its components don't include headings.
Add headings to allow screen reader users to jump between relevant sections of your page.
```html
Search
Facets
... other sections ...
```
## Improve product accessibility
Since products are highly customizable, the relevant components offer limited out-of-the-box accessibility support.
We recommend the following guidelines to help you provide an accessible experience for your users.
### Reorder product sections
> **Note**
>
> This is only relevant if you use [product sections](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-product-section-actions\--docs) in your product template.
Screen readers read sections in the order they are defined in the template, regardless of their visual arrangement.
To improve accessibility, define product sections from most important to least important, starting with the title section.
This order depends on your use case, so review other accessible search pages with similar purposes for guidance.
```html
...
...
...
...
...
...
...
...
...
```
### Hide the thumbnail
Your products may include a thumbnail as well as a detailed title.
If your title accurately describes the content which is depicted in a thumbnail, it means that the thumbnail doesn't contain additional information for screen readers.
In such a case, the thumbnail would slow down navigation for screen reader users, so hide the thumbnail from screen readers.
Achieve this by setting its [`aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) property to `true`.
```html
```
### Add roles
Add semantic [roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) to certain product components to better communicate to screen readers what they represent in your particular template.
However, be aware that adding a role to a component overwrites its original role and that screen readers may expect some roles to have specific children or support specific keyboard shortcuts.
In general, make the following adjustments:
* Add the `role="grid"` (if the fields are interactive) or the `role="table"` (if the fields are not interactive) property to the element containing all your fields and:
--
** Wrap each field label-value pair in an element with the `role="row"` property.
** Add the `role="rowheader"` property to each field label.
** Add the `role="cell"` property to each field value.
--
```html
Brand:
Rating:
```
* Add the `role="note"` property to product badge components.
```html
```
## Instant products accessibility
Out of the box, the [`atomic-search-box-instant-products`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box-instant-products\--docs) component doesn't support accessibility, due to important variations from implementation to implementation.
Implement it yourself using the `ariaLabelGenerator` property, as in the following code sample.
> **Warning**
>
> The following is merely an example.
> Details depend heavily on the way you implemented your instant products.
> Assume that instant products are [non-text content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html), and make sure to test your implementation to validate that all the visible content is described by the string you return.
```javascript
const instantProducts = document.querySelector('atomic-commerce-search-box-instant-products');
if (instantProducts) {
instantProducts.ariaLabelGenerator = ({ i18n }, product) => { <1>
const information = [product.ec_name]; <2>
if ('ec_rating' in product) { <3>
information.push(
i18n.t('stars', {
count: product.ec_rating,
max: 5,
})
);
} else {
information.push(i18n.t('no-ratings-available'));
}
if ('ec_price' in product) { <4>
information.push(
product.ec_price.toLocaleString(i18n.language, {
style: 'currency',
currency: 'USD',
})
);
}
return information.join(', ');
};
}
```
<1> The `ariaLabelGenerator` function takes in the `i18next` bindings and the target product.
The `i18next` bindings are required when you want to support [localization](https://docs.coveo.com/en/atomic/latest/usage/atomic-localization/).
<2> Create an array of strings that your function will concatenate and return.
The first thing you include is the item name.
You'll add other strings below.
<3> If the field you want to add is populated, add it to the `information` array, using `i18n` [dynamic values](https://docs.coveo.com/en/atomic/latest/usage/atomic-localization#use-dynamic-values) for localization.
Turn the field into a string as in the `locales.json` file below.
```json
// locales.json
{
// ...
"stars": {
"en": "{{count}} stars out of {{max}}",
"fr": "{{count}} étoiles sur {{max}}"
},
// ...
}
```
<4> If the price field is populated, turn it into a string using the [`toLocaleString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) function, and add it to the `information` array.
You can find full examples in the [Atomic](https://docs.coveo.com/en/lcdf0264/) project [repository](https://docs.coveo.com/en/2739/).
They aren't Commerce examples, but the implementation is similar.
* [`commerce-full.html`](https://github.com/coveo/ui-kit/blob/fc72655/packages/atomic/src/pages/accessibility/commerce-full.html)
* [`AtomicPageWrapper.tsx`](https://github.com/coveo/ui-kit/blob/fc72655e3524e76c6d7409e94e6e388457e60312/packages/samples/atomic-react/src/components/AtomicPageWrapper.tsx)