Skip to main content

LIBRARY

Waterloo LibGuides for Guide Authors: 1a. Formatting for accessibility & usability

Defines the University of Waterloo Library best practices, guidelines, and useful How-Tos for guide authors.

Formatting & Usability

Text structure and text appearance can help ensure a Web site communicates effectively with users.

To draw users into the text and support scannability, use well-documented tricks:

  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs

Text Structure

Use Headings, in a correct structure - this helps users navigate the text and is crucial to those using a screen reader.

  • The Page Title is a Heading 1 (H1).
  • The Content Box Title is a Heading 2 (H2).
  • Use Heading 3 (H3) and Heading 4 (H4) to structure your content.
    • Heading 4 is a sub-heading of a Heading 3.

Heading 3

Text under Heading 3

Heading 4 - Subheading of Heading 3

Text under Heading 4 - related to a sub-section of previous text section

Heading 3 - new section

Text under Heading 3

Commonly used headings should be formatted consistently - using the drop-down option to format your headings means that they will be structured properly and will have the right look and feel.

Attention-attracting features should only be used when appropriate.

Even though it is important to ensure visual consistency, steps should be taken to emphasize important text.

Text Appearance

It is preferable to allow the CSS to format the font type, size, and colour.

Only change text appearance when there is a real need for something different. Reasons to keep to CSS: a) consistency b) when changes are made in the CSS, they may not work properly in your guide.

Font Types

  • Use familiar, sans-serif fonts
  • Don't reduce the font size

Font Formatting

  • Do use bold carefully - use it for emphasis - too much and it distracts
  • Don't underline text - underlining should be used for links only (set by our CSS)
  • Use italics sparingly, if at all - Italicizing text reduces readability
  • Do not Justify text
  • Use Title Case for Content Box titles

Font Colours

  • Use text on plain, high-contrast backgrounds
  • Don't use colours as the sole method to convey content or to distinguish it
  • Optimize font colour use for readability and accessibility
    • Ensure proper contrast between the font and the background
    • Avoid yellows and oranges

Test for contrast using Accessibility Tools!

Examples - What To Do

Text Structure

Use text headings to ensure that your users can follow the intended flow. Proper headings formatting enhances readability greatly. It also allows the print version of the document to flow more smoothly.

Text Structure and Screen Readers

Proper structured headers are crucial for users viewing your content with a screen reader. The screen reader uses the headings to navigate the document and structure its output to the users. For users with limited vision, this is the only way to establish a relationship between content parts.

Text Appearance

Text appearance is crucial for readability. Not only do users expect a polished, professional look, but those who have reading difficulties and cognitive disabilities may not be able to access your content if the appearance is not thought of carefully.

Important Notice - Please Read

Colour should not be used be the sole means to convey the importance of some content. Screen readers will use the "<strong>" tag to highlight the content to their users.

If using a coloured background, using proper contrast with the text is key:

White Text on Red - Example of Proper Contrast

 Red Text on Cream Background - Example of Proper Contrast

Examples - What NOT To Do

Text Structure

Use text headings to ensure that your users can follow the intended flow. Improper headings structure hinders usability and accessibility.

Text Structure and Screen Readers

Proper structured headers are crucial for users viewing your content with a screen reader. The screen reader will read these headings in this order:

  • Text Structure and Screen Readers
    • Text Appearance
      • Text Structure

Text Appearance

Text appearance is crucial for readability. Not only do users expect a polished, professional look, but those who have reading difficulties and cognitive disabilities may not be able to access your content if the appearance is not thought of carefully.

Important Notice - Please Read

Colour should not be used be the sole means to convey the importance of some content. Please click on the red text, not the purple text to win.

Colour should be contrasted well. Oranges and yellows are always most difficult to read.

  • Improper Contrast - Come join us for the event!
  • Difficult to read & Improper Contrast - Tomorrow is Library Day!
  • Difficult to read - Exam sessions start tomorrow. Make sure to come join us!

If using a colour background, not ensuring proper contrast will be an issue:

Orange Text on Blue Background - Example of improper contrast

Dark Blue Text on Blue Background - Example of Improper Contrast