Request More Info Apply to Ä¢¹½tv
Explore: Headings | Alt Text | Tables | Link Descriptions | Color Contrast

Proper Heading Structure

If the page or content is long or complex, use headings to help separate the content into sections.

Choose headings (H2, H3, H4, H5) based on the structure of the content, not the visual style applied to each heading. This is helpful for users who are able to see the headings, as it allows them to scan the page. Users who use a screen reader utilize headings to scan the page as well, by having the screen reader read only headings of a specific level. Headings can be beneficial for SEO and featured search results as well. Learn more about using headings in the CMS

If a page has sections of content and uses, for example, just bolded text to identify a section, those using a screen reader have to read the whole page to find the information they need. Instead, when proper headings are used, they can scan via the screen reader for the section they need, and drill even further depending on how many heading levels are used. 

Example:

Heading 2

Heading 3

Heading 4

Heading 5

Heading 4

Heading 3

Sometimes it is helpful to think of the headings as the sections of an outline:

  • Heading 2
    • Heading 3
      • Heading 4
        • Heading 5
      • Heading 4
    • Heading 3


Alt Text

If you are including an image or graphic of any kind on your page, document, or any other web content, you need to ensure that it is accessible to all users. While images and graphics can make the content more visually appealing or convey information, it is important to remember that not all users will experience that portion of your content the same way.

Learn more about using images and alt text.

 

 

Tables

Only user tables for content that can't be expressed any other way (i.e. in written text). Do not use a table for layout purposes.

When creating and using tables in the CMS, the best approach is to keep them simple and straightforward. The more complex a table is, the harder it will be to make understandable using a screen reader. 

Follow these directions when creating tables in the CMS. By default, a new table in the CMS will not have designated headers. 

If you have questions or issues creating tables, reach out to the Digital Team for assistance in ensuring the table is accessible. 

Incorrect (Default) Table Example

Fake Header 1 Fake Header 2
Amount 100 200

Correct Table Example

Sample Table Caption
Proper Header 1 Proper Header 2
Amount 100 200


When creating links to other web pages or files, make the link text (the text to which the link is applied) descriptive so that users of screen readers know what is on the other side of the link. For example:

  • Click here.
    • Not helpful; this gives no information about the link.
  • Click here for the report.
    • Slightly improved; includes that it is a report.
  • Download the complete 2025 report (PDF).
    • Better; includes the fact that it is a download, the file name, and the file type.


Color Contrast

WCAG 2.1 guidelines require a color contrast of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) to meet Level AA.  What does that mean? Your text font color must have enough contrast with the background color to be visible to those with some visual impairments. 

The fonts and colors in the CMS meet these guidelines, from default text to highlight boxes, so you don't have to worry about that when creating content in the CMS. However, if you override the styles via the code, that will not be guaranteed and will likely be removed during edit or review. 

WebAIM has a helpful tool, the , that you can use to check colors for other projects, too.