🌐 Web Accessibility

Nav

The nav element is only intended to be used for your main navigation links. If you've got a set of sub navigation links, you don't need to wrap them in an additional nav element.

Typically, the nav element will contain a series of links acting as your sites primary navigation. However, it does not have to be! it's perfectly valid to include small pieces of textual content inside, as long as its main focus is to display navigation links. See the examples below for use cases outlined above.

It's also advised to use nav element for breadcrumb navigation, adding an aria-label with "breadcrumb" is also a nice touch to help out any users on screen readers.

Quick note on aria-label vs aria-labelledby: aria-label lets you write the label directly as a string attribute when there's no visible text to reference. aria-labelledby points at the id of an existing element that already has the label text visible on screen. For example, if you have a visible h2 that reads "Site Navigation", use aria-labelledby="nav-heading" rather than duplicating the text in an aria-label. This way screen readers read the same label your sighted users see, keeping things consistent.

HTML
1<!-- most common use case for nav element -->
2<nav aria-label="Primary">
3  <ul>
4    <li><a href="/articles/sass">Sass</a></li>
5    <li>
6      <a href="/articles/javascript">Javascript</a>
7      <!-- Notice how the <nav> element does NOT added again -->
8      <ul>
9        <li><a href="/articles/javascript/promises">Promises</a></li>
10        <li><a href="/articles/javascript/vanilla">Vanilla</a></li>
11      </ul>
12    </li>
13  </ul>
14</nav>
15
16<!-- Breadcrumb example using nav element -->
17<nav aria-label="Breadcrumb" class="nav-breadcrumbs">
18  <ol>
19    <li>
20      <a href="../articles">
21         Articles
22      </a>
23    </li>
24    <li>
25      <a href="../articles/javascript">
26        JavaScript Articles
27      </a>
28    </li>
29  </ol>
30</nav>
31
32<!-- nav example with some text content -->
33<nav aria-label="Primary">
34  <header>
35    <h2>All Articles</h2>
36    <p>Select all available articles below.</p>
37  </header>
38  <ul>
39    <li><a href="/articles/sass">Sass</a></li>
40    <li><a href="/articles/typescript">TypeScript</a></li>
41  </ul>
42</nav>

Section

We can think about the section element as a standalone piece of the document. These are usually generic, where there isn't a more fitting semantic element to use. It's important not to swap out all div elements for section elements. In most use cases, a section element should always have a heading element to describe the purpose of the section. Some nice questions to ask yourself if you should be reaching for a section element:

• Can you describe the content area with a meaningful heading? If the answer is no, a div element is likely the better option.
• Is the element only meant to act as a container, or for attaching some styles to? If the answer is yes, then a div element is likely the better option.

HTML
1<!-- Avoid using as container or style wrappers -->
2<section class="style-wrapper">
3  <p> 👾  👾  👾 </p>
4</section>
5
6<!-- Instead, use an element with 0 semantic meaning -->
7<div class="style-wrapper">
8  <p> 👾  👾  👾 </p>
9</div>

The section element can be multi level nested if it makes sense for your content. As previously mentioned, you'll want to have a meaningful header element, which could be header itself with heading elements h1, h2, h3 ...etc, or a standalone heading element h1, h2, h3 ...etc. Footers are entirely optional based on your content. One thing to note, section elements that contain header or footerelements, may also contain another section element within the header or footer. See the examples below.

HTML
1<article>
2  <h1>All Emojis</h1>
3  <!-- Nested Sections-->
4  <section>
5    <!-- Meaningful Heading-->
6    <h2>Favourite Emojis</h2>
7    <section>
8      <!-- Meaningful Heading-->
9      <h3>Rocket Emoji</h3>
10      <p> 🚀 🚀 🚀 </p>
11    </section>
12    <section>
13      <!-- Meaningful Heading -->
14      <h3>Alien Invader Emoji</h3>
15      <p> 👾 👾 👾 </p>
16    </section>
17    <footer>Share on socials... </footer>
18  </section>
19  <footer>© 2021 TheJoeCodes</footer>
20</article>

Header

The header element can be used for introductory content. The most common use case for a header element is to act as container to hold multiple introductory elements, such as heading elements h1, h2, h3 ...etc. The header element is not limited to heading elements, to re-iterate it's for introductory content, which may include a paragraph of text, a profile photo, a logo or anything really depending on your use case.

Header elements can be used within section elements, which is the most common way I use them. For example, an introductory section of an article.

HTML
1<article>
2  <h1>Web Accessibility</h1>
3  <section>
4    <header>
5      <h2>Introduction</h2>
6      <h3>What is accessibility?</h3>
7    </header>
8    <p>In short, accessibility is...</p>
9  </section>
10</article>

Footer

The footer element usually contains additional meta data in relation to the site or current page. You will typically see data like legal information, copyright text or links to other related documents like social links or a contact page. You can think about a footer as an element that contains small pieces of supporting information. The content inside a footer element is usually of less importance than the content inside a header element.

