Navigating the Web with Clarity: The Importance of Proper Labelling for Web Accessibility
Nick Towers
Whenever a user reads a webpage, they need to understand what they can do with the page, if a user is filling in a form, how can they tell which field they’re in? There may be a simple prompt written next to the field, but if the user requires a screen reader, or is using magnification software, for example, they may not even know it is even there, let alone what they need to put in the box.
Making sure that each interactive element has an associated label is a quick way to increase the accessibility and usability of your site and is a crucial first step in ensuring your website complies with Web Content Accessibility Guidelines (WCAG).
What are associated labels?
Labels are everywhere, they’re just text describing what a part of the page does, you might see them inside buttons, part of the text of a link, or next to the field of a form, if properly used, screen readers and other assistive technologies (AT) can use them to help users interact with and understand the page. For labels to be effectively used by AT, one question needs to be answered “What is the label of this element?”
This question is not always easy to answer, if the text is inside, you can probably be sure that the label is this text, however, if the text is next to a form you want a label for, it’s not so straightforward – but you can help. By associating the label to the field, you can say “this label is for this element” which greatly simplifies the problem, making understanding page more consistent and accurate for the user. There are a couple of ways to associate a label with a field:
The label element
The label element is a part of HTML and should be compatible with all modern browsers and Assistive technologies. The element can be used in two ways:
- Instead of putting the label text inside the field, the field can be placed inside the label element, which should associate the field with the element.
- By giving the form field a unique id value, it can be associated with the label by using the same value in the label’s for attribute.
It’s important to note that only some types of fields are intended to have labels and may be ignored by AT even if used correctly otherwise. If not using a HTML-standard element (such as an input element) you may need add a role attribute so that the relevant assistive technology can identify the input as a labelable element and help the user appropriately.
Labelling with Aria
What is Aria?
Accessible Rich Internet Applications (ARIA) standard is a way you can tell assistive technologies about the behaviour and content of elements of a website. In fact, we’ve seen it already, the role attribute can be used to tell AT what the intended behaviour of an element is.
For example, if you have remodelled an HTML div element to behave and look like a button, a screen reader may not allow users to press the button because a div is not an interactive element and that’s all it sees. Using a role=button attribute will signify to the screen reader that the element is a button and can be pressed.
NOTE: ARIA was designed with a range of technologies in mind, and just because features exist in ARIA they may not always be necessary. In general, using native HTML elements and properties is a much better way to ensure consistent behaviour for all users, AT, or no.
The aria-labelledby property
An alternative to the HTML label element is the aria-labelledby property, which allows you to define the label for a particular element. The advantage of aria-labelledby is that the label could be any element, such as a div and is not bound to the specific structure required by the label element, simplifying the website design process. To use the aria-labelledby attribute, add the attribute to the labelled element, whose value is a unique id pointing to the label. It should be noted that aria-labelledby should only be used when there is text of the label is normally on screen, if there is no label visible an aria-label is preferred.
aria-label
aria-label provides a way of labelling elements when there is no label on screen, this may be useful, for example, in giving labels to styled buttons which may not have any accompanying text. Using an aria-label is a simple as giving the labelled element the attribute with the relevant text inside.
aria-describedby
Though not technically used for labelling, the aria-describedby attribute has an important role in helping users understand the page. As the name suggests, aria-describedby is used to provide additional descriptions for elements and is particularly useful for screen reader users, for which the description may be hard to find. A common use case for the aria-describedby attribute is to add descriptions to text fields, such as for password fields which may list required characters for potential passwords. The usage of aria-describedby is just as for aria-labelledby, give the labelled element the property with an id referencing the describing element.
Conclusion
Labels help users better navigate and understand webpages, and their use is an essential part of making the web a more accessible and usable place. Oftentimes - especially with simple input fields such as buttons – the text of an element can act as a label. However, when this is not possible, generally the quickest, easiest, and most reliable way of labelling content is the native HTML label element, which is most useful for elements like text input fields. ARIA provides a few methods of labelling and providing descriptions for text, aria-describedby and aria-labelledby allow you to use on-screen text to describe and label elements of the page, whereas the aria-label allows you to provide custom labels for the page.