Содержание

Правила использования ARIA в HTML / Хабр

The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).

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



1. Используйте семантический HTML в пользу ARIA


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

Правило номер один — не пытайтесь использовать ARIA, если в этом нет необходимости. HTML5 предоставляет нам широкий спектр семантических элементов.

Поэтому, по возможности, нам стоит использовать семантический HTML-элемент, а не ARIA-атрибут.

Вместо того, чтобы создавать <div> элемент и добавлять ARIA-роль:

<div role="button">Click Me</div>  

Неправильный подход

Нам следует использовать элемент <button>:

<button>Click Me</button>  

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


Не изменяйте нативную семантику элемента, если вам это не необходимо.

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

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

<h2 role="button">Heading Button</h2>  

Неправильный подход


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

<h2><button>Heading Button</button></h2> 

Предпочтительный подход


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

<h2><span role="button">Heading Button</span></h2>  

3. Интерактивные элементы ARIA должны быть доступны для всех сред


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

Недостаточно использовать ARIA-роль на элементе, чтобы по-настоящему изменить его роль. Если мы попытаемся изменить, например, <div> на <buton>, мы должны вручную добавить возможности взаимодействия, подходящие для кнопки.

В руководстве ARIA имеется список возможностей, которые должен иметь каждый элемент. Например, настоящая кнопка должна удовлетворять следующим требованиям:


  • Должна быть кликабельной с помощью курсора
  • Должна быть кликабельной с помощью клавиши Enter
  • Должна быть кликабельной с помощью клавиши пробела

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


4. Используйте соответствующие роли для видимых фокусируемых элементов


Не используйте role="presentation" или aria-hidden="true" на видимых фокусируемых элементах.

ARIA-атрибут role="presentation" подразумевает, что элемент предназначен для визуального взаимодействия и не является интерактивным. Атрибут aria-hidden="true" говорит о том, что элемент не должен быть видим. Когда мы используем эти атрибуты, нам нужно знать, к каким элементам они применяются и являются ли эти элементы видимыми и интерактивными. Например, обе эти кнопки приведут к тому, что некоторые пользователи будут фокусироваться на элементе, который для них не существует.

<button role="presentation">Click Me</button>  
<button aria-hidden="true">Click Me</button>  

Неправильный подход


Эти атрибуты должны применяться только к элементам, которые не являются интерактивными или являются невидимыми.

<button role="presentation" tabindex="-1">Don't Click Me</button>  
<button aria-hidden="true">Don't Click Me</button>  

5. Интерактивные элементы должны иметь Доступное описание


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

Элементы, с которыми можно взаимодействовать, например кнопки и ссылки, должны иметь «доступное описание».


Доступное описание (accessible name) — имя элемента пользовательского интерфейса.
Очень просто объяснить это на пример кнопки «OK». Текст «OK» — доступное описание (accessible name). (прим. переводчика)

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

(подробнее).

<label>  
  Username
  <input type="text">
</label>

<label for="password">Password</label>  
<input type="password">  

Другие элементы, например кнопки и ссылки, могу получить своё Доступное описание из их контента или label-атрибута (подробнее).

Правила использования ARIA в HTML

От автора: Web Accessibility Initiative Accessible Rich Internet Applications Suite или WAI-ARIA, или просто ARIA – набор инструментов и руководящих принципов по повышению доступности контента и приложений. В частности технология включает набор атрибутов для HTML элементов, которые вставляют в них семантическую информацию, считываемую вспомогательными технологиями.

ARIA может быть очень полезным инструментом, однако нужно знать, как и когда использовать ее. Поэтому я составил 5 правил, которые стоит учесть при использовании ARIA в HTML.

1. Используйте семантический HTML5 вместо ARIA

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

Первое правило использования ARIA в HTML – постарайтесь не использовать ARIA в HTML (если в нем нет крайней необходимости). Есть широкий ряд семантических HTML5 элементов с неявным значением, схожих с явно прописанными значениями через ARIA.

По возможности необходимо использовать семантические HTML элементы вместо ARIA атрибутов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Не создавайте кнопку с помощью div и ARIA роли:

<div role=»button»>Click Me</div>

<div role=»button»>Click Me</div>  

Это неправильно. Нужно использовать тег button:

<button>Click Me</button>

<button>Click Me</button>  

2. Не меняйте значение семантических элементов с помощью ARIA ролей

