Labelling the Web 🏷️

If you've been in a cooking situation where you wanted to use paprika powder but ended up using cinnamon because of the visual similarities, you might appreciate the value of label makers. This has happened to me more often than I would like to admit. On a different occasion, I tried to bake a cake and wondered why nothing happened once I put my batter into the oven. After some troubleshooting I realized that I used confectioner's sugar instead of flour. The sugar was sitting unlabelled in my cupboard.

This was the old me. I have learnt from my mistakes. Today, I label my spices and groceries. Life has taught me one too many times that cooking can go terribly wrong if you don't.

You know what else goes terrible wrong if you refrain from using labels? Exactly, using the web (this sounds like a joke but I'm actually serious).

What's a label?

Regular readers of my blog know how much I love breaking things down by starting with definitions. Dear Cambridge Dictionary, what's the definition of a label?

A piece of paper or other material that gives you information about the object it is attached to.

I'm sure you remember that my blog is not about cooking (at least not yet). Since we are talking about a web context here, we can easily use this definition and apply it to user interface (UI) design.

Labels are used as captions for elements in a UI. In general, everyone will have a better understanding of a UI if elements have names.

What are things that we can label in a UI you might ask?

• Pages of a website
• Links
• Buttons
• Form controls
• Tables
• Landmarks
• etc.

Let us start labelling.

Accessible names

When we consider the design of any website, we will find that labelling UI elements usually benefits all of us.

• Wikipedia shows a table of contents for any page and labels them as "Contents"
• Spotify's web app has a menu with 3 items, each with an icon and a label for "Home", "Search" and "Your Library"
• BBC's website shows a "Sign In" label next to an icon showing the popular avatar icon for their login area

Sometimes UX designers use icons to communicate meaning. Popular examples are icons such as a hamburger (3 horizontal lines on top of each other) for menus, a magnifying glass for search buttons or a funnel for filter buttons.

All of the above is fine, if elements have accessible names. Allow me to quote from W3C's documentation:

The accessible name is the name of a user interface element. Each platform accessibility API provides the accessible name property. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element.

Let us keep that in mind and look at individual parts of a UI.

Pages of a website

Page titles act as a summary of what users can expect to find on a page. What is the content about? What can users do here? Is it a product detail page? Is it the shopping cart? A common pattern is to use the summary of the current page, combined with a delimiter (such as a slash or vertical line) and the name of the website.

If my grandma was still alive today, she would probably share her secret cooking recipes with the world on her blog "Grandma Maria's secret recipes".

<title>Best mashed potatoes ever | Grandma Maria's secret recipes</title>

Proper page titles are essential for accessibility. They support navigation for screen reader users (and tab hoarders) and make content more understandable.

Links

Hyperlinks are good examples for UI elements that usually always have a visible label.

<a href="mashed-potato.html">Recipe for best mashed potatoes ever</a>

In this example, the accessible name of the Hyperlink is "Recipe for best mashed potatoes ever". Screen reader users and Non-screen users alike will be able to perceive the link and will be happy to finally taste Grandma's best dish.

Buttons

Buttons are similar to hyperlinks. In many cases their label is visible, but sometimes an icon is used to communicate a button's function.

Visible labels

A traditional button uses a visible label and the same logic applies as with Hyperlinks.

<button type="button">Sign up for Grandma's newsletter</button>

The accessible name in this example is "Sign up for Grandma's newsletter". Hooray!

Invisible labels

Now imagine that my hypothetical grandma decides to use an email icon for her hypothetical newsletter sign up. And she's using a cool SVG for that.

<button type="button">
    <svg>...</svg>
</button>

Listen, grandma. That's cool, but what is the accessible name of our button? It's empty. In this scenario, screen reader users will not be able to perceive what the button does because it doesn't have a label.

Don't you worry, ARIA comes to the rescue. Using the aria-label attribute, we can provide an accessible name for the button.

<button type="button" aria-label="Sign up for Grandma's newsletter">
    <svg>...</svg>
</button>

Now, we are back to our accessible name "Sign up for Grandma's newsletter", that will now be exposed to assistive technology like screen readers.

Form controls

If form controls are not associated with labels, they don't have accessible names. As a consequence, screen readers will fail to identify their purpose. Luckily, grandma is aware of this and includes this in her newsletter sign up.

<label for="email">Email address</label>
<input type="email" id="email" name="email">

The accessible name for the text field will be "Email address". All screen readers offer a menu, that conveniently shows the name of all form controls. By the way, I dedicated a whole blog post to web forms, in case you want to learn more about accessible web forms.

Tables

Tables offer different ways to label them. A common method is to use the <caption> element, that has been designed specifically for this purpose.

<table>
    <caption>Grandma's best recipes</caption>
...
</table>

The accessible name of the table is "Grandma's best recipes". With this method, an actual text element gets rendered that gets associated with the table.

Another option is to use an aria-label instead of the <caption> element. But grandma might even already have a heading in place that shows a visible label what her table is about.

<h2 id="heading">Grandma's best recipes</h2>
<table aria-labelledby="heading">
...
</table>

In this example, we can simply reuse the name of an already existing element on the website. The table is referring to an HTML ID, that was used before and as a consequence, the table's accessible name is yet again "Grandma's best recipes".

Table names are also shown in screen reader menus, just like form controls.

Landmarks

Last but not least, let's consider landmarks. Landmarks tremendously improve the semantics of any website, by exposing their function to assistive technology. They enable screen reader users to quickly jump between individual parts of a website.

The most common landmarks are the following:

• <header> typically for the logo and navigational menu
• <main> for the main content
• <footer> for general information such as privacy or copyright information
• <nav> for site navigation

Since almost every website out there uses these parts, in many cases it suffices to use the above landmarks without labelling them. However, there are exceptions. It is very common for instance, that both the header and the footer of a website use links for navigation.

Guess what, grandma's website is a prime example for a header & footer navigation, so she is advised to label both of them.

<header>
    <nav aria-label="main">
        <ul>
            <li>Recipes</li>
            ...
        </ul>
    </nav>
</header>

If grandma also labels her footer navigation in the same way (e.g. with the label "footer"), screen reader users will be able to distinguish between the two navigational landmarks. Keep up the good work, granny!

Pull out your label makers

After my initial culinary excursion you will understand that my cooking fiascos wouldn't have happened if I had done proper labelling.

Also, the web would be a better place if we all acknowledged that assistive technology and screen reader users are relying on labels. If we don't use them, users will be excluded as they won't be able to perceive the content they are supposed to interact with.

Let's pull out our label makers and label the web. 😎

This post is dedicated to my grandma. She passed away in 2003 and I loved her dearly. She made the best mashed potatoes in the world, but I'm sure you already know that. 👵🏻❤️