Aria 標籤和關係

Введение

Не секрет, что сегодняшние сайты становятся все более сложными. Веб-страницы теперь больше напоминают динамические, живые приложения. Разработчики комбинируют и оформляют элементы HTML для создания новых пользовательских интерфейсов. Однако пользователям с ограниченными возможностями может быть непросто разобраться в этом новом мире.


Одним из инструментов, разработанных для решения этой проблемы, является ARIA. Сокращенно от Accessible Rich Internet Applications (Доступные многофункциональные интернет-приложений), ARIA — это подмножество атрибутов HTML (обычно с префиксом aria-), которые изменяют то, как вспомогательные программы, такие как программы чтения с экрана, распознают ваши страницы.

К сожалению, разработчики часто неправильно понимают ARIA и применяют ее неправильно, что ведет к ухудшению работы пользователей с ограниченными возможностями. В 2017 году ресурс веб-доступности WebAIM сообщил:

Самый сильный индикатор того, что страница будет иметь множество ошибок доступности, — это наличие ARIA. Страницы с ARIA имеют на 65% больше проблем, чем без него. И это становится все хуже. Это ОЧЕНЬ тревожно!

Отчет WebAIM показывает нам, что более сложные страницы и использование библиотек и структур могут привести как к большему количеству ситуаций, требующих ARIA, так и к большему количеству ошибок. Таким образом, кажется, что у разработчиков нет понимания того, что такое ARIA и как ее следует использовать.

Это может быть связано с тем, что , каждый из которых имеет свои (правда, иногда нишевые) варианты использования. Это так же делать ARIA сложным для понимания.

Кроме того, ARIA не всегда полноценно описывается в документацию по веб-разработке. Кажется что его часто используют для того чтобы сделать элемент «более доступным». Мой друг признался, что скопировал ARIA из примера кода, потому что пример из документации включал его. Но не понимая что именно делает ARIA, разработчики вполне разумно могут предположить, что больше ARIA означает лучшую доступность.

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

Описание

Нативный HTML checkbox  элемент управления может находиться только в двух состояниях отмеченности — «отмечен» или «не отмечен», с  состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с   может находиться в трех состояниях, обозначенных через  атрибут: , , or .

Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут . Ожидаемый способ активации чекбокса при помощи клавиатуры — Пробел .

Разработчику необходимо динамически изменять значение атрибута  при активации чекбокса.

Связанные WAI-ARIA Роли, Состояния, и Свойства

aria-checked

Значение  определяет состояние чекбокса. Этот атрибут может принимать одно из трех значений:

    Чекбокс отмечен     Чекбокс не отмечен     Чекбокс частично отмечен, или в неопределенном состоянии

tabindex=»0″
Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.

Необходимый JavaScript

Необходимый обработчики событий

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

Примеры

Пример ниже создает простой чекбокс, используя CSS и JavaScript для обработкиотмеченного и неотмеченного состояний элемента.

HTML

<span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
   tabindex="0" aria-labelledby="chk1-label"></span> 
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Запомнить мои предпочтения</label>

CSS

 {
    padding:5px;
}

::before {
    content: "";
}

::before {
    content: "";
}

JavaScript

function changeCheckbox(event) {
    let item = document.getElementById('chkPref');
    switch(item.getAttribute('aria-checked')) {
        case "true":
            item.setAttribute('aria-checked', "false");
            break;
        case "false":
            item.setAttribute('aria-checked', "true");
            break;
    }
}

Introduction

This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in HTML5, it especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

This document provides advice for use of ARIA attributes in [].

For general best-practice information about using ARIA, see the [] document.

The following is a longer list of resources that provide relevant information:

Web developer requirements for use of ARIA in HTML

Web developers MAY use the ARIA and attributes on , in accordance with the requirements described in [], except where these conflict with the or are equal to the of a given HTML element. These constraints are intended to prevent developers from making assistive technology products report nonsensical user interface (UI) information that does not represent the actual UI of the document.

Web developers MUST NOT use the ARIA and attributes in a manner that conflicts with the semantics described in the table. It is NOT RECOMMENDED for web developers to set the ARIA and attributes to values that match the defined in the table. Doing so is unnecessary and can potentially lead to unintended consequences.

Используйте меньше ARIA.

Спецификации ARIA Консорциума World Wide Web предоставляют . Первое правило можно прочитать как «не используйте ARIA», как это сделали некоторые, но это не совсем так. Правило звучит так:

Другими словами, ARIA должна быть инструментом в вашем арсенале, но она не должна быть первым инструментом, к которому вы обращаетесь. Вместо этого используйте семантику элементов, где это возможно. В нашем примере с переключателем это может выглядеть следующим образом (мы можем использовать встроенный checkbox и вообще не использовать ARIA):

<div id="container">
    <label class="toggle-switch-semantic">
        <span class="visually-hidden">
            Use dark mode
        </span>
        <input
            type="checkbox"
            class="visually-hidden"
        />
        <span class="toggle-switch">
            <span class="toggle-knob"></span>
        </span>
    </label>
    <div>
        Dark mode is <span class="status">off</span>
    </div>
</div>
.visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}
.toggle-switch, .toggle-switch .toggle-knob {
    transition: all 0.2s ease-in;
}
.toggle-switch {
    height: 90px;
    width: 165px;
    display: inline-block;
    background-color: #333333;
    margin: 6px;
    margin-bottom: 15px;
    border-radius: 90px;
    cursor: pointer;
    text-align: left;
}
.toggle-switch .toggle-knob {
    width: 84px;
    height: 78px;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 78px;
    margin: 6px 9px;
}
.toggle-switch.active {
    background-color: #f31455;
}
.toggle-switch.active .toggle-knob {
    margin-left: 72px;
}
/* Focus styles */
.toggle-switch-semantic input:focus + .toggle-switch .toggle-knob {
    box-shadow: 0px 0px 5px 5px #229abf;
}
const toggleCheckbox = document.querySelector('.toggle-switch-semantic input');
const toggler = document.querySelector('.toggle-switch');
const switchStatus = document.querySelector('.status');
let switchIsActive = false;
// Вызывается всякий раз, когда вы нажимаете на переключатель
function handleChange() {
    // Заставляет страницу переключаться между светлым и темным режимом
    document.body.classList.toggle('dark-mode');
    // Вызывает тумблер, чтобы изменить внешний вид
    toggler.classList.toggle('active');
    // Изменяет содержание статуса
    switchIsActive = !switchIsActive;
    switchStatus.innerHTML = switchIsActive ? 'on' : 'off';
}
toggleCheckbox.onchange = handleChange;

Почему мы должны использовать семантическую разметку вместо ARIA? Вот несколько причин:

  • Семантические элементы предоставляют функциональность и предоставляют доступ к свойствам бесплатно, из коробки. Это гарантирует пользователям надежный и знакомый опыт работы в Интернете. Например, с помощью нашего семантического переключателя нам не нужно было добавлять табуляции или ключевые события.
  • Семантическая разметка обеспечивает прогрессивное улучшение, что означает, что ваша страница является умеренно функциональной, даже если ресурсы CSS или JavaScript не будут работать. Наш семантический переключатель по крайней мере предоставит флажок со стилями по умолчанию.
  • Некоторые вспомогательные программы не поддерживают использования дерева доступности, поэтому эти инструменты могут не поддерживать ARIA.

Мне действительно нравится, как выразилась Кэтлин МакМэхон. Если веб-разработка похожа на приготовление пищи, то семантические элементы — это ваши высококачественные ингредиенты. Атрибуты ARIA — это ваши приправы. Готовьте с ними, во что бы то ни стало, но вам нужно только небольшое их количество.

Using aria-labelledby to expose placeholder text to screen readers that don’t support it.

There is no right or wrong answer on this. Yes some screen readers do not expose this information and others do, no matter what you do you are going to give a less than optimal experience for some users.

I would stick with the way you have done it, better to have some users hear information twice than not at all.

However you could argue that because you have exposed the hint information correctly in point 1, the second bit of information is then not necessary so could be removed, leaving it in place as a placeholder for those screen readers that do read it.

What you could do is include the information within your ‘tip’ at the end «Tip: Please enter your legal first name. (e.g. Andrew)»

Going to the extreme here, not sure whether you should use «e.g.» or «Ex:» for example, I will go do some research as I always use «e.g.» but you made me think.

Свернуть или развернуть всё#

Поскольку мы переключаем элемент через атрибут , нужно элементарно дать пользователям возможность развернуть или свернуть всё сразу. Одним из преимуществ такой меры является то, что пользователи, которые открыли несколько разделов независимо друг от друга, могут «сбросить» исходное, свёрнутое состояние для лучшей видимости содержимого. К тому же пользователи, которые считают, что возня с интерактивными элементами отвлекает или утомляет, могут вернуться к прокрутке раскрытых секций.

Кажется заманчивым добавить «развернуть или свернуть всё» как два отдельных переключателя. Но мы не знаем, как много разделов будет изначально в другом состоянии. Мы также не знаем, сколько их пользователь открыл или закрыл вручную.


Поэтому нам нужно сгруппировать два альтернативных контрола.

Важно объединить в группу связанные контролы, и списки — это стандартная разметка для того, чтобы это сделать. Кроме того списки ссылок рассматривались в «Меню и кнопки меню» (всё ещё есть перевод на русский. — прим

переводчика). Списки и элементы списков подсказывают пользователям скринридеров о том, что они взаимодействуют со связанными элементами, и количество таких элементов.

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

Так как в тег уже встроен «групповой» элемент (group element), то многие вспомогательные технологии знают, что групповая подпись добавляется при помощи . Когда пользователи VoiceOver попадут в список и сделают фокус на кнопке, то услышат: «Развернуть всё, кнопка, список, контролы секции, два пункта».

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

В этом случае, вероятно, будет достаточно расположить кнопки рядом с разделами, но нужно это протестировать.

Подводные камни

Помимо вышеупомянутых проблем с и , есть еще несколько, которые следует отметить:

Не используйте display: none для диалогов

В iOS Safari + VoiceOver, если для элемента изначально установлено свойство , то программа не будет фокусироваться на нем, даже если установить фокус из скрипта. Для обхода этой ошибки следует использовать для неактивного состояния и для отображения диалога. Поскольку модальное окно в большинстве случаев имеет (или ), оно не будет занимать физическое пространство в потоке DOM-элементов, можно использовать без опасения.

При использовании атрибута для скрытия модальных окон по умолчанию (это гарантирует, что если CSS вдруг отвалится, диалоги не станут видимыми), можно изменить CSS следующим образом:

CSS

{ display: block; visibility: hidden; }

1 2 3 4 5 6

{

displayblock;

visibilityhidden;

}  

отменяет дефолтное значение none, а скрывает диалог более выгодным способом.

Чрезмерно подробные объявления NVDA

При тестировании с NVDA установка фокуса на не фокусируемый элемент (например, заголовок с ) может привести к многократному объявлению этого элемента и содержимого диалогового окна.

Установка фокуса на первый фокусируемый элемент модального окна может привести к несогласованности и плохому пользовательскому опыту (например, если первый фокусируемый элемент — это кнопка «закрыть» в конце объемного диалога, или поле ввода в середине, то предшествующий контент может быть упущен). Лучше просто сфокусироваться на самом диалоговом окне и позволить пользователю ориентироваться самому.

В IE11 заголовок модального окна должен быть его первым элементом

Первым элементом диалога должен быть заголовок (с доступным именем). Это необходимо для связки . Установка фокуса на окно приведет к объявлению его имени и роли, а затем JAWS повторно объявит имя и роль первого дочернего элемента.

Например, если заголовок диалогового окна предоставляет его имя, то объявит . Однако, если первым идет другой элемент, например, кнопка с текстом «закрыть», он будет объявлен как: .

NVDA не объявляет роль диалогового окна, когда оно получает фокус

NVDA не объявляет роль диалогового окна, если фокус установлен на сам элемент окна. Например, в NVDA + IE11 будет объявлено только имя. В связке с Firefox или Chrome будет объявлено имя диалога, а затем его содержимое.

3 ответа

Решение

Это атрибут, призванный помочь вспомогательным технологиям (например, программам чтения с экрана) прикрепить метку к анонимному HTML-элементу.

Так что есть элемент:

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

делает то же самое, но это для тех случаев, когда нецелесообразно или нежелательно иметь на экране. Возьмите пример MDN:

Большинство людей смогут визуально сделать вывод, что эта кнопка закроет диалог. Слепой человек, использующий вспомогательные технологии, может просто услышать, как «Х» читается вслух, что не имеет большого значения без визуальных подсказок. явно говорит им, что будет делать кнопка.

269


2014-02-26 11:50

В приведенном вами примере вы совершенно правы, вам нужно установить атрибут title.

Если это инструмент, используемый вспомогательными технологиями (например, программами чтения с экрана), он не поддерживается в браузерах и не влияет на них. Это не окажет никакой помощи большинству людей, на которых ориентируется WCAG (кроме пользователей программ чтения с экрана), например человеку с ограниченными интеллектуальными возможностями.

Буква «Х» не является достаточной для предоставления информации о действии, выполняемом кнопкой (подумайте о ком-то, кто не знает компьютер). Это может означать «закрыть», «удалить», «отменить», «уменьшить», странный крест, каракули, ничего.

Несмотря на то, что W3C, кажется, продвигает скорее что Атрибут здесь: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 В аналогичном примере вы можете увидеть, что поддержка технологии не включает стандартные браузеры: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria

по факту , в этой конкретной ситуации может использоваться, чтобы дать больше контекста к действию:

Например, слепые люди не воспринимают всплывающие окна, как у нас с хорошим зрением, это похоже на изменение контекста

«Назад на страницу» будет более удобной альтернативой для программы чтения с экрана, когда «Закрыть» более важно для тех, у кого нет программы чтения с экрана

36

2015-09-14 08:10

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

Создайте HTML-страницу с кодом ниже

Теперь вам нужен эмулятор чтения с виртуального экрана, который будет запускаться в браузере, чтобы увидеть разницу. Таким образом, пользователи браузера Chrome могут установить расширение Chromevox, а пользователи Mozilla могут использовать расширение для чтения с клыков.

Закончив установку, вставьте наушники в уши, откройте HTML-страницу и сфокусируйтесь на обеих кнопках (нажимая клавишу Tab) по очереди… и вы услышите… фокусируясь на .. скажу вам только .. но в случае .. ты услышишь только..

Надеюсь, ты хорошо выздоровел!

18

2016-05-30 13:29

Необходимое условие:

Aria используется для улучшения работы пользователей с нарушениями зрения. Пользователи с нарушениями зрения перемещаются по приложению, используя программное обеспечение для чтения с экрана, такое как JAWS, NVDA,… Во время навигации по приложению программное обеспечение для чтения с экрана объявляет пользователям контент. Aria может использоваться для добавления контента в код, который помогает пользователям программы чтения с экрана понимать роль, состояние, метку и назначение элемента управления.

Ария ничего не меняет визуально. (Ария тоже боится дизайнеров).

ария-этикетка

Атрибут aria-label используется для передачи метки пользователям программы чтения с экрана. Обычно в поле ввода поиска отсутствует визуальная метка (спасибо дизайнерам). aria-label может использоваться для передачи метки управления пользователям программы чтения с экрана


Как пользоваться:

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

ария-labelledby

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

Подход 1:

Подход 2:

aria-labelledby также может использоваться для объединения двух меток для пользователей программ чтения с экрана

1

2019-04-26 18:01

Примечание. Это всё ARIA-кнопка?#

Да конечно. Нам не нужно добавлять , так как элементу неявно задана эта роль (ARIA-роль всего лишь имитирует роль по умолчанию). И, в отличие от кнопки меню (есть в переводе на русский. — прим. переводчика), нам не нужно сразу же менять контекст при перемещении фокуса. Следовательно, в данном случае не подходит.

Некоторые добавляют атрибут и указывают для контейнера, в котором хранится контент. Имейте в виду, что атрибут работает только в JAWS на момент написания этой статьи (на момент перевода в октябре 2019 года ситуация не изменилась. — прим. переводчика). Пока контент в разделе следует за заголовком или кнопкой в исходном порядке (source order), это не нужно. Пользователь будет сразу же сталкиваться с раскрытым контентом, когда перемещается дальше по странице.

Стилизация кнопки

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

Отлично, однако сейчас кнопка интуитивно не понятна (affordance). Она не выглядит так, будто её можно активировать. Именно здесь обычно добавляется символ плюс или минус. Плюс означает, что раздел может быть развёрнут, а минус, что его можно свернуть.

Теперь возникает такой вопрос: как нам рендерить иконку? Ответ: максимально эффективно и доступно. Простые формы, например, прямоугольники () — это хороший способ создания иконок в SVG, поэтому давайте это сделаем.

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

  • скрывает SVG-иконку от скринридеров и других вспомогательных технологий.
  • решает проблему добавления фокуса по умолчанию для SVG-файлов в Internet Explorer и Edge.

Обратите внимание на класс для прямоугольника, который представляет собой вертикальную конструкцию. Мы собираемся с помощью CSS показывать и скрывать его в зависимости от состояния, превращая иконку то в плюс, то в минус

Связывание состояния и его визуального представления — очень хорошая практика. Это гарантия того, что сообщение об изменении состояния совместимо с разными системами. Не слушайте тех, кто выступает за абсолютное разделение HTML-семантики и CSS-стилей. Форма должна следовать за функцией, и такое решение напрямую более надёжно.

Обратите внимание, что стиль фокуса по умолчанию был сброшен при помощи. Можно объявить стиль фокуса для SVG следующим образом:

Высококонтрастные темы

Ещё одна вещь: мы можем обеспечить поддержку высококонтрастных тем для элементов . Если указать в значение для , то такие элементы изменяют цвет вместе с текстом, когда на него влияет изменение темы.

Чтобы протестировать ваш дизайн в высококонтрастной теме в Windows найдите «Высокая контрастность» и выберете нужную тему в пункте «Выбор темы». Многие высококонтрастные темы инвертируют цвета для уменьшения яркости. Это помогает людям, страдающим мигренью или светобоязнью, а также людям с нарушениями зрения.

Привязка open и aria-expanded#

Когда значение атрибута меняется с на мы хотим, чтобы было также видно переключение контента. Используя и , мы можем сделать это напрямую. Разместим этот код после конструктора компонента:

  • получает массив всех атрибутов родительского , которые мы хотим увидеть.
  • позволяет нам выполнять нашу функцию в случае изменения значения .

Преимущество такого подхода в том, что мы можем переключать состояние, используя скрипт, который просто изменяет значение за пределами компонента. Чтобы пользователи могли изменить состояние, мы можем просто перебросить в функцию клика:

Так как функция увеличивает значение , то мы привязали к , убедившись в доступности изменения состояния.

Вот демо с CodePen с этой версией веб-компонента с комментариями:

Не изменяйте значения семантических элементов ARIA-ролями

Как я уже замечала, многие семантические HTML-элементы имеют свой смысл. Когда мы используем , например, это указывает юзер-агентам, что это — интерактивный элемент (с ним можно взаимодействовать при помощи клика мыши, клавиши Enter или пробела), что вызовет какое-либо действие на странице. С другой стороны, если мы используем элемент , это указывает юзер-агентам, что интерактивное взаимодействие с таким элементом (посредством клика или нажатии клавиши) приведёт к тому, что пользователь будет направлен на другую страницу или в другую часть этой же самой страницы.

Вместо переопределения семантического значения элемента, нам следует использовать соответствующий элемент:

Или, в крайнем случае, мы можем добавить ARIA-роль к элементу, который не несет такого смысла.


С этим читают