Accessible Organization & Layout

The OpenLab is committed to accessibility, and WordPress and Buddypress, the software that OpenLab is built on, continue to improve accessibility.  This means that the OpenLab as a whole is accessible, and that the themes, plugins, and widgets you use as building blocks for your site are accessible, or include primarily accessible options. The rest of this section will cover how to ensure that your site and the materials you include on it, are accessible.

Use headings to organize information

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

Tips

  • Use specific Heading styles rather than bold or italics to indicate a heading on your OpenLab site, in Microsoft Word, or another word processing software.
    • 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.

The video below, How Headings Help Screen Reader Users, by North Carolina State University, demonstrates why headings are important for people using screen readers to access the web as well as for sighted users.

Break text and media in to smaller sections

Breaking text and media in smaller sections (or “chunks”) makes scanning easier for users and can improve their ability to comprehend and remember information. Using headings can help you achieve smaller, digestible sections.

A classic example of parsing things into smaller sections is phone numbers. It is much easier to remember 718-260-5550 than 7182605550. Similarly, it is easier to read and comprehend information on a website or document that is broken into sections with paragraphs, line breaks, and bullet points than a single large block of text.

Tips

  • Keep related items close together and aligned.
  • Use bullet points and numbered lists where appropriate for organization and ease of scanning.
  • White space and line breaks separates paragraphs and sections from eachother.
  • A horizontal line helps break up long sections of text.
  • Avoid text lines that are wide; they 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.

Guidelines for readability using plain language:

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.

Test the readability of your text using the Hemingway app.

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. Avoid this: Get the reading for our next class meeting here.
  • Avoid using URLs as link text. Avoid this: 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. Do this: 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 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. These can be more difficult to read for everyone, especially people with visual impairments.
  • Avoid using colors that create a low contrast. Light color fonts on a white background will make the text illegible.
  • 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. Underlining can interfere with perceiving lower case letters and can be confused with links.
    • Avoid all caps, which connotes yelling on the web, can be difficult to read, and can sometimes cause screen readers to read text as an acronym.

Putting it all Together

The example below illustrates good use of headings, breaking up text into shorter “chunks” and bulleted lists, and effective use of legible fonts and colors.

Example of layout elements

Additional Resources

Sources

Information on this page is adapted from: