Skip to Main Content

Readability

Readable text involves many different components. Some general principles:

  1. Provide definitions for any unusual words, phrases, idioms, and abbreviations.
  2. Use the clearest and simplest language possible, or provide simplified versions.

Identifying Languages

The WAI (Web Accessibility Initiative) recommends the following:

  1. Identify the primary language of a web page, such as Arabic, Dutch, or Korean.
  2. Identify the language of text passages, phrases, or other parts of a web page.

Your content management system should do the first. You can easily check for this on a given page by using WAVE. WAVE will provide an error if the page language is missing or invalid.

The second is a bit more difficult. Your content management system may provide a way to do this, or it may allow you to edit the HTML directly. If you are editing the HTML, you can wrap the passage with the span tag and give the tag the lang (language) attribute. You may also want to set the dir (direction) attribute, particularly if the language reads from right to left. You can use this HTML Language Code Reference to look up the appropriate value for the lang attribute. The dir attribute can take either "LTR" (left to right) or "RTL" (right to left).

Example: <span lang="en" dir="LTR">This sentence is written in English.</span>

Sensory Characteristics

WCAG (Web Content Accessibility Guidelines) 2.1 (1.3.3) requires that:

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound

  • Bad example: Click the blue button at the top right of the page. (Uses color and visual location)
  • Good example: Click the Login button. (Avoids sensory characteristics)
  • Good example: Click the blue Login button at the top right of the page. (Uses sensory characteristics and the actual button name)

Abbreviations and Capital Letters

How do screen readers interact with content in all capital letters? Unfortunately, there is not one answer to this. The screen reader may read a given word normally or letter by letter. While we cannot predict this behavior perfectly, we do have some options to make sure our content is as readable as possible.

Abbreviations

For common acronyms or acronyms that should be pronounced as words, you should be fine to simply use all caps. Here are three strategies from Penn State for dealing with acronyms that may otherwise cause problems.

  1. Using periods between letters (e.g. P.S.U. versus PSU) in an acronym may help screen readers parse the acronym.
  2. When writing alt (alternative text) tags with acronyms, add spaces between characters (e.g. alt="P S U").
  3. For unusual abbreviations and acronyms, supply a key with their meaning (e.g. "ITS (Information Technology Services")).

Capital Letters

Screen readers may behave unpredictably with non-abbreviation words that are in all capital letters. In addition, large sections of text in all caps may be hard for people to read, especially those with cognitive concerns such as Dyslexia. Some people may suggest using CSS (Cascading Style Sheets) with the text-transform: uppercase property to force all caps visually, but this text will still be hard to read and may still be read letter by letter by some screen readers. Therefore:

  1. Do not use all capital letters to emphasize words.
  2. Avoid themes (on WordPress and other sites) that change certain sections of text to all capital letters. (A common issue may be a theme changing button text to uppercase.)

Punctuation and ASCII Characters

WCAG 2.1 considers ASCII art, emoticons, and leetspeak to be non-text content. This means that if you use these, you will need to include some kind of text alternative.

Punctuation can also be tricky. Some screen readers will read out punctuation symbols, while others may simply pause briefly when encountering them. This behavior may be set by the individual user. If certain punctuation is necessary for understanding your content, try replacing it with text, adding a text alternative, or finding a different way to phrase your content.

Equations

In the past, equations have often been included as images, due to the difficulty of styling equations digitally. Current resources now make it feasible to provide nicely styled and accessible equations as text.

  1. Math ML is a markup language designed to display equations. MathJax is set of open-source JavaScript libraries which enable correct display of MathML content in multiple browsers. Use MathML and MathJax to create accessible equations on the web.
  2. Images of equations can potentially be made accessible with appropriate alt text. You may want to use MathSpeak if you are writing equation alt text.
  3. LaTeX is a much more familiar math markup language. While LaTeX equations are not screen reader accessible by default, it is not difficult to convert LaTeX to MathML. In fact, unlike LaTeX, MathML is not intended to be written by hand. You will typically want to use an equation editor or to covert LaTeX code when creating MathML equations.
  4. If you do not need to create complex equations, but only need a few special symbols, make sure screen reader users will have the necessary symbol files.

Resources