Accessible and Expressive HTML Semantics

Ananya Neogi - Dec 23 '18 - - Dev Community

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));
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Image
The Worst Advice We've Heard About Baltimore Accident Lawyers
Image
Automating AWS DNS Firewall Domain List Updates Using S3, Lambda, and CLI

community, dns, aws, route53
Image
What Is The Reason Adding A Key Word To Your Life Can Make All The A Difference
Image
Laravel AI service with support for multiple LLMs

webdev, laravel, ai, tutorial
Image
Observability - 1

monitoring, observability, devops, learning
Image
Jak Wyciszyć Ściany i Stworzyć Spokojne Miejsce w Twoim Domu
Image
Microsoft Copilot Security

githubcopilot, aisecurity, microsoftcloud, microsoftazure
Image
Macam Keuntungan Judi Online24jam Deposit Pulsa
Image
Unlock Ultimate Security: How to Use YubiKey (or Any Security Key) for Passwordless Access in Azure Virtual Machines!

azure, virtualmachine, security
Image
Keutamaan Management Waktu Dalam Taruhan Judi Online
Image
LINUX CHALLENGE DAY 2

devops, linux, ubuntu
Image
Why All The Fuss Over Accident Lawyer Savannah?
Image
What's The Current Job Market For Couch Professionals Like?
Image
A Look In The Secrets Of Salt Lake City Accident Lawyers
Image
situs slots online terpercaya dan terbaik di indonesia
Image
Python Virtual Environments
Image
Medical Billing Companies: How They Help Improve Cash Flow for Your Practice
Image
Using and Editing the Windows hosts File

microsoft, hosts, learning, tutorial
Image
20 Trailblazers Are Leading The Way In Bronx Accident Lawyer
. . . . . . . . . . . . . . . . . . .