The Red theme has built-in accessibility requirements where possible. For example, page templates are built to adhere to rules about structured content with headers correctly nested in a hierarchy and all images must have alt text for those who use screen readers to access your website.
Even with the built-in structures, site managers must use these functions correctly to complete the accessibility requirements. Review each section below to ensure that your site meets accessibility requirements.
Properly Nested Headers
Heading link
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.
Title Fields
Heading link
As explained above, the 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 should read.
Link Text
Heading link
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
Heading link
Alt text should describe the image for visually impaired users who visit your website and for those whose browsers block images. The text should give a brief description of the image. 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.
Multimedia Captions and Transcripts
Heading link
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
Heading link
All Tableau content must be made accessible before embedding.
Non-web documents
Heading link
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.