The Red theme incorporates built-in accessibility features wherever possible. For instance, page templates are designed to follow guidelines for structured content, ensuring headers are correctly nested in a hierarchy. Additionally, all images must include alt text to support users who rely on screen readers to navigate your website.

However, despite these built-in structures, site managers must correctly utilize these features to fully meet accessibility requirements. Please review each section below to ensure your site complies with accessibility standards.

Properly nested headers

Use headings to begin sections and use them in the correct hierarchy order to represent the structure of the content on the page.

  • Page Titles are set in the theme as H1. It is an accessibility violation to have more than one H1 on a page.
  • All Red components have a mandatory title field that is set as a Heading 2. Even if you choose to visually hide the title, the setting ensures the content meets the requirements for structured headings. Hidden titles are read by screen reader technology. See more information below on best practices for title text.
  • The rich text editor allows you to select H3 through H6 tags for your subheads within the content. To comply with accessibility, the use of those headers must follow rules for rank and structure.
    • In text blocks, headings of an equal or higher rank indicate a new section. Headings of a lower rank are used for subsections in a text block.
    • Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section. Use header tags for structure, not for styling.

Title Fields

As explained above, title fields provide an organized, hierarchical structure to your content. In addition to structure, even when hidden, the text provides cues to screen readers about the subject and scope of the content block.

Titles should be descriptive and unique. If you only enter “Title” in each title field, for example, the user will hear “title, title, title,” etc. as they tab through your content blocks. They will have no context to know if that is information they want to read.

Link Text

Text links in your content should not use a URL as the link text. It should have meaningful text rather than using “click here” or “read more” Instead, use the page title or a description of the page where the link leads.

Link text that is in context with the content where it is pointing gives all users better information about the purpose of the link.

Users interact with links in various ways, including:

  • Screen reader users can generate a list of links and navigate them alphabetically. Redundant or ambiguous link text such as “More” is meaningless in this context.
  • Users of speech recognition technology can select a link with a voice command like “click” followed by the link text. Therefore it is also helpful to use unique link text that is short and easy to say.
  • Users who don’t need assistive technology often skim and scan your content, a link that gives more context can prompt them to click through to the content they seek.
  • Meaningful link text may often align with key terms or phrases used by people searching for your site. Using them for link text may improve your SEO.

Image Alt Text

Alternative text (alt text) should describe the image for visually impaired users who visit your website and for those whose browsers block images, or when connectivity issues prevent images from loading. The text should give a brief description of the image according to its purpose and context. Do not use phrases like “image of,” “picture of,” or “screenshot of” in your alt text.

In addition, if you use images that have text in the image itself, that text is no longer read like text by browsers or screen readers; it is seen as an image. That text should be included in the alt text, a caption, or other text near the image. Any information that is conveyed in text in an image must also be available to those who don’t see the image.

 

QR Codes

In general, avoid using QR codes on websites since the user can use hyperlinks instead. If you do use a QR code, the alt text should include the direct link, explain what the code links to and its purpose. 

Multimedia Captions and Transcripts

Video

Make sure that your videos have captions included. YouTube has an option for automatically creating captions, however, you should download the captions and review and edit for accuracy. You can then upload the edited file to the video.

Audio

Provide synchronized captions for multimedia containing speech.

Tableau Embeds

All Tableau content must be made accessible before embedding.

Non-web documents

In addition to your web pages, other documents in formats such as PDF, Word, Excel or other similar document types, are also required to meet accessibility standards.

If your document is not expressly intended to be printed on paper, consider creating that content on a page in your site. Please note that embedded content from non-university sources, such as Tableau, are also subject to WCAG accessibility standards. To evaluate embedded content accessibility, please refer to the vendor or content source’s documentation.