Aria label html academy

aria-label

The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.

Definition

specification. This specification extends native HTML, allowing you to change the way an HTML element is «translated» into the accessibility tree.

By default, an HTML element will use its text content as the accessibility label. If an element has aria-label , the accessible name becomes the string that it’s passed in the attribute.

button>sendbutton> 
// accessible name: send
 
button aria-label="send email">sendbutton> 
// accessible name: send email

How to use

button 
 
aria-label="menu" 
 
class="burger">button>

1) What elements can be used with aria-label

• interactive elements: such as a (when href attribute is present), audio and video (when controls attribute is present), input , select , button , textarea .
• implicit landmark elements: such as header , footer , nav , main , aside , section , and form .
• explicit landmark elements: such as an element with role=»navigation» .
• widget role elements: such as an element with role=»dialog» or role=»tooltip» (there are 27 widget roles in ARIA 1.1).
• iframe and img elements.

When to use

You should use it when you have non-textual indication of an element’s purpose, but still need to provide text alternates for users who use assistive technology, such as screen readers.

Tip: Labelling best practice

You don’t need to add «button» in the label as screen readers already announce an element’s role.

// ⛔ BAD: "send button, button"
 
button aria-label="send button">. button> 
 
// ✅ Good: "send, button"
 
button aria-label="send">. button>

Examples

Example 1: Icon Button

button aria-label="Close"> 
 
svg 
 
focusable="false" 
 
aria-hidden="true" 
 
viewBox="0 0 24 24" 
 
> 
 
path 
 
d="M19 6.41L17.59 5 12 10.59 6.41 5 5
 6.41 10.59 12 5 17.59 6.41 19 12
 13.41 17.59 19 19 17.59 13.41 12z" /> 
 
svg> 
 
button>

Example 2: Labelless input

input 
 
type="text" 
 
name="name" 
 
placeholder="What's your name?" 
 
aria-label="Your name" />

Example 3: Multiple Navigation Landmarks

nav aria-label=’primary’> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav> 
 
nav aria-label=’secondary’> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

Example 4: Identifying region landmarks

section aria-label="projects"> 
 . 
 
section> 
 
section aria-label="team"> 
 . 
 
section>

Comparision

aria-label vs. aria-labelledby

When label text is visible on screen, you should use aria-labelledby instead of aria-label .

// ⛔ BAD: using aria-label when text
// is visible on screen
 
nav aria-label="Related Content"> 
 
h2>Related Contenth2> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

// ✅ Good: using aria-labelledby when text
// is visible on screen
 
nav aria-labelledby="nav-title"> 
 
h2 id='nav-title'>Related Contenth2> 
 
ul> 
 . List on links here. 
 
ul> 
 
nav>

Note

If an element has both aria-labelledby and aria-label , the value of aria-labelledby will be used in the text alternative computation.

aria-label vs. title

The title attribute shows as a tooltip when the mouse goes over the element. While it can be useful for people using the mouse, it will not be available to keyboard-only users. Note that while title attribute is listed in the text-alternative computation algorithm, it might not be supported in some combinations of screen-reader/browsers (at the time of writting, IE 11 and NVDA).

In short, If you find yourself using the title attribute to provide additional information, it’s probably better to either use aria-label or think of an alternative (e.g.: disclosure additional information to users such as a tooltip).

Frameworks

React and aria-label

React, in particular JSX, supports all aria-* attributes. Contrary to other HTML attributes, ARIA attributes in jsx should be hyphen-cased as they are in plain HTML.

/* Static string */> 
 
button aria-label="Send">. button> 
 
/* Dynamic string */> 
 
button aria-label=labelVariable>>. button>

Angular and aria-label

In Angular, aria-* attributes are treated like any other HTML attributes and can either be binded to static attributes or to dynamic variables (using the attr prefix).

// Static string
 
button aria-label="Send">. button> 
 
// Dynamic string
 
button [attr.aria-label]="labelVariable">. button>

Vue.js and aria-label

In Vue, aria-* attributes are also treated like any other HTML attributes and can either be binded to static attributes or to dynamic variables (using the :aria-label prefix).

 
 
button aria-label="Send">. button> 
 
 
button :aria-label="labelVariable">. button>

Источник

aria — label

Свойство виджета из WAI-ARIA, которое задаёт доступное имя элементу.

Имя из атрибута aria — label видно только вспомогательным технологиям и скрыто от других пользователей.

Пример

Скопировать ссылку «Пример» Скопировано

     button aria-label="Пауза"> svg viewBox="0 0 35 42" width="35" height="42" xmlns="http://www.w3.org/2000/svg"> svg> button>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Задайте тегу атрибут aria — label с нужным текстом.

aria — label можно задавать всем интерактивным элементам, с которыми можно взаимодействовать. Также атрибут можно использовать и для некоторых неинтерактивных элементов — таблиц, модальных окон, ориентиров или групп элементов. Только учитывайте, что браузеры и скринридеры плохо поддерживают aria — label у статичного контента.

Есть теги и роли, для которых точно нельзя использовать aria — label :

Имя в aria — label должно быть кратким и не повторять роль элемента. Например, если это главная навигация, назовите её «Главная» вместо «Главная навигация». Во втором случае скринридер скажет «Главная навигация, навигация». Слишком много навигаций! Также старайтесь задавать уникальные имена ориентирам — частям страницы, к которым могут быстро переместиться пользователи скринридеров.

