What is an accessible name?

Many HTML elements have an accessible name. It can be derived from different sources, and browsers use an algorithm called the Accessible Name and Description Computation
to figure it out.

The accessible name for a HTML element
is exposed in the browser’s accessibility tree
. It is the piece of information used by Assistive Technologies (AT) to identify the element. For example, someone using a speech recognition tool can target the element using its accessible name, or someone using a screen reader will hear the accessible name announced as they moved focus to that element.

The accessible name for an element can be derived from the element’s content, an attribute, or from an associated element.

Using the element’s content

The content of an
element gives the link its accessible name. The accessible name for the following link is “Chamukos tequila”.

Chamukos tequila

So someone using a speech recognition tool would say something like “Click chamukos tequila link”, and a screen reader would hear something like “Chamukos tequila link” when they move focus to it. Check out this screen reader demo
to hear how an HTML link sounds.

Using an attribute

The accessible name for an image is derived from the alt
attribute. The accessible name for the following image is “Chamukos tequila”.

Chamukos tequila

These two sources for an accessible name can be combined. When an image is the only content of a link, the image’s alt
attribute gives the link its accessible name.

Chamukos tequila

When a link contains both an image and some text, the two combine to form the link’s accessible name. The accessible name for the following link is “Chamukos tequila £40”.

Chamukos tequila £40

Using an associated element

The accessible name for a form control can be derived from an associated element. The accessible name for the following checkbox is “Chamukos tequila”.

The for
attribute on the
and the id
attribute on the
share the same value. This creates an association between the two elements that instructs the browser to expose the content of the label as the accessible name for the checkbox.

Using ARIA

The accessible name for an element can be altered using ARIA. The aria-label
and aria-labelledby
attributes work in different ways, but the important thing to remember is that ARIA trumps all; the accessible name provided with the native HTML will be overridden by the accessible name provided with ARIA.

With aria-label

The aria-label
attribute takes a string as its value. It can be used to provide an alternative accessible name for an element.

The accessible name for this button is “Add Chamukos tequila to cart”, not “Add to cart” because the ARIA overrides the HTML.

This can seem like a good way to provide meaningful accessible names for screen reader users, whilst presenting a shorter label for the button to sighted people. The trouble is that someone using a speech recognition tool will not be able to see the accessible name for the button, only its visible label – which makes it difficult for them to accurately target the button using a voice command.

If there is only one “Add to cart” button on the page, tools like Dragon Naturally Speaking will correctly target the button because it doesn’t need the complete accessible name to be spoken. But if there are multiple “Add to cart” buttons on the page, then Dragon will assign each one a number, and the person using speech recognition will have to specify which of the “Add to cart” buttons they want.

With aria-labelledby

The aria-labelledby
attribute takes an id
ref as its value. It’s used when the text you want to use as an accessible name is located elsewhere on the page.

Choosing accessible names

Choose accessible names with care. If there are two things on a page that do exactly the same thing, give them the same accessible name. For example, two links that point to the same destination should have the same accessible name. Conversely, if there are six buttons on a page that all do different things, each one should have an accessible name that is unique and distinct from the rest.

Thanks to Eric Wright for help understanding Dragon behaviour.

稿源:The Paciello Group Blog (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » What is an accessible name?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录