WCAG 2.1 – What is Label in Name?

Over the last few blog posts we’ve been examining the recent additions to the WCAG guidelines. In this blog post, we’ll be looking into forms, controls and their labels.

What’s in a name?

Every object and item that we can think of has a noun, a naming word attached to it. Every person we have ever met has a name, but imagine that the person you’ve just met has a name tag, but their actual name is different to what is written. Imagine further that they refused to speak to you until you said their true name. It would be almost impossible to guess their name without repeated attempts and in all likelihood you’d give up after a while.A blank "Hello my name is" sticker

When a web designer builds a website, interactive objects have a visual name and a programmatic name. In the majority of cases, these will be identical, but if there is an error or the web author hasn’t created the website correctly, the programmatic name is different.

For the majority of people this isn’t a concern as they can still click or move focus onto a form field, search bar or submit button. However, for a speech user, who use voice commands to navigate a website, the problem is clear as these interactive components will not respond to their verbal instructions.

2.5.3 – Label in Name (Level A)

The Label in Name success criterion states:

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

A best practice is to have the text of the label at the start of the name.

Some users interact with a computer using only their voice. Using such commands, they can navigate a page, select buttons, choose links and type information into form fields. To do this, they will provide an instruction to a piece of speech software that will work out what they have said and follow the instruction.

Some navigation features are built within the assistive technology, such as ‘go down’ to navigate down a page. However, other features rely on the page code to know which item to select or interact with.

This is where the ‘Label in Name’ guideline is important. If a speech user says ‘select search’, but the search button has another name, no interaction will take place. The user may try several times or try different names in an attempt to select the button (for example, ‘select find’). If the user cannot interact with the feature, they may give up.

The Label in Name criterion mentions the best practice and is the one by which Dig Inclusion test against: that any text that describes the component is also the one that names that component.

Conclusions

Everything has a name and web authors will give a name to components throughout the website. During the creation process, authors may give a name to a component that is different to the final name of the component.

For most users this will not be an issue, but for speech users in particular this can be a problem as they will try to navigate and interact with a website but the components will not respond to their commands.

It is therefore important that authors use any visual name of a component as its programmatic name.

Are your website’s controls

It’s highly likely that your website has buttons and forms, even if it is just to collect an email address for a newsletter. It’s important to make sure that these forms have been created in such a way that they can be interacted with using assistive technologies.

If you’re unsure whether or not your website has been created with these considerations in mind, then feel free to contact Dig Inclusion to have your website tested to the WCAG 2.1 guidelines.