Имена из aria — label можно изменять динамически, но это потенциальная проблема для пользователей голосового управления. Таким пользователям сложно угадать, как изменилось название элемента в aria — label , от которого зависят голосовые команды. Это же касается и ситуаций, когда используете непредсказуемые имена. Например, кнопка с иконкой с домом называется не «Главная», а «Непрочитанные сообщения».

Учитывайте, что aria — label перезаписывает текстовое содержимое некоторых тегов и элементов с ARIA-ролями, а ещё из ARIA-атрибутов. Исключение — другой атрибут aria — labelledby . Он всегда перезаписывает aria — label , поэтому не стоит задавать их для одного элемента.

Если у элемента уже есть видимое имя, то лучше не перезаписывать его в aria — label . Это избыточно и может запутать зрячих пользователей скринридеров. Например, у кнопки может быть название «Согласен», а скринридер озвучит совершенно другой текст из aria — label «Принимаю условия соглашения».

  Согласен  button aria-label="Принимаю условия соглашения">Согласенbutton>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Доступное имя или просто имя элемента — это краткое название элемента, которое озвучивает скринридер при фокусе или когда он зачитывает всё подряд.

Чаще всего достаточно добавить в элемент текст, например, в или . В случае с картинкой источник имени — alt . Другие элементы могут получить имя из title как .

Если нельзя использовать ни один из этих способов, атрибут aria — label — один из дополнительных способов задать имя элементу. Он пригодится в следующих случаях:

Для интерактивных элементов в первую очередь лучше использовать возможности HTML вместо aria — label .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Не забывайте переводить содержимое атрибута, когда поддерживаете несколько языков.

💡 Содержимое aria — label иногда не дружит с автоматическим переводом, а раньше вообще не переводилось ни одним из сервисов.

💡 Когда у элемента должно быть видимое для всех имя, используйте aria — labelledby .

На практике

Скопировать ссылку «На практике» Скопировано

Татьяна Фокина советует

Скопировать ссылку «Татьяна Фокина советует» Скопировано

🛠 Старайтесь использовать для кнопок с иконками видимые текстовые лейблы. Это поможет зрячим пользователям, так как смысл иконок не всегда понятен. Особенно трудно разобраться с иконками пользователям голосового управления и людям с когнитивными особенностями.

🛠 Хорошая альтернатива aria — label — визуально скрытый контент с классом .visually — hidden или .vh . Так избежите проблем с автоматическим переводом, а ещё его точно прочтёт скринридер в любом режиме навигации.

    Пауза  button> svg viewBox="0 0 35 42" width="35" height="42" xmlns="http://www.w3.org/2000/svg"> svg> span class="visually-hidden">Паузаspan> button>    Скопировать Скопировано Не удалось скопировать   

 .visually-hidden  position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;> .visually-hidden  position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; >    Скопировать Скопировано Не удалось скопировать   

Если поддерживаете только новые браузеры, можно не использовать уже устаревшее свойство clip .

Источник

3 техники с атрибутом aria-label, которые прокачают ваш HTML

Я люблю делать доступные интерфейсы и стараюсь искать новый материал, чтобы перенять интересные практики. В этой статье я хочу рассказать про 3 техники, которые помогут сделать интерфейсы более понятными и простыми для пользователей скринридоров.

Дайте больше информации о контексте, где элемент находится

Мы часто имеем дело с кнопками, у которых есть ограничения. Например, ограничение пространства. Мы не можем использовать слишком длинный текст, потому что кнопки не поместятся. Поэтому мы вынуждены использовать краткий текст.

Но одного текста мало. Когда пользователь без ограничений взаимодействует с элементом, то кроме текста, он интуитивно анализирует окружающий контекст, и поэтому он может догадаться, что делает кнопка.

А что будет делать пользователь скринридера в такой ситуации? К сожалению, если человек использует только скринридер, то у него остается только краткий текст. И ему гораздо сложнее догадаться, что же делает кнопка.

Но мы можем помочь, добавив больше информации о контексте элемента с помощью атрибута aria-label . Например, разработчики ASOS добавляют «Clear recent searches», чтобы пользователи поняли, что кнопка очищает последние результаты поиска.

Не делайте так

Можно сделать так

Глаголы говорят пользователям, что элемент приводит к действию

Есть хорошая практика, использовать атрибут aria-label , чтобы скринридеры подсказывали пользователям, как взаимодействовать с элементом. Но, по моему мнению, тут есть проблема.

Люди используют существительные. Например, они пишут «Мои сохраненные товары» для ссылки, которая ведет на страницу с сохраненными товарами. Поэтому скринридеры озвучат «Мои сохраненные товары, ссылка».

Я же предлагаю использовать глаголы, чтобы пользователи понимали, что элемент приведет к действию. Например, «Мои сохраненные товары» заменить на «Перейти к моим сохраненным товарам». Скринридеры озвучат «Перейти к мои сохраненным товарам, ссылка».

Не делайте так

Можно сделать так

Создайте более простое взаимодействие

Если вы хотите сделать удобный интерфейс для пользователей скринридоров, то вам следует знать, что все элементы с семантикой озвучиваются. Например, я создал ссылку, в которой есть img , p и span . Когда пользователи будут взаимодействовать с интерфейсом, то они будут вынуждены сделать 3 действия.

Но мы можем упростить это, создав альтернативный способ взаимодействия. Например, разработчики ASOS дают всю информацию в атрибуте aria-label , а затем скрывают все дочерние элементы с помощью атрибута aria-hidden .

В результате, когда пользователи попадают на ссылку, то они получают понятное описание и стоимость товара, и уже сразу могут перейти на его детальную страницу.

Не делайте так

Можно сделать так

Источник