Web Accessibility Basics

CMS‑Specific Accessibility Guidelines

This training focuses on how WCAG 2.1 AA applies to CMS‑editable content by being Perceivable, Operable, Understandable, and Robust (the POUR framework). Use these practices whenever you edit or create content in the CMS.

Images & Alt Text

In image description fields, briefly detail the image as if describing it over the phone. If the image contains text information, such as a date and location for an event, that information MUST be included in the description text.

When a stock image does not add meaningful context to the page, it is appropriate to mark it as decorative instead of providing a description. If the image adds context to the rest of the page content, it must contain descriptive text.

Use proper alt text for images! Writing good alt text for an image starts with the following question: “How would you describe the image to someone over the phone?” Visitors should know what context your images add to the page content.

• Add descriptive alt text that explains the purpose of the image.
• Mark purely decorative images using the decorative checkbox.
• Include any written text appearing inside the image.

Videos & Captions

Videos and podcasts are required to have captions to ensure they're accessible to all people. Learn more about Video & Audio Accessibility Standards.

• All videos must have accurate captions.
• Audio‑only content must include transcripts.

Colors & Contrast

Use colors carefully and stay within the official Web Palette. Pay attention to contrast ratio of text and background colors, using a contrast-checking tool like Vispero when necessary.

• Ensure sufficient contrast between text and background.
• Avoid using color alone to convey meaning.

Keyboard Navigation

Ensure all content is keyboard accessible by tabbing through your page content and navigating without a mouse. Do you see a visual indicator of where your cursor is at? This is one of the most important aspects of web accessibility.

• Test that all interactive elements can be accessed by keyboard only (Tab, Shift+Tab, Enter, Space).
• Ensure focus indicators are visible.

Links

Links need unique and descriptive names. Avoid putting too many links on one page and avoid using entire URLs as link text. Avoid using entire URLs as a link, unless it's a branded URL (i.e. MyID.usu.edu). Instead, type out a meaningful direction and link the text with the appropriate URL. For instance, Accessibility at USU makes more sense than https://www.usu.edu/accessibility/index.html, even though they're the same link.

Don't use text such as "click here" or "read more" for links. Not only are they an accessibility problem, but they give no direction to someone using a screen reader. Many people who use screen readers scan page content by keywords and links, as do most users without disabilities. If the screen reader reads only the links on a page with "click here" link text instead of keywords and titles, the user gathers no information or direction from those links. The website owner is essentially forcing those with visual disabilities to read the entire page word-for-word to gain context from the material.

Avoid linking entire sentences, rather than keywords or phrases. This may require rewriting a paragraph or two, but short, concise links hold more emphasis than entire linked sentences and will draw more attention. Link text should be brief, succinct, with clear actions or directions. (Refer to any Wikipedia article for a great example!)

• Use short, descriptive link text.
• Avoid “click here,” “read more,” or full URLs as links.
• Link only the relevant phrase, not full sentences.

Headings & Structure

Empty headings, or improperly nested headings are an accessibility issue and should be corrected. Improperly nested headings should be adjusted to reflect the hierarchy of the page content (i.e. A page with an H3 should have an H2 before that, and an H1 before that). There should only be one H1 heading per page. Use components or snippets to style non-heading content to draw user attention without breaking heading structure.

• Use proper heading order (H1 → H2 → H3).
• Only one H1 per page.
• Use components or snippets for styling.
• Remove empty headings.

Lists

Using lists correctly helps screen readers convey structure and meaning. Improperly formatted or visually faked lists can confuse users and create accessibility issues. Lists should communicate structure, not be used for indentation, spacing, or column‑like formatting. Avoid copy-pasting lists from word processors like Google Docs or Microsoft Word.

Use ordered lists when the sequence or steps matter (i.e. instructions, processes, or rankings).

1. Each step should represent one action or idea.
2. Don’t skip numbers manually; let the CMS handle numbering.
3. Avoid using numbers in paragraph text to mimic a list.

Use unordered lists when order does not matter (i.e. item groups, features, or examples).

• Keep items parallel in structure (all nouns, all phrases, all sentences).
• Keep lists short and scannable when possible.
• Do not use hyphens or asterisks to fake bullets, use CMS list tools.

Tables

Use tables for data, not layout. Keep tables simple and use appropriate attributes for columns and rows. If you have questions about tables, contact itweb@usu.edu.

• Use tables only for data, not layout.
• Include clear column/row headers.