HTML
1<article>
2  <h1>Semantic HTML</h1>
3  <p>👋 I hope you're enjoying the content so far 👀</p>
4  <footer>
5    <p className="footer__author">Author: Johnny McFadden</p>
6    <p className="footer__copyright">© 2021 blog.thejoecodes.com</p>
7  </footer>
8</article>

Article

The article element should be used as a container element to capture self-contained, standalone content that makes sense when placed in a different context.

HTML
1<article>
2  <h1>All Articles 🧑🏻‍💻</h1>
3  <article>
4    <h2>JavaScript</h2>
5    <p>... JS post overview ...</p>
6  </article>
7  <article>
8    <h2>TypeScript</h2>
9    <p>... TS post overview ...</p>
10  </article>
11  <article>
12    <h2>Sass</h2>
13    <p>... Sass post overview ...</p>
14  </article>
15</article>

I'm currently using the article element in two places across this blog:

• Article post overviews when viewing the list of all articles.
• The article/blog post itself.

Aside

The aside element is used to represent a piece of the document where the content doesn't fit into the normal flow of the main content, but indirectly relates to the main content. You will usually see the aside element used for sidebars which may contain:

• Adverts
• Links to related websites
• Share on socials: Facebook, Twitter, Instagram
• Recommended posts
• Context help on how to use the current page

HTML
1<body>
2      <header>
3        <img>Logo here</img>
4        <nav aria-label="primary">primary nav links</nav>
5        <nav aria-label="secondary">secondary nav links</nav>
6      </header>
7
8      <main>
9        <article>
10          <h1>Main content heading</h1>
11          <p>main content</p>
12        </article>
13      </main>
14
15      <!-- Aside element, content indirectly related to main content -->
16      <aside>
17        <section>
18          <h2>Social Media Share Links</h2>
19          <ul>
20            <li>Share on Facebook...</li>
21            <li>Share on Twitter...</li>
22            <li>Share on Instagram...</li>
23          </ul>
24        </section>
25        
26        <section>
27          <h2>Recommended Reads</h2>
28          <article>
29            <h3>Recommend Read 1</h3>
30            <p>You should also read this...</p>
31          </article>
32          <article>
33            <h3>Recommend Read 2</h3>
34            <p>You should also read this...</p>
35          </article>
36        </section>
37      </aside>
38      <!-- Aside element, content indirectly related to main content -->
39
40      <footer>
41        <p className="footer__author">Author: Johnny McFadden</p>
42        <p className="footer__copyright">© 2021 blog.thejoecodes.com</p>
43      </footer>
44    </body>

Focus States

To navigate a sites interactive elements by keyboard, users rely on using the Tab keyboard key. When an element is tabbed to, it's said to be in a focused state, with a corresponding focus ring displayed automatically by the browser.

By default, most browsers display focus states for mouse events, which doesn't look great. I've often seen focused states turned off completely, but we can get the best of both worlds with a little bit of JavaScript and CSS to apply focus states only when using the keyboard. Here's the implementation used across this blog:

1// Let the document know when the mouse is being used
2document.body.addEventListener('mousedown', function () {
3  document.body.classList.add('using-mouse');
4});
5
6// Re-enable focus styling when Tab is pressed
7document.body.addEventListener('keydown', function (event) {
8  if (event.keyCode === 9) {
9    document.body.classList.remove('using-mouse');
10  }
11});

SCSS
1/* When mouse is detected, ALL focused elements have outline removed. */
2body.using-mouse :focus {
3  outline: none;
4  box-shadow: none;
5}

I was previously using custom focus styles with a box-shadow and a CSS custom property color to work with my various dark themes:

SCSS
1:focus {
2  outline: none;
3  box-shadow: 0 0 0pt 2pt var(--primary-color);
4}
5
6/* When mouse is detected, ALL focused elements have outline removed. */
7body.using-mouse :focus {
8  outline: none;
9  box-shadow: none;
10}

Despite how much "cooler" it looked, it felt wrong to change the focus states which could have been derived from a users operating system preferences.

Navigation Order

It's really important to consider the order in which elements are intended to be interacted with. In most cases, your navigation should flow from top to bottom in a natural and intuitive order.

You should try and avoid using a tabindex property, especially with a value greater than 1. Instead, try using the right element for the job. Instead of reaching for an element with no semantic meaning like a span, adding a tabindex property to make a close button, just use a native button element and remove/update styles accordingly.

HTML
1<span tabIndex="1">X</span>
2
3<button aria-label="hide emoji button">X</button>

There may be valid use cases for reaching for the tabindex property. One example of this is a 3rd party design system whereby you can't change the underlying html, the component in question may accept unknown properties and propagate them onto the underlying html element. In this example, a tabindex property might be exactly what you need.

Extra Learning