«Не меняйте нативную семантику, если в этом нет крайней необходимости.»

Как я уже говорил, множество семантических HTML элементов имеют неявно заданные значения. Если мы используем button, например, то юзер агент понимает, что это интерактивный элемент (взаимодействие происходит через клик, клавишу enter или пробел), запускающий некое взаимодействие на странице. С другой стороны, если мы используем тег <a>, юзер агент поймет, что взаимодействие с этим элементом (клик или клавиша enter) приведет на другую страницу или в другую часть страницы.

Множество элементов имеют неявную семантику, которую не рекомендуется менять с помощью ARIA ролей.

<h2 role=»button»>Heading Button</h2>

<h2 role=»button»>Heading Button</h2>  

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

<h2><button>Heading Button</button></h2>

<h2><button>Heading Button</button></h2>

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

<h2><span role=»button»>Heading Button</span></h2>

<h2><span role=»button»>Heading Button</span></h2>  

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

3. Интерактивные ARIA элементы должны быть доступными во всех смыслах

«Все интерактивные ARIA элементы должны иметь управление с клавиатуры.»

ARIA роль на элементе не меняет его смысла. Если нам нужно превратить div в button, необходимо вручную добавить возможности взаимодействия, присущие button.

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

должна нажиматься курсором;

должна нажиматься с помощью клавиши enter;

должна нажиматься с помощью пробела.

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

4. Используйте подходящие роли для видимых элементов с фокусом

«Не используйте role=»presentation» или aria-hidden=»true» на видимых элементах с фокусом.»

ARIA атрибут role=»presentation» указывает, что элемент можно использовать только в визуальных целях, с ним нельзя взаимодействовать. Атрибут aria-hidden=»true» говорит, что элемент должен быть невидимым.

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

<button role=»presentation»>Click Me</button> <button aria-hidden=»true»>Click Me</button>

<button role=»presentation»>Click Me</button>  

<button aria-hidden=»true»>Click Me</button>  

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

<button role=»presentation» tabindex=»-1″>Don’t Click Me</button> <button aria-hidden=»true»>Don’t Click Me</button>

<button role=»presentation» tabindex=»-1″>Don’t Click Me</button>  

<button aria-hidden=»true»>Don’t Click Me</button>  

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

«Все интерактивные элементы должны иметь доступные имена.»

Элементы, с которыми можно взаимодействовать, например, кнопки и ссылки должны иметь «доступные имена». Доступные имена определяются свойством accessible name в Accessibility API. Если значение валидное, значит, имя доступно.

Доступное имя элемента можно задать, исходя из его типа. Например, инпуты формы обычно получают доступное имя из связанного с ними лейбла label (см. добавление лейблов к элементам форм).

<label> Username <input type=»text»> </label> <label for=»password»>Password</label> <input type=»password»>

<label>  

  Username

  <input type=»text»>

</label>

 

<label for=»password»>Password</label>  

<input type=»password»>  

Другие элементы, например, кнопки и ссылки могут получить доступные имена из своего текстового контента или атрибута label (см. HTML для скринридеров).

Источник: //bitsofco.de/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

html — Почему мы используем aria-hidden с иконками

В последнее время я широко использую значки в своем коде, и после большого исследования fa-fa-awesome 4sure стал действительно потрясающим. Но я не могу понять, почему мы используем aria-hidden. Пример для тех, кто не любит читать слова и абзацы:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<i aria-hidden="true"></i>

2

Yazeed Zaid 5 Апр 2020 в 22:34

1 ответ

Лучший ответ

По данным ВОЗ, около 285 миллионов человек во всем мире страдают той или иной слепотой. Для доступа в Интернет они должны использовать программу чтения с экрана. Программы чтения с экрана преобразуют содержимое вашей веб-страницы в речь и позволяют людям с ограниченными возможностями пользоваться Интернетом. Вот почему мы добавляем атрибуты alt к изображениям, чтобы программы чтения с экрана могли генерировать речь на основе тега alt.

