Accessibility: Best Practices for the CMS

Implementing accessibility best practices in your CMS (Content Management System) ensures that your site is usable for everyone, including those who rely on assistive technologies. These practices include adding accessible names to elements, using effective alt text for images and galleries, and placing elements in sections or containers with ARIA attributes. 

By following these guidelines, you can create a more inclusive website that caters to all users, making it easier for them to navigate and interact with your content.

Alt text is essential for providing context to images and galleries. When writing alt text, you should focus on describing the image as if AI is interpreting it. Keep it concise (under 125 characters) and avoid phrases like "image of". For more detailed guidance on writing effective alt text, see Accessibility: Preparing Your Images and Galleries.

In general, we recommend creating a collection field to use as the alt text for the CMS-connected images and galleries. To keep your collection organized, you can place the alt text field next to the image or gallery it represents and name it "Alt text [image/gallery name]". Keep in mind that decorative images do not necessarily need alt text. See the decorative images section below for more info. 

When adding non-decorative images to your CMS, it’s crucial to provide descriptive alt text. We recommend adding a separate 'Text' field type in your CMS collection that represents the alt text of the images. Focus on using specific and descriptive language in your alt text. For example, instead of writing the alt text as "a woman", use "a woman planting daisies in a garden". 

When you connect the image in your editor to the dataset, click the Alt text connects to field and select the alt text field you created. This allows screen readers to describe the image and its purpose, making your site more inclusive. 

Decorative images typically do not convey meaningful content and do not require alt text. If an image serves a purely decorative purpose, you can leave the alt text disconnected in the dataset. This helps screen readers skip over the image, preventing unnecessary distractions.

If an image link connects to a dataset action, such opening the dynamic item page, its alt text should describe the action, rather than just the image itself. For example, if clicking an image takes visitors to a profile page, the alt text could be "Read more about Willis McSmoot". 

With expressions, you can combine static text (e.g. "Read more about") with dynamic collection field values (e.g. "Willis McSmoot") to ensure the alt text varies per image. This way, visitors can understand the purpose of the image when using assistive technologies. 

For galleries that connect to 'Image' field types, it is important to provide alt text for each image. Create a separate 'Text' field type in your CMS collection specifically for alt text of the images. When connecting the gallery to your dataset, connect the Alt texts connect to drop-down to the corresponding alt text field. This ensures that screen readers can provide descriptions of the images within the gallery, enhancing accessibility.

Connecting a gallery to the 'Media gallery' field is a great way to display numerous images or videos about an item on a dynamic item page. When doing so, add alt text for each media file directly within the 'Media gallery' field in your collection. Click the 'Media gallery' field next to the relevant item in your collection to add alt text to each media file. There, you can also enter the title and description of each file. This allows screen readers to convey context for both images and videos, ensuring that all media content in your gallery is accessible.

When adding a 'Load More' button in the Studio Editor, keep everything that's placed below the repeater or gallery in a separate section. If you place any elements in the same section as the repeater or gallery, and directly below the repeater or gallery, the elements will overlap when the 'Load More' button is clicked. This overlap can cause confusion for visitors as it hinders visibility and accessibility.

To avoid this issue, always ensure that any elements you want to place below the repeater or gallery, including the 'Load More' button, are attached to a separate section. This way, when users click the 'Load More' button, the gallery or repeater expands appropriately without any overlap, providing a clearer and more user-friendly experience.

On static pages, if visitors can click 'Next/Previous item' buttons that cause CMS-connected elements to change content, attach the displaying elements to a single container. Then set the container's ARIA (Accessible Rich Internet Applications) attributes so screen readers can announce the changed content when visitors click the buttons.

You only need to attach the elements that display the changing content. The 'Next/Previous item' buttons do not need to be attached to a container.

If you display the dataset item count in a text element, and visitors can click an input element to change the item count, attach the text to a container. Then set the container's ARIA (Accessible Rich Internet Applications) attributes so screen readers can announce the item count when it changes.

This can be relevant when visitors click inputs that filter content or inputs that collect content. Whenever visitors have the potential to alter the displayed item count, attach the text that shows the item count to a container so screen readers can announce the change.

When you have input elements that are set to filter content, the filters are applied as soon as a visitor makes a selection by default. You can change this behavior by adding an 'Apply filters' button. 

For accessibility, it’s better to add an ‘Apply filters’ button. With this button, the content is not filtered until visitors click it. This creates a better experience, especially if users want to set multiple filters before applying them all at once. 

To make pagination bars more accessible, add accessible names to both the bar itself and its buttons. These names are not visible on the screen but are essential for screen readers, helping users understand how to navigate through pages. For example, you can name the pagination bar "Page navigation" and assign clear names to buttons like "Next page", "Previous page", or customize them based on your content (e.g. "Next story" or "Previous product").

Click below for answers to common accessibility questions.