アクセシビリティ：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. 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 for users.

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.

Learn more about connecting galleries to your CMS collection items. 

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.

Learn more about connecting galleries to 'Media gallery' fields.

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.

Click below for answers to common accessibility questions.