When your name’s with the best
Will my name be on your guest list?Morrissey, “Lucky Lisp”
Some contents require special structure and preparation. These should then also be packaged in the HTML elements provided for this purpose. Every text editor of a modern content management system or blog software helps you to do this without having to understand the exact syntax.
Links
- Links to content in the current page (so-called skip links or anchors): If the content on a page is more extensive, it makes sense to allow users to skip it with a link to a subheading. Especially for users of screen readers, it can be very tedious to quickly capture large amounts of content. Best known use cases include an introductory table of contents, footnotes or a glossary at the bottom of the page.
- Links to content on other pages or the Internet. Links are the essential tool of the Internet!
See the Pen Example for Links used as on Site Navigation (Table of Contents) by Accessabilly (@accessabilly) on CodePen
Lists
- Unordered lists: for visual grouping mostly. Screen reader users have the possibility to experience how many list items are in the respective list.
- Ordered lists: if the number and hierarchy is also visually important and it should be made clear to users of screen readers where they are in the list (e.g. for very long lists).
- Description lists: e.g. FAQ (frequently asked questions) or similar. However, their support is limited in screen readers and most text editors don’t offer them.
See the Pen Example for different Usages of Lists in HTML by Accessabilly (@accessabilly) on CodePen
Tables
- Use table headings (caption), at best visibly: short, concise summary of what the tabular contents are about.
- Use semantically correct headers
- Format each cell as a header cell. These make a reference to the column for each cell.
- Content should be extra short and concise here, as it repeats itself with each associated column when read aloud in screen readers.
- Format the row with headings as header row.
- Heading cells can also be placed left or right aligned, depending on language context (Arabic, Hebrew).
- Define a scope for each header cell. This determines whether the cell is the heading for the column or the rows.
- Avoid merged table cells because the reference is not unique.
- Use tables only if it is semantically required. Better use lists, if possible. Tables are very “wordy” for screen readers, since the headers are always read out per cell.
See the Pen Example for different Usages of Tables in HTML by Accessabilly (@accessabilly) on CodePen
Quotes
- The explicit naming of the sources creates confidence in the contents.
- Best with additional links to the sources, if online sources.
- Blockquotes for extended quotations, quotes for shorter inline quotations. Most text editors support blockquotes only though.
See the Pen Example for different Usages of Quotes in HTML by Accessabilly (@accessabilly) on CodePen
Content Highlighting
Maybe this will disappoint some of you: Screen readers do not read your fancy font styles! This means, for example, that blind people cannot recognize any special importance here. The following font styles have no semantic significance for reading aloud programs:
- Font and background color
- Bold
- Italic
- Underline
- Strikethrough
These should only be used to create visual interruptions. If the meaning is to be emphasized more strongly, then this should also be combined in the text. Here, introductory words separated by colons should emphasize the sentence. At the end of the sentence, punctuation marks such as exclamation marks or question marks should be used, since these are read aloud by screen readers with special emphasis.
Examples
“Caution: Do not rub fingers in your eyes after cutting a Habanero chili!”
“Note: Keep to the right after the intersection so you don’t miss the exit later!”
Bad Practice
- Underlining text due to likelihood of confusion with links.
- Italic text because of poor readability. The distinctness of the letters decreases.
- Creating your own custom lists with special characters instead of bullet points. These may even be read aloud and the additional semantic information is lost (e.g. how many list entries).
- Misuse semantic elements for the wrong purpose, e.g. tables to display content side by side. This makes the content difficult for screen readers to grasp.
- Manipulating layout: line breaks (
<br />) for more white space, as these are read in screen readers as pauses.
Continue reading my series on producing accessible content: part 4 – meaningful link texts or get back to the series overview.