Skip to search Skip to main content

Does the <body> rule the mind or does the mind rule the <body>?

Accessible Content – Part 3: Structuring the Page with semantic Elements

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!

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).
  • Definition 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.

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *