When text does not have enough color contrast between its background, it can be difficult to read for those who are color blind or low vision. To meet the contrast requirement, you should have a contrast ratio of 4.5:1 for normal text, and 3:1 for large text (18pt and above, or 14pt bold). Use WebAIM's Contrast Checker to check that you are meeting the contrast ratio.

Most text that you write in the CMS has sufficient color contrast by default. Black paragraph text and garnet headings & links have plenty of color contrast when you write them on a white background. Be careful not to add links to dark backgrounds like table headers because this will cause a color contrast failure.

Images of text with insufficient color contrast may not be flagged by Siteimprove, but you should still always check your contrast ratio for text within images so that it's readable for everybody.

Empty headings can create a frustrating and confusing experience for screen reader users. Since many screen reader users rely on headings to navigate a lengthy web page, it is important to add headings thoughtfully and to avoid adding empty headings.

If any content blocks show a heading style where the line is empty in your Omni CMS page editor, you will need to delete the empty line. Avoid pressing "Enter" when your cursor is at the beginning of a heading content block because this action creates an empty heading. If you need extra white space between content blocks, use a soft return instead by pressing "Shift+Enter".

For more information about how to create proper heading structure in Omni CMS, check out our Headings in Omni CMS guide.

If your site has this accessibility issue, that means that one or more heading levels have been skipped. Skipped heading levels can create a confusing experience for screen reader users who depend on structured headings for navigation and orientation on a web page.

For instance, do not skip directly from a heading 3 to a heading 5 without a heading 4 nested between them. You can, however, jump back to a heading 3 from a heading 5.

If you're having trouble deciding which heading level to use, refer to our Headings in Omni CMS guide for help.

Note: Although this issue is not technically a WCAG 2.1 failure, it does significantly impact the experience for screen reader users who are blind or low vision. 

Every heading on your site should have content that follows it. Using proper heading hierarchy and including content between each heading helps to keep your web page organized and easier to navigate, especially for screen reader users.

This issue is often flagged when there is an empty heading on the page. To resolve the issue, follow the same technique employed for empty headings.

The issue also occurs when there is a true heading that does not have any text between it and the next heading on the page. Headings should introduce sections of page content, not just added to make text look big and bold.

Links should always have a text alternative, or an accessible name, so that screen reader users can understand the purpose of the link. If your link has visible text, then that text acts as the link's text alternative. If you have an image that is linked, then the image's alt text acts as the link's text alternative.

For instance, images within an image gallery need alt text because each image functions as a link. If you don't add alt text to these images, then Siteimprove will flag your page with the issue "link missing a text alternative". 

For Omni CMS links that you add within the edit toolbar, make sure that you provide display text. If you choose to remove your link, use the "remove link" button in the toolbar. Removing the display text without removing the link itself leaves an empty link hanging out in your content.

Alt text, or a text alternative, is critical for communicating an image to people who are blind or low vision. Screen readers announce alt text along with the fact that the element is an image.

Most snippets with images allow you to input an alternative description for your alt text or mark the image as decorative. You should only mark the image as decorative if it does not convey any important information or if it merely repeats nearby content on the page. Screen readers will skip over the image entirely if you mark the image as decorative.

Marking an image as decorative doesn't cause the issue "image missing a text alternative" to be flagged; you would have to add white space to the alternative description field without adding any meaningful information to trigger this issue. Screen readers will still announce an image this way, but without a helpful description of the image.

Buttons should always have a text label to describe what the button does or what will happen if it's clicked. If an image is a button, that image needs to have alt text that describes the function of the button.

In Omni CMS, the expand/collapse snippet has buttons that let you expand or collapse a section of content. Each of these buttons, called the Title in edit mode, needs to have meaningful text that summarizes the content that users will expand. If you leave the Title block empty, Siteimprove will flag the issue "button missing a text alternative".

The header row for a table provides important context for the table. When a screen reader user navigates the cells of a data table, the table headers are announced so that it's easier for users to track their current placement in the table.

Create your Omni CMS tables using either the Responsive Table snippet or the Data Table snippet, and never delete the header row or leave any table headers empty. Empty table headers cause the issue "table cell missing context".

Every table header should have at least one data cell associated with it. If a table header is lacking any data cells, Siteimprove will flag the issue "no data cells assigned to table header".

It is generally not a best practice to leave any data cells empty. For missing data, consider writing "Not applicable" instead of leaving the cell empty.

Note: Siteimprove may produce a false positive result for tables with a lot of data that take awhile to load. If Siteimprove flags this issue on your page but your table does have data in each column, contact the Digital Accessibility team for help.

Interactive elements like buttons should not have other interactive elements nested inside of them. Screen readers will not announce to the user that the nested element is present.

For instance, when you add an expand/collapse snippet to your site, do not include links, email addresses or any other interactive content inside Title. The titles are already buttons, and clicking them triggers the action of expanding or collapsing the corresponding section. Include the links or email addresses inside the collapsible content instead.

Similarly, do not include links inside the table header of your Data Table.

Republish your form assets built using Omni CMS forms to resolve this accessibility issue.