Storytelling in HTML: practical accessibility

For my work I build sites for blind people. They use a braille line and screen reader to read and navigate a website. During the development of those websites I learned that blind people read a web page differently than I do.

Blind web users read a page linearly and depend on headings and links to navigate.

This changed the way I build site dramatically, I changed from visual coding to story telling coding.

For the readability of this post I call users of screen readers and braille lines “SR-users”.

The class screen-reader-text

Every theme should have one, the CSS class screen-reader-text, to hide text from sight and to explain what’s going on to SR-users.

Jonathan Snook wrote an excellent article on how this works: hiding content for accessibility.

He calls the class .element-invisible, I suggest .screen-reader-text, because that’s what it’s called in WordPress bundle themes like Twenty Fourteen.

Note: the CSS property display: none also hides content from screen readers.

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect( 1px, 1px, 1px, 1px );
    clip-path: inset( 50% );
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

Tell a story with your HTML

Take for example this layout (in Dutch):

Example Distict group AmsterdamTranslation: Regiogroep means District group.

  • The H1 of this page is “Regiogroep Amsterdam”.
  • The menu on the right starts with a H2 widget title “Regiogroep Amsterdam” above a menu.
  • Then the first menu list item from the menu is “Regiogroep Amsterdam”.

A sighted person can see the H1 is above the content and the H2 is a heading for a menu and the last “Regiogroep Amsterdam” is the first (active) item of that menu.

While navigating on headings, a SR-user gets twice read out “Regiogroep Amsterdam” and if she chooses to enter the menu again “Regiogroep Amsterdam”.
One SR-user called me up and told me: what the *** do you mean with all that “Regiogroep Amsterdam” ?

So I changed the widget heading in:
<h2 class=”widgettitle”>
<span class=”screen-reader-text”>Sub menu of page </span>Regiogroep Amsterdam
</h2>

So now the SR-user knows what the different headings are about and the visual content is the same.

Short check list on HTML storytelling:

  • If you disable CSS and read the page from top to bottom, can you make sense of it?
  • Now disable the images. Still a logical story you’re telling?
  • SR-users can jump from heading to heading or link to link to access content, do they miss important content this way or get confused by the order of headings?

Theoretical accessibility versus practical accessibility

A web page can be perfectly WCAG 2 proof, but if the HTML doesn’t tell a story, it’s still a puzzle for people that depend on a braille line or a screen reader. Did I mention Google is blind?

Set yourself in the place of someone who get’s your web page read out loud linearly and the only clue she has on what the structure is, are headings and links.