Accessible and Expressive HTML Semantics

Writing semantic and accessible code might seem time consuming, especially if you're starting out to make accessible websites. However in the long run, the benefits are incredible. Writing proper semantic HTML helps all kinds of users to properly consume content and navigate through your website no matter what medium they are interacting through.

Before we start going over semantics, the best way to get access to a screen reader is by using Chrome Vox. This is a great way to test your webpage's accessibility for screen readers.

We can also use the Speech Synthesis API.
A simple text-to-speech output using this API is simple.

var to_speak = document.querySelector('main').textContent;


function speak() {
  window.speechSynthesis.speak(new SpeechSynthesisUtterance(to_speak));
}

Let's begin!

Text Level Semantics

1. Phrasing Emphasis

In HTML we have a few variations of elements we can use for this purpose -
strong, bold, em, i. But which to use when?

The strong element should be used when the text has a strong importance. On the contrary, the b element should be used for styling purpose without implying that the text outlined has more importance than text surrounding it.

<!-- of strong importance -->
<strong>Pay attention: All classes are suspended for today</strong>

<!-- only adding visual differentiation -->
This recipe needs some <b>salt</b> and <b>pepper</b>

The em element stresses an emphasis on the prominence of text, whereas the i element is primarily used within a dialog or conversation for a variant tone. i element can also be used to express language changes.

<!-- emphasis on the prominence -->
I <em>really</em> want to go the movies

<!-- setting a different tone -->
I like her certain <i hreflang="fr">je ne sais quoi</i>

2. Extending HTML tags to be accessible

abbr tag is used when we are stating abbreviations such as

<abbr title="British Broadcasting Corporation">BBC</abbr> has headquarters in London, United Kingdom.

For visual browsers this will provide a tooltip when hovered over, but screen readers ignore the title attribute all together. So how do we make this accessible?

We can provide an aria-label attribute-

  <abbr title="British Broadcasting Corporation" aria-label="British Broadcasting Corporation">BBC</abbr> has headquarters in London, United Kingdom.

Alternatively we can provide additional information that is only visible to screen readers -

<!-- screen reader specific styles -->

.sr-only {
    position: absolute;
     width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); 
    border: 0; 
}

<abbr title="British Broadcasting Corporation">
    <span class="sr-only">British Broadcasting Corporation</span>BBC
</abbr> has headquarters in London, United Kingdom.

This approach can be extended to other useful HTML elements where screen readers lack, such as mark, del, ins.

mark element is used to highlight a part of text, but the screen reader don't make any difference while reading out. One way to solve it will be by using the above method-

The current world population is <mark><span class="sr-only">highlight begins</span>7.7 billion<span>highlight ends<span/></mark> as of December 2018</mark>

Another useful method to make mark accessible is given here: Short Note On Making Your Mark More Accessible

ins and del elements are used for stating insertion and deletion of text from document respectively.

His son is <del>6</del> <ins>7</ins> years old

Screen reader don't read these tags any differently so to make it more accessible we need to add more context.

His son is <del><span class="sr-only">deleted</span>6</del> <ins><span class="sr-only">inserted</span>7</ins> years old

Note: Additional attributes used with del and ins is cite and datetime, where cite provides a machine readable source providing reference for the addition/deletion and datetime provides when was the addition/deletion took place.

3. Hide content from screen readers to reduce cognitive load

We sometimes add things to give more visual appeal but those things might not be relevant when visual senses are not in play. As for this previous example with ins and del, we might as well hide the deleted text from screen readers as it might be relevant visually but not otherwise.

His son is <del aria-hidden="true">6</del> <ins>7</ins> years old

The main takeaway is that you really need to be mindful of what information might be relevant to your user. How much more added information do we need to give screen reader users and how much should we strip down.

Hyperlink Semantics

Web is full of links with here, click here text, which doesn't give much context to user. It's always better to avoid such text in hyperlinks and instead give full context to the user.

I am currently reading <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/"><cite>Essential JS Design Patterns</cite></a>. You will find a lot of useful tips in it.

Hyperlink Attributes

type attribute can be used to provide context to the type of content being linked.

<a href="video.mp4" type="video/mp4">Download Video</a>

download attribute gives more context to the browser that the file mentioned in the href is meant to be downloaded rather than displayed.

<a href="video.mp4" type="video/mp4" download>Download Video</a>

If the text within the link is in a different language than of the document, we can provide the hreflang attribute to state so.

<a href="..." hreflang="fr">La vie en rose</a>

A list of link attributes can be on the Microformats Website

Hyperlinks can not only be used to link to other webpages, we can also use them to link to elements on the same webpage. For example, if we are referencing some figure or table data that was mentioned earlier we can link them using a tag to give user context of what we are talking about. We can achieve this by putting id to your 'linkable' content.

<figure id="figure-2">...</figure>

This phenomena was explained in <a href="figure-2">Figure 2</a>

Another common use case for linking within webpage is a "Skip to main content" link. These are not only useful for screen reader users but also keyboard users.

You can find how to create skip to main content link here

Creating clear navigation

1. Common way of navigating through keyboard is by pressing tab key from one link to another. So this make its all the more important to add proper text within a tags as mentioned earlier.

2. Screen readers have a way of outlining the structure of the document using the headings, so always put a concise summary of the content for that section in your headings. By creating a proper outline using headings h1 - h6 you are helping users to better understand the structure of your page and the relationships between individual sections.
   Another tip is to add id to your headings so that we can link these using a tags, which can be used as navigation landmarks even for sighted users.

3. If we want the user to land on certain sections that are other than links while navigating through keyboard we can put tabindex = 0 into that element. By doing so we are adding that particular section into the tab order.

4. Another way to navigate is through landmark roles. This is included in the ARIA spec and is used to define regions of the page based on their context. We use the role attribute to achieve this.
   

<div role="navigation">
  <ul>
    <li>
       <a href="/contact">Contact Me</a>
      <li/>
  </ul>
</div>

Many of these landmark roles have equivalent landmark tags -

• banner -- header
• navigation -- nav
• main -- main
• contentinfo -- footer
• complementary - aside
• search

Last but not the least, always try to structure your page using more meaningful elements rather than div.

• header
• footer
• nav
• main
• section
• article
• aside

They not only provide more context but also a rich experience to all kinds of users.

This ends here.

I am not an expert and this is definitely not everything there is to learn about creating accessible HTML, however I believe this would give you a nudge in the right direction.

References

1. WCAG Checklist
2. Web With Just A Keyboard
3. Web For A Day Using A Screen Reader