Accessible Organization and Layout

Use headings to organize information

Using headings to create a logical structure allows people using screen readers to navigate among the different sections and sighted readers to scan a page and better understand where they should focus their attention.

Tips

  • Use specific Heading styles rather than bold or italics to indicate a heading on your OpenLab site, or in Microsoft Word or Google docs.
    • The Heading 1 style should only be used once per page. Don’t use Heading 2 styles too often. They should be reserved just for sub-section titles.
  • Find out more about how to choose heading styles in the OpenLab Help resource Making your Work Accessible and the University of Minnesota’s accessibility resource page on Headings.

Chunk text and media

Presenting text and media in chunks makes scanning easier for users and can improve their ability to comprehend and remember information.

Tips

  • Keep related items close together and aligned.
  • White space and line breaks will separate paragraphs and sections from another.
  • A horizontal line can help break up long sections of text.
  • Use bullet points and numbered lists where appropriate for organization and ease of scanning.
  • Wide lines of text are more difficult to read. Try for a width around 50-75 characters.

Improve Readability and Legibility

Readability refers to how easy it is for people to read text. Legibility is a measure of how the fonts, styles, and colors you use affect people’s ease of reading. If readers can’t understand or remember the information you are presenting, your material is not accessible.

Use clear, plain language

Plain language is text that the reader can understand the first time they read it. It improves comprehension for all users and allows for easy adaptation to other formats.

The main guidelines for readability using plain language are:

  • Use short sentences. Avoid complicated sentence structures, with many subordinate clauses and conjunctions that strain readers’ short-term memory.
  • Write in the active voice. “Publish your blog post by Wednesday” is more direct than “Blog posts must be published by Wednesday.”
  • Use familiar words and avoid jargon. While each academic discipline has its own specific vocabulary,  students and other potential readers are not (yet) members of your discipline, and may not be familiar with discipline-specific vocabulary.

You can test the readability of your text using the Hemingway app, or similar tool.

Make hyperlinks accessible

Related to readability, the text that you write for your hyperlinks should be meaningful, descriptive, and concise. Users should understand what to expect when they click on a link, or when it is read aloud by a screen reader, potentially as a list of all links on the page.

  • Avoid links that don’t make sense out of context. Get the reading for our next class meeting here.
  • Avoid using URLs as link text. Get the reading for our next class meeting: https://libguides.citytech.cuny.edu/OER/find
  • Embed the link in a sentence, with text that could stand alone. Please read the City Tech Library’s OER Resource Guide for our next class meeting.
  • Avoid using images as links; use text instead. Images used as links are difficult for screen readers and can be unclear for anyone using your site.
  • Links should open in the same tab. Having links open in a new tab or window takes control away from the people using your site, and means the browser’s “back” button will not work. It is confusing for someone using a screen reader, and can be can be confusing or disorienting to many people who rely on the browser’s “back” button for navigation. If it is necessary to use new tabs, it is best to warn users first.

Use legible fonts and colors

Use common, recognizable fonts that provide a strong contrast with the background color of the page.

  • Avoid italics and script fonts, which can be more difficult to read for everyone, and especially people with visual impairments.
  • Avoid using colors that create a low contrast; for example, light color fonts on a white background.
  • Use bold for emphasis.
    • Avoid red or green, which can be difficult to read and may not be seen by people with color blindness.
    • Avoid underlining, except for hyperlinks. It can interfere with lower case letters, and can also be confused with links.
    • Avoid all caps, which on the web can connote yelling, can be difficult to read, and can sometimes cause screen readers to read as an acronym.

Additional Resources

Sources

Information on this page is adapted from: