Accessible and Expressive HTML Semantics
Tags: a11y, webdev, html, ux
Published: 2018-12-23 20:02:09

---
title: Accessible and Expressive HTML Semantics
published: true
description: Tips for writing accessible and expressive HTML semantics
tags: accessibility, webdev, html, ux
---

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](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn). This is a great way to test your webpage's accessibility for screen readers.

We can also use the [Speech Synthesis API](https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis). 
A simple text-to-speech output using this API is simple.

``` javascript
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.

``` html
<!-- 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.

``` html
<!-- 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

``` html
<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-

```html
  <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 -
``` html
<!-- 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-

``` html
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](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/)

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

``` html
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.

``` html
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.

``` html
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.

```html
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.

``` html
<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.

``` html
<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.

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

A list of link attributes can be on the [Microformats Website](http://microformats.org/wiki/existing-rel-values)


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. 

```html
<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](https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/)

-----------

## 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.

```html
<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](https://webaim.org/standards/wcag/checklist)
2. [Web With Just A Keyboard](https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard)
3. [Web For A Day Using A Screen Reader](https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/)