Доступные полнофункциональные интернет-приложения (ARIA) (https: // www .w3.org / TR / using-aria /) draft — это способ добавить дополнительную информацию в ваш HTML и помочь различным вспомогательным технологиям (например, программам чтения с экрана) лучше интерпретировать содержание вашей веб-страницы, чтобы они может улучшить обслуживание людей с ограниченными возможностями.

Обычно вспомогательные технологии создают Accessibility Tree для структурирования вашего пользовательского интерфейса вместо обычного DOM Tree. Атрибуты aria- позволяют управлять построением этого Accessibility Tree.

Поскольку значки почти всегда являются чисто декоративными элементами, разумно полностью исключить их из Accessibility Tree. aria-hidden="true" именно этого и добивается. По этой причине он включен в каждый пример <i> — чтобы сделать Интернет более доступным местом.


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

2

domondo 5 Апр 2020 в 20:47

Использование атрибута aria-hidden — доступность

Тираж

Эта страница не завершена.

Этот метод демонстрирует, как использовать атрибут aria-hidden . Атрибут aria-hidden может либо раскрывать, либо скрывать неинтерактивный контент из API специальных возможностей.

Добавление aria-hidden = "true" к элементу удаляет этот элемент и все его дочерние элементы из дерева доступности. Это может улучшить работу пользователей вспомогательных технологий, скрыв:

  • чисто декоративное содержание, такое как значки или изображения
  • дублированный контент, например повторяющийся текст
  • закадровый или свернутый контент, например меню

Согласно четвертому правилу ARIA, aria-hidden = "true" не следует использовать для фокусируемого элемента.Кроме того, поскольку этот атрибут наследуется дочерними элементами элемента, его не следует добавлять к родительскому элементу или предку фокусируемого элемента.

Использование aria-hidden = "false" не будет повторно подвергать элемент вспомогательной технологии, если какой-либо из его родительских элементов указывает aria-hidden = "true".

Выбор между

aria-hidden = "true" , role = "presentation" и role = "none"

На первый взгляд aria-hidden = "true" , role = " Presentation " и role =" none " атрибуты кажутся похожими, потому что они:

  • скрыть контент от вспомогательных технологий
  • нельзя использовать на фокусируемом элементе
  • нельзя использовать для родительского элемента интерактивного элемента

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

  • aria-hidden = "true" удалит весь элемент из API специальных возможностей.
  • role = "presentation" и role = "none" удалит семантическое значение элемента, по-прежнему подвергая его вспомогательным технологиям.

Значения

ложно
(по умолчанию) Элемент предоставляется API специальных возможностей.
правда
Элемент не предоставляется API специальных возможностей.
неопределенный
(по умолчанию) Пользовательский агент определяет, является ли элемент доступным или скрытым от API специальных возможностей.

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

  
  

Дочерние элементы могут быть опущены в API специальных возможностей:

  

Это не скрыто !

aria-hidden = "true" не следует добавлять, если:

  • присутствует атрибут HTML , скрытый
  • элемент или предок элемента скрыт с дисплеем : нет
  • Элемент или предок элемента скрыт с видимостью : скрыто

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

Знай свою ARIA: «Скрытый» против «Нет»

Пример использования aria-hidden = 'true' и role = 'none / presentation' . Каждый из них делает с элементами разные вещи, но разработчики иногда путают их цели.

Что делает

aria-hidden ?

Атрибут aria-hidden указывает, доступен ли элемент доступу API . Если для элемента aria-hidden установлено значение «true», элемент и любые его дочерние элементы, не должны подвергаться доступу API , независимо от того, визуализируется элемент визуально или нет.Установка для атрибута значения «false» должна раскрыть элемент, но, как указано в спецификации ARIA 1.1, могут возникнуть проблемы с использованием aria-hidden = "false . При установке aria-hidden без значения по умолчанию будет использоваться текущее значение. состояние элемента, что означает, что если он в настоящее время открыт для доступности API , то он будет продолжать делать это, где, как если бы элемент не был открыт, он по-прежнему не будет отображаться, если aria-hidden с пустой строкой.

Когда использовать

aria-hidden = "true"

В большинстве случаев, если контент скрывается от пользователей, этот контент должен быть скрыт от всех пользователей. В этих сценариях aria-hidden = "true" может быть не совсем подходящим атрибутом. Например, вместо этого можно использовать CSS, чтобы установить для элемента значение display: none или visibility: hidden . Это позволит визуально скрыть контент, а также уберечь его от обнаружения вспомогательными технологиями.В качестве альтернативы можно использовать атрибут HTML hidden , который будет скрывать контент даже в тех случаях, когда CSS может стать недоступным (например, в режиме чтения в браузере). aria-hidden самого по себе недостаточно, чтобы полностью скрыть элемент от всех пользователей, если это конечная цель.

Например, следующее скрыто для вспомогательных технологий, но не скрыто визуально с использованием только aria-hidden .

  
  

Использование aria-hidden таким образом может сбивать с толку зрячих или слабовидящих пользователей, которые также могут полагаться на вспомогательные технологии. Там явно есть контент … почему его не анонсируют?

Для сравнения, следующие примеры полностью скрыты для всех пользователей:

  

...

...

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

Экземпляры, в которых aria-hidden = "true" следует использовать без визуального скрытия элемента, на котором он установлен, — это когда элемент содержит контент, который можно считать декоративным или дублирующим, по отношению к визуализируемому контенту с одинаковой доступностью на странице.

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

  
  
  Дом

  

Что делают

role = "none" и role = "presentation" ?

Если aria-hidden может использоваться для полного скрытия контента от вспомогательных технологий, изменение роли элемента на «нет» или «презентация» удаляет семантику элемента, но не скрывает контент от вспомогательных технологий . Кроме того, установка одного из этих значений для роли родительского элемента не изменяет семантику любого элемента, который может быть дочерним с измененной ролью , где установка aria-hidden = "true" для родительского элемента приведет к скрыть всех дочерних элементов этого элемента.

Примечание. role = "presentation" и role = "none" предназначены для того же самого. «Нет» — это просто синоним роли , который был введен в ARIA 1.1. Как указано в спецификации ARIA 1.1:

В ARIA 1.1 рабочая группа ввела none как синоним роли презентация из-за путаницы автора в отношении предполагаемого значения слова «презентация» или «презентационный». Многие люди ошибочно считают role = "presentation" синонимом aria-hidden = "true" , и мы полагаем, что role = "none" передает реальное значение более однозначно.

До тех пор, пока реализации не будут включать достаточную поддержку role = "none" , веб-авторам рекомендуется использовать только роль презентации role = "presentation" или избыточно в качестве запасного варианта к роли none role = "none presentation" .

Когда использовать

role = "none / presentation"

В идеале вам не нужно использовать эти роли слишком часто, поскольку они полностью отрицают семантику любого элемента, к которому они прикреплены, и, надеюсь, не используется элемент со значимой семантикой для целей макета (возможно, используйте div вместо?).Но есть вполне законные случаи, когда нужно использовать эти роли, чтобы отрицать семантику, которая может быть неуместной.

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

Чтобы смягчить подобное неправильное использование, из таблиц макетов можно удалить их семантику, установив role = "presentation" в элементы table , что делает такое содержимое (надеюсь) менее запутанным для синтаксического анализа пользователей программ чтения с экрана.

В качестве альтернативы, использование role = "presentation" можно использовать при постепенном улучшении соответственно размеченного шаблона, если JavaScript не доступен, до ожидаемого шаблона для использования в определенных шаблонах ARIA. Например, панель вкладок:

  
  

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

Однако, если неупорядоченный список имеет дочерний элемент li , который затем содержит действующий элемент a , список tablist предназначен только для использования в качестве элемента оболочки, а затем дочерние элементы tab предназначены для выполнения самих действий . Что касается предыдущего примера разметки, это оставляет li s как ненужное и фактически неподходящее для tablist . Но именно здесь role = "presentation / none" становится полезным, так как шаблон разметки можно изменить до следующего:

  
  

При установке role = "presentation" семантика li не отображается, а вкладки открываются для доступа API в ожидаемом формате для списка таблиц .

Подведение итогов

ARIA может быть невероятно полезным в обеспечении доступности документов и интерфейсов, особенно при заполнении семантических пробелов в собственном HTML. Однако нужно снова и снова упоминать, что никакая ARIA лучше плохой ARIA.

Если вы собираетесь использовать ARIA для расширения своего HTML, вам следует обеспечить его правильное использование. Например, ни aria-hidden = "true" , ни role = "presentation" не подходят для скрытия элементов img . Чтобы скрыть изображение от вспомогательных технологий, все, что нужно сделать, это установить для атрибута img alt пустую строку.

Иногда можно просто сделать быстрый шаг назад, чтобы подумать о том, что вы пытаетесь сделать.Для получения дополнительной информации о том, как скрыть контент для всех пользователей, ознакомьтесь с моей предыдущей статьей «Inclusively Hidden».

Accessibility Insights — aria-hidden-focus

Элементы с aria-hidden = "true" не должны содержать фокусируемых элементов.

Почему это важно

В некоторых браузерах атрибут aria-hidden = "true" скрывает элемент и всех его дочерних элементов от вспомогательных технологий. Пользователи по-прежнему могут использовать клавиатуру для перехода к любым дочерним элементам, на которые можно сфокусироваться, но их содержимое недоступно для людей, использующих вспомогательные технологии.Например, программы чтения с экрана молчат. (Элемент является фокусируемым, если он может получать фокус ввода с помощью сценариев, взаимодействия с мышью или табуляции с клавиатуры.)

Как исправить

Убедитесь, что элементы с aria-hidden = "true" не содержат фокусируемых элементов, используя один или больше из следующих методов.

  • Используйте aria-hidden = "true" только для элементов, содержимое которых является декоративным или избыточным с точки зрения людей, использующих вспомогательные технологии.
  • Измените структуру кода, чтобы фокусируемые элементы не были дочерними по отношению к скрытому элементу.
  • При необходимости сделайте дочерние элементы не фокусируемыми (применив атрибут disabled ) или не-tabbable (применив tabindex = "- 1" ).
  • Где необходимо, скрыть элементы от всех пользователей, применив атрибуты hidden , display: none или visibility: hidden .

Пример

Предупреждение отображается за пределами экрана и помечается с помощью aria-hidden = "true" до тех пор, пока оно не понадобится.Однако предупреждение содержит кнопку OK , которая остается доступной для фокусировки, даже если предупреждение скрыто. Пользователи клавиатуры могут перейти к кнопке, но не могут сказать, что это за кнопка.

Когда предупреждение находится за пределами экрана, его кнопка OK обозначается tabindex = "- 1" . Пользователи клавиатуры видят кнопку только тогда, когда на экране отображается предупреждение.

Об этом правиле

Это правило проходит, если выполняется ЛЮБОЕ из следующих условий:

  • Элемент с aria-hidden = "true" не содержит фокусируемых элементов
  • Элемент с aria-hidden = "true" содержит только те элементы, на которые можно сфокусироваться, которые отключены или недоступны для вкладок

Дополнительные примеры

Общие сведения о критерии успеха 4.1.2: Имя, роль, значение Понимание критерия успеха 1.3.1: Информация и взаимосвязи

Скрытие элементов от программ чтения с экрана с помощью aria-hidden

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

Фон

Хотя можно использовать обходной путь только для визуального скрытия элементов, но оставить его там для программ чтения с экрана (см. Скрытие элементов визуально путем их перемещения за пределы экрана), существует специальный атрибут ARIA aria-hidden для скрытия элементов от программ чтения с экрана (но оставив их там визуально).

Использование по назначению

Программа чтения с экрана игнорирует следующий абзац:

  
  

Скрытие элемента с помощью aria-hidden

  

Это содержимое воспринимается программами чтения с экрана.

Категория Результат Дата
Только клавиатура ✔ (пройти) пройти 2018-3-26
NVDA 2018.1 + ФФ Квантум 59.0.2 ✔ (пройти) пройти 2018-3-27
JAWS 2018.3 + IE 11 ✔ (пройти) пройти 2018-3-26
КУСАЧКИ 2018.3 + FF ESR 52.7.3 ✔ (пройти) пройти 2018-3-27

Особенности и побочные эффекты

Все дети скрыты

При установке aria-hidden = "true" для элемента все дочерние элементы также будут скрыты.Это невозможно изменить, установив aria-hidden = "false" для дочернего элемента.

Попытка показать скрытого арию ребенка

    

Не работает на фокусируемых элементах

Вы никогда не должны использовать aria-hidden = "true" для любого элемента, на который можно сфокусироваться, или для любого элемента, который сам содержит дочерние элементы, на которые можно фокусировать.

Это связано с тем, что aria-hidden действительно соблюдается программами чтения с экрана даже на фокусируемых элементах при чтении их в режиме просмотра, но во время использования режима фокусировки, фокусируемые элементы все еще доступны для браузера (с вкладкой key), что приводит к странным (или отсутствующим) объявлениям скрытых элементов.

Скрытие элемента с фокусируемым дочерним элементом

    

Больше не скрыто как описание

Элементы, скрытые с помощью aria-hidden , больше не скрываются при обращении к ним с помощью aria -hibited by .

Элементы, скрытые с помощью aria-hidden, не скрываются при ссылке

  

Следующая ссылка хороша или нет?

Нажмите меня

Эта ссылка хороша.

В режиме фокусировки средство чтения с экрана сообщает о ссылке:

Щелкните меня. Ссылка на сайт. Эта ссылка не очень хорошая.

Но «не» в описывающем абзаце скрыто с помощью aria-hidden . Посмотрите на него в режиме просмотра, и программы чтения с экрана объявят его так:

Отличная ссылка.

Очень запутанный материал.

Использование в реальных условиях (и заключение)

Хотя вы можете использовать aria-hidden = "true" для любого элемента, который не является фокусируемым и не содержит самого фокусируемого элемента, вы никогда не должны использовать его для фокусируемых элементов. Также будьте осторожны, ссылаясь на скрытые элементы, используя aria-describeby .

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

Правило

| Элемент с «aria-hidden» не имеет содержимого для фокусировки

Применимость

Это правило применяется к любому элементу со значением атрибута aria-hidden true .

Примечание: Использование aria-hidden = "false" для потомка элемента с aria-hidden = "true" не раскрывает этот элемент. aria-hidden = "true" скрывает себя и все свое содержимое от вспомогательных технологий.

Ожидание

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

Предположения

В настоящее время нет предположений

Поддержка специальных возможностей

Некоторые пользовательские агенты обрабатывают значение атрибута aria-hidden как чувствительное к регистру.

Фон

Добавляя к элементу aria-hidden = "true" , авторы контента гарантируют, что вспомогательные технологии будут игнорировать элемент. Это можно использовать, чтобы скрыть части веб-страницы, которые являются чистым украшением, например шрифты значков, которые не предназначены для чтения с помощью вспомогательных технологий.

Фокусируемый элемент с aria-hidden = "true" игнорируется как часть порядка чтения, но по-прежнему является частью порядка фокуса, что делает его состояние видимым или скрытым нечетким.

Тестовые наборы

Прошло

Контент по умолчанию недоступен.

    

Контент скрыт через CSS.

    

Контент взят из последовательного фокуса с использованием tabindex .

    

Контент стал нефокусируемым с помощью отключенного атрибута .

  <ввод отключен aria-hidden = "true" />  

aria-hidden нельзя сбросить, если для предка установлено значение true.

    

Контент взят из последовательного фокуса с использованием tabindex .

    

Ошибка

Фокусируемая ссылка вне экрана.

    

Фокусируемое поле формы, неправильно отключено.

    

aria-hidden нельзя сбросить, если для предка установлено значение true.

    

Контент, доступный для фокусировки, через tabindex .

    

Фокусируемый сводный элемент .

  <подробности aria-hidden = "true">
 Какая-то кнопка 

Немного подробностей

неприменимо

Игнорировать aria-hidden с нулевым значением.

    

Игнорировать aria-hidden false.

  

Немного текста

Неверное значение aria-hidden .

  

Немного текста

Этот раздел не является частью официального правила. Он заполняется динамически и не учитывается в истории изменений или дате последнего изменения. Этот раздел не будет включен в правило при его публикации на веб-сайте W3C.

Скрытие и обновление содержимого | Основы Интернета | Разработчики Google

Меггин — технический писатель

Дэйв — технический писатель

Алиса является соавтором Web Fundamentals

скрытая ария

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

Во-первых, все, что явно скрыто от DOM, также не будет включено в дереве доступности. Итак, все, что имеет стиль CSS с видимостью : скрытый или отображение: нет или использует HTML5 скрытый атрибут также будет скрыто от пользователей вспомогательных технологий.

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

  .sr-only {
  позиция: абсолютная;
  слева: -10000 пикселей;
  ширина: 1 пикс;
  высота: 1 пикс;
  переполнение: скрыто;
}
  

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

См. Эту статью WebAIM о методах сокрытия текст для получения дополнительной информации о создании текста «только для чтения с экрана».

Наконец, ARIA предоставляет механизм исключения контента из вспомогательных технология, которая не скрывается визуально, с использованием атрибута aria-hidden . Применение этого атрибута к элементу эффективно удаляет его и все его потомки из дерева доступности. Единственное исключение — элементы обозначается атрибутом aria-labelledby или aria -formedby .

  
Ежеквартальные продажи

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

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

ария-лайв

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

Например, живой регион может быть статусным сообщением, которое появляется в результате действие пользователя.Если сообщение достаточно важно, чтобы его мог уловить зрячий пользователь внимание, достаточно важно направить пользователя вспомогательных технологий обратите на это внимание, установив для него атрибут aria-live . Сравните этот простой div

  
Ваше сообщение отправлено.

со своим «живым» аналогом.

  
Ваше сообщение отправлено.

aria-live имеет три допустимых значения: вежливый , напористый и off .

  • aria-live = "polite" сообщает вспомогательным технологиям, что нужно предупреждать пользователя об этом. измениться, когда он закончит то, что делает в данный момент. Это здорово использовать если что-то важно, но не срочно, и составляет большую часть aria-live использовать.
  • aria-live = "assertive" сообщает вспомогательным технологиям, чтобы они прерывались действия и немедленно предупредить пользователя об этом изменении. Это только для важные и срочные обновления, такие как статусное сообщение типа «Произошло ошибка сервера и ваши изменения не сохраняются; пожалуйста, обновите страницу », или обновления поля ввода как прямой результат действия пользователя, например кнопки на шаговом виджете.
  • aria-live = "off" предписывает вспомогательным технологиям временно приостановить работу aria-live прерывания.

Есть несколько уловок, чтобы убедиться, что ваши живые регионы работают правильно.

Во-первых, ваш регион aria-live , вероятно, должен быть установлен при начальной загрузке страницы. Это не жесткое правило, но если у вас возникли трудности с aria-live регион, это может быть проблемой.

Во-вторых, разные программы чтения с экрана по-разному реагируют на разные типы изменения.Например, на некоторых программах чтения с экрана можно активировать предупреждение. путем переключения стиля hidden дочернего элемента с true на false.

Другие атрибуты, которые работают с aria-live , помогут вам точно настроить то, что сообщается пользователю при изменении живого региона.

aria-atomic указывает, следует ли рассматривать весь регион как целиком при передаче обновлений. Например, если виджет даты, состоящий из день, месяц и год имеют aria-live = true и aria-atomic = true , а пользователь использует шаговый элемент управления для изменения значения только месяца, все содержимое виджета даты будет считано снова. Значение aria-atomic может быть истинным или false (по умолчанию).

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

  • добавлений , что означает, что любой элемент, добавляемый в живую область, значительный. Например, добавление диапазона к существующему журналу статуса сообщения будут означать, что диапазон будет объявлен пользователю (при условии, что что aria-atomic было ложным ).
  • текст , что означает, что текстовое содержимое, добавляемое к любому дочернему узлу, уместным. Например, изменение свойства textContent настраиваемого текстового поля прочитает измененный текст пользователю.
  • удаления , что означает, что удаление любого текста или узлов-потомков должно быть переданы пользователю.
  • все , что означает, что все изменения актуальны. Однако значение по умолчанию для , имеющий отношение к арии — это текст дополнений , что означает, что если вы не укажете , относящийся к aria , он будет обновлять пользователя для любого добавления к элементу, что вы, скорее всего, захотите.

Наконец, aria-busy позволяет уведомлять вспомогательные технологии о том, что они должны временно игнорировать изменения элемента, например, когда что-то загружается. Один раз все на месте, aria-busy должен быть установлен в false, чтобы нормализовать читательская операция.

Обратная связь

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

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

У него была необходимая мне информация

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

Имеет точную информацию

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

Легко читалось

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

Что-то еще

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

Что было самым плохим на этой странице?

Это не помогло мне выполнить мои цели

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

Отсутствовала необходимая мне информация

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

Имеет неточную информацию

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

Трудно было прочитать

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

Что-то еще

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

ARIA Hidden — цифровое выравнивание

Появилось ли предупреждение «ARIA hidden» при аудите Accessibility Checker одной из ваших записей или страниц WordPress? Ниже вы найдете объяснение этого предупреждения, его влияние на доступность вашего веб-сайта и способы его устранения.

О скрытом предупреждении ARIA

Что такое ARIA?

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

Атрибуты

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

Подробнее об ARIA можно узнать на странице документации разработчика Mozilla.

Что означает предупреждение ARIA Hidden?

Предупреждение ARIA Hidden отображается в средстве проверки читаемости, когда содержимое вашего сообщения или страницы было скрыто с помощью атрибута aria-hidden = "true" .

Что такое ARIA Hidden?

Добавление aria-hidden = "true" к элементу HTML удаляет этот элемент и все элементы, вложенные в него, так что он не отображается и не объявляется пользователям вспомогательных технологий, таких как программы чтения с экрана.

Как средство проверки доступности тестирует ARIA Hidden?

При аудите вашей страницы или содержимого публикации средство проверки доступности будет проверять все элементы, включая те, которые имеют явные атрибуты ARIA. Если будет найден атрибут aria-hidden = "true" , он будет помечен для вашего просмотра.

Влияние на доступность

Использование скрытого ARIA может сделать контент более доступным

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

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

Когда скрытие ARIA проблематично

Хотя aria-hidden = "true" может быть полезным в некоторых случаях использования, в других случаях его не следует использовать, поскольку он удаляет необходимые функции с вашей веб-страницы.

Если важное содержимое, такое как элементы управления формы или ссылки, скрыто с помощью атрибута ARIA, это содержимое не будет найдено с помощью средства чтения с экрана. Это может помешать пользователям программ чтения с экрана получить доступ к важной информации и взаимодействовать с навигационными элементами на вашем веб-сайте, если скрытый ARIA используется неправильно. Соответственно, четвертое правило ARIA гласит, что aria-hidden = "true" не следует использовать ни для каких фокусируемых элементов.

Кроме того, важно отметить, что aria-hidden = "true" скрывает как элемент, к которому он применяется, так и все его дочерние элементы.Использование aria-hidden = "false" не будет повторно подвергать элемент вспомогательной технологии, если какой-либо из его родительских элементов указывает aria-hidden = "true" .

Соответствующие критерии успеха WCAG 2.1

4.1.2 Имя, роль, значение — уровень A

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

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

Как устранить скрытое предупреждение ARIA

Что делать (вкратце)

Сначала установите бесплатный плагин Accessibility Checker WordPress.

Для каждого предупреждения ARIA Hidden, помеченного на вашей странице, оцените элемент и определите, действительно ли правильно скрыть элемент от пользователей вспомогательных технологий. Если уместно скрыть элемент, то вы можете спокойно «проигнорировать» предупреждение. Если скрывать элемент нецелесообразно, вам нужно будет удалить aria-hidden = "true" из кода элемента.

Как найти скрытые элементы ARIA в вашем сообщении или странице WordPress

Для любых страниц или сообщений, которые имеют предупреждение ARIA Hidden в редакторе WordPress, вы можете открыть вкладку с подробностями в мета-поле Accessibility Checker, затем развернуть предупреждение ARIA Hidden, чтобы увидеть список кода, который вызывал пометку предупреждения.

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

Как оценить скрытые предупреждения ARIA на предмет потенциальных проблем

В примере, показанном выше, есть два элемента, на которых указано aria-hidden = "true" — div и абзац. Это точный код, который помечается:

    

и

    

Если бы это был ваш веб-сайт, вам нужно было бы посмотреть на эти две строки кода и определить, действительно ли элементы должны быть скрыты от пользователей вспомогательных технологий. По каждому пункту задайте себе следующие вопросы:

  • Это чисто декоративный предмет?
  • Содержимое дублируется или повторяется?
  • Элемент находится за кадром или свернут?
  • Я не хочу показывать эту информацию людям, использующим программы чтения с экрана или другие вспомогательные технологии?

Если ответ на все вышеперечисленные вопросы утвердительный, значит, скрытый ARIA был использован правильно, и вы можете спокойно игнорировать предупреждение в средстве проверки читаемости.В противном случае вам, вероятно, потребуется удалить aria-hidden = "true" из вашего HTML.

В приведенных выше примерах мы рассматриваем первый элемент, который является разделительным блоком WordPress, чисто декоративным и примером элемента, который должен быть скрыт от пользователей вспомогательных технологий. Для этого элемента мы проигнорируем предупреждение в программе проверки читаемости. Второй элемент, который является абзацем, скорее всего, является неправильно скрытым элементом, и из его кода необходимо удалить aria-hidden = "true «.

Примечание о проблемах ARIA и плагинах WordPress

В зависимости от того, как вы добавляете контент на свой веб-сайт WordPress, вполне вероятно, что вы можете столкнуться с неправильно добавленным скрытым атрибутом ARIA, который вставляется в вашу публикацию или страницу сторонним плагином. В этом случае вы, вероятно, не сможете удалить aria-hidden = "true" и исправить ошибку.