CMS: Best Accessibility Practices

Implement accessibility best practices in your CMS (Content Management System) to make your site usable for all visitors, including those who rely on assistive technologies. These practices include adding accessible names to buttons, using effective alt text for all media, and placing elements in sections or containers with ARIA attributes. Use these guidelines to help everyone navigate and interact with your content more easily.

Alt text is essential for providing context to images, videos, and vector shapes. When writing alt text, describe the media clearly and concisely, as if AI or screen readers are interpreting it. Keep alt text 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.

We recommend creating a text field in your CMS collection to use as alt text for each media item. To keep your collection organized, place this field next to the media field it represents and name it clearly, such as “Alt text [image/gallery name]”.

For video elements, the alt text property is called Video description in the dataset connection panel. For vector images or shapes, use the Alt text connects to option. For background images in sections, strips, columns, or repeater items (Wix Editor only), use Background alt text connects to.

Decorative images and media that do not convey meaningful content can have their alt text left blank. This lets screen readers skip them and reduces distractions.

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.

You can add accessible names to buttons that connect to your CMS. Accessible names work like alt text but are specific to buttons. They help screen readers describe what the button does or where it leads. Adding accessible names to buttons improves your site’s accessibility and helps all visitors navigate your content more easily.

When you connect a button to your dataset, use the Accessible name connects to drop-down to connect the accessible name to a 'Text' field in your collection. This field should describe the button’s action or destination clearly and concisely.

For example, instead of a generic name like “Click here,” use “Read more about our services” or “Submit your application”. 

If needed, you can use expressions to combine static text with values from your collection fields. This way, screen readers provide meaningful descriptions for each button based on the content. For example, you can create an accessible name like:

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.