Accessibility Basics

Text Formatting

Headers are an important organization tool; they help readers better understand the main points of each section and allow them to skim the page.

From an accessibility perspective, headings are an absolute necessity so students using screen readers can navigate through a Content page. When headings are used correctly, they allow individuals to move through the information based on heading topic rather than line-by-line. The use of headings is also a great way to 'chunk' material into digestible pieces for students and prevents cognitive overload.

w3.org Heading Example

Heading Tips

• Use headings that are descriptive and concise.
• Nesting or Semantic Structure; be sure your headings are in order.
• Don't overdo it: Not all paragraphs need a subheading. Only use headings if you have more than one point per heading level.
• Use headings to enhance, not replace: Headings (and subheadings) should supplement the substance of your content, not take the place of your topic sentences.
• Never create headings manually.*

*Manually creating headers with formatting features such as: font size, bold, and underline may look nice, but these formatting features don't have the HTML tags that screen readers need to identify them as headers (e.g. Underlined text denotes a hyperlink). Underlining your text may confuse sighted users, who will expect the text to then link them to another page.

Using Lists

• Never create lists manually.
• Always use the built-in list styles when creating a bulleted or numbered lists.

Using Hyperlinks

Properly formatted hyperlinks help students scan for important information and identify outside resources. When a screen reader identifies a hyperlink, it states 'link' so it is best to avoid using 'link' or 'link to' in your hyperlinked text.

Screen readers are also able to make a 'Links list' which allows users to listen to the list of available links on a page and navigate directly to a desired link rather than listening to the entire page, line-by-line. However, a 'Links List' is only helpful when link text is descriptive.

Tips for Hyperlinks

• Identify the purpose/function of the hyperlink as part of the link name
• Be as descriptively possible without being overly long. Screen reader users must listen to full link before moving to the next one on the list.
• Integrate the link into your sentence-- in doing so, sighted students will see the link and screen readers will identify it.

Color Contrast

Color contrast-- the difference in color between the background and the text/image (foreground). Everyone suffers when color contrast is not high; but especially those with low-vision or who are color blind.

Color and images add visual appeal to your content. However, in order for color to work it must be perceivable and should not interfere with learning. Color blindness is a common condition--a reduced ability to distinguish between certain colors that primarily affects males.

Be sure to check the contrast of any custom colors you use throughout your course via a free online color contrast tool. Some recommended color contrast tools are:

• ACART Communications: Contrast Checker
• Colour Contrast Analyser

Avoid using color as the sole means of providing information or emphasis. Instead consider using both shape and color.

Helpful References

Color Deficient Vision (Color Blindness) Examples

Color Contrast Examples

Alternative Text

Alt text is word or phrase which provides a clear text alternative of the image for screen reader users.

Giving images alt-text allows screen readers to explain the image to people with sight challenges and it can also be useful when an image doesn't load correctly.

Note: not all images need alt text; decorative images null alt-text [alt=""]