Headings

Use properly formatted headings to structure page content.

Rationale

• • Help to organize content, making it easier for everyone to read
  • Serve as primary way for people using screen reading software to navigate a page of text

Lists

Use ordered/unordered lists to group related Items.

Rationale

• • Conveys content in a logical organization to all users
  • Provides useful information to assistive technology users about the number of items listed in the main and sub-lists
  • Benefits mobile users as information is presented as it is meant to be presented

Tables

Use tables for tabular data, and provide column and/or row headers.

Rationale

• • Screen readers linearize content and read tables from left to right, top to bottom, one cell at a time.
  • If cells are split or merged, it can throw the reading order off and make the table difficult to comprehend by users who are blind and using a screen reader to navigate.

Images

Use alt text for informative images. This provides a description of the image that is read to those using screen readers.

Rationale

• • Describes what images are displayed
  • Conveys what the image is communicating so those using screen readers do not miss out on contextual information

Links

Use meaningful text for links. Type out text that clearly describes the link’s destination (e.g., “CITL Best Practices for Creating Accessible Word Documents”). Avoid text like “Click here” or “Visit.” The text you use should make it clear where the user will be taken when they click that link, even if that linked text is taken out of context.

Rationale

• • Links such as "Click here" or "Visit" do not provide context for those using screen readers. This is especially confusing if a screen reader user is trying to jump from linked to linked text to find a needed link.
  • Providing a full URL in your text means a screen reader will narrate it character by character.

Keyboard

Check keyboard access. When possible, ensure the material can be navigated without a mouse (i.e., only using a keyboard).

Rationale

• • Users with visual and mobility impairments rely on the keyboard, rather than a mouse, to access and navigate online content. If content isn't keyboard accessible, it restricts who can learn from that content.

Color

Use sufficient color contrast. To check color contrast, use the free Color Contrast Analyzer from TPGI, an accessibility solutions provider. Use patterns and shapes to convey meaning rather than relying on solely color (e.g. in graphs and charts).

Rationale

• • Without sufficient color contrast between font and background, people who are color-blind and low-vision may have difficulty viewing the content.
  • Using color alone to convey meaning (e.g., items in red indicate a deficit) excludes color blind or blind users.

Video/Audio

Provide captioning for video and text transcripts for audio. When possible, enable settings that allow attendees to turn on closed captioning for their personal device.

Rationale

• • Captions are essential for those who are deaf and hard of hearing.
  • They also benefit non-native speakers, those unfamiliar with the vocabulary, and viewers with some learning disabilities or in a noisy environment.

Math

Write math and science equations accessibly. For web pages, use an equation editor that outputs MathML, a markup language that allows equations to be stored as structured text that is compatible with many assistive technologies. For more information on MathML, you can visit the the W3C MathML website developed by Web standards developer World Wide Web Consortium (W3C).

Rationale

• • Those who use screen readers can navigate and review parts of an equation, such as the top portion of a complex fraction.

Reference

Article information provided from and based on WebAIM Principles.