Accessibility Guidelines: Headings and Labels
- Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text (WCAG 1.3.1; A).
- When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined (WCAG 1.3.2; A).
- Headings and labels describe topic or purpose (WCAG 2.4.6; AA)
Write Clearly and Simply
Unless one is a genius, it is best to aim at being intelligible.
— Anthony Hope Hawkins
Not everyone reads or understands text content at the same level. Reading disorders, memory disorders, attention deficit disorders, and other conditions can compromise a person's ability to understand text. The guidelines below, adapted from WebAIM's Writing Clearly and Simply, will improve readability for many, but not for all.
- Organize your ideas into a logical outline.
- Introduce, explain, and summarize.
- Stay on point.
- Make it interesting.
- Write for your audience.
- Assume that your readers are intelligent, but do not assume that they know the subject matter as well as you.
- Write cohesive paragraphs constructed around a single major idea.
- Avoid slang and jargon.
- Use familiar words and combinations of words.
Headings
Web content should be properly structured using headings (H1, H2, H3, H4, H5, and H6). This creates a navigable table of contents for people using assistive technology. Headings also create a visual hierarchy that helps all users quickly scan the text and find the information they are looking for. Using headings solely for formatting purposes is bad for accessibility (and findability!) and should be avoided.
- Don't use Heading 1 (
<h1>tag in HTML) at all as this should only be used once, for the page title. - LibGuides box titles use Heading 2, so start with Heading 3 (
<h3>tag in HTML) in the rich text editor. - Do not use text formatting — such as font size or bold — to give the appearance of headings. Use the Format drop-down in the rich text editor to assign headings.
Lists
To maximize readability, reduce the length and complexity of the text content of your LibGuides. Keep paragraph topics focused and use bulleted or numbered lists to convey information in a more digestible way.
- Maintain a logical order for the content of sentences, paragraphs, and sections
- Use active voice unless there is a specific reason passive voice is needed
- Avoid jargon, slang, or other specialized words that may be unclear
- Replace complex words or phrases with more common words if doing so does not change the meaning of the sentence
When creating a bulleted or numbered list, make sure to use the formatting options in LibGuides to create the list rather than using shapes or other symbols and indenting using the space bar. Use numbered lists for content where the order matters (e.g., series of steps) and bulleted lists where the order does not matter.
Formatting Mistakes to Avoid
- Do not mix different font types and sizes. Stick to the default font.
- Do not use underlines for emphasis. Users will think an underline is a hyperlink.
- Do not overuse bold, color, italics, or ALL CAPITAL LETTERS! (And don't use blue text; it'll look like a link!)
- Do not use a table for formatting content.
- Do not justify text (aligning both the left and right margins). The spaces between words can create "rivers of white" running down the page that make the text difficult to read for some people.
- Do not copy text from Word or other applications directly into the rich text field. In Chrome, Edge, or Firefox, use the following shortcuts to paste text without formatting:
- Windows: Control + Shift + v
- Mac: Command(⌘) + Shift + v
- Safari on Mac: Command(⌘) + Option + Shift + v
Tables
Tables should be set up to help screen readers identify key elements. A table header identifies the column headings and a caption functions as the table title.
When working on tables in Rich Text/HTML editor:
- Identify table headers (first column, first row, or both)
- Give the table a caption (this will appear above the table)
- Choose a class to provide formatting (e.g. "table table-bordered" or "table table-striped")
- Do not use the Legacy Properties tab (they are deprecated, i.e., no longer acceptable HTML)
| Name | Age | Birthday |
|---|---|---|
| Cordelia | 5 | January 4 |
| Goneril | 8 | April 15 |
| Regan | 11 | December 3 |
More Resources
-
WebAIM: HeadingsDiscusses the importance of headings as well as common problems that may be encountered
-
WebAIM: ListsTypes of lists and their use cases
-
WebAIM: Creating Accessible TablesDiscusses data table organization as well as their structural formatting for use by screen readers
