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
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 withina
tags as mentioned earlier.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 addid
to your headings so that we can link these usinga
tags, which can be used as navigation landmarks even for sighted users.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.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.
Top comments (0)