Accessibility Toolkit for Open Educational Resources (OER): Text/Typographical Layout

General Information:

When you create a web page or document which has well organized content it helps users to orient themselves and to navigate effectively.

Why is layout important?

• A site or document which is well-structured is easier to understand and navigate.
• Everyone can benefit from a site which is well-structured.
• A well laid out page helps people with visual impairments, including low vision, orient themselves on the page and understand content.
• Keyboard users can browse pages and their sections more efficiently.
• People with cognitive and learning disabilities can more easily find and prioritize content on a well laid out page.
• A well laid out page helps users perceive, operate and understand, POUR principles.

How to create good layout

• Use headings to separate sections.
• Use lists.
• Don’t use tables for layout.
• Don’t only use visual cues (such as color) to show the layout.

Specific Tips

1. Text Alignment

• For English and other left-top-right languages, the best practice is to align text on the left.
• Some circumstance may allow for other alignment: Center-aligned headings or a right-aligned date on a document

2. Margins, Padding, and White Space

• Documents with "white space" around blocks text are easier to read than documents in which the margins of the text are close to the edge of the viewing area.
• Documents with limited white space appear more cluttered and are difficult for some readers with reading disabilities.
• Paragraphs should be easily distinguishable from each other.
• In Print materials indentation is sometimes used to distinguish paragraphs, instead of white space, that is ok for print. 
• In Online materials, white space is needed to distinguish paragraphs because without it users can get lost on a long scrolling page.

3. Line Length

• While an optimal line length value may vary based on the content, font face, etc., in general, fewer than around 50 or more than around 120 characters per line will likely introduce difficulty.
• One way to address line length is to add left and right margins that increase the white space on the sides.
• Another way is to limit the width of the text column.

4. Text Decorations

• Best practice is to only use underline for hyperlinks.
• Using underlined text for non-link purposes on the web will likely confuse some users.

5. Delete <del>, strike-through, and insert <ins>

• Words or characters with strike-through effects visually appear crossed out or canceled, unfortunately screen readers do not notify users of this fact.
• Likewise, screen readers do not notify users when the <ins> element (insert) tag is used.
• For documents (legal for example) where it is important to use strike-through and follow-along as changes are made, see the WebAim text decoration section for workaround suggestions.

6. Blink and marquee

• People with attention deficits or cognitive disabilities could become distracted.
• People with limited fine motor abilities may not be able to click on scrolling links accurately.

7. Fonts

• It is generally best to use standard fonts that are available on the end users device.
• Using too many font faces can create a confusing visual layout.
• For print materials:
  • Serif fonts such as Times and Times New Roman are generally regarded as the most readable font family for printed text.
• For web-based content:
  • There is conflicting information about which font is the best to use for web-based content.
  • Conventional wisdom is sans-serif fonts are more suited to electronic formats.
  • Fonts such as Verdana, Tahoma, Trebuchet MS, and Georgia, were developed specifically for use in electronic media, and are now quite commonly used.
• For more detailed information on fonts, look at WebAIM's article on Fonts.

These tips are based on WebAim's article "Text/Typographical Layout". WebAIM is a non-profit organization based at the Center for Persons with Disabilities at Utah State University.

8. Blank Spaces

• When large chunks of white space is needed between sections of a document don't just use the <ENTER> key.
• Screen readers will read aloud each and every blank space.
• If the white space is needed between pages then use Insert - Page Break.
• If large white space is needed between two specific paragraphs, then use "Add Space Before and After a Paragraph" in Home - Paragraph to set that specific space between those individual paragraphs.
  • This is especially important when doing cover pages of theses or capstones, which require large chucks of white space.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a word document which has inaccessible blank spaces with one with accessible blank spaces.