Aria hidden: html — Как работает Aria-hidden

Правила использования 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>

<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>

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

<button>Click Me</button>

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

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

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

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

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

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

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

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

<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» 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 (см. 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" удалит весь элемент из API специальных возможностей.
• role = "presentation" и role = "none" удалит семантическое значение элемента, по-прежнему подвергая его вспомогательным технологиям.

Значения

ложно

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

правда

Элемент не предоставляется API специальных возможностей.

неопределенный

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

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

  

  Некоторые вещи лучше оставить недосказанными.

  

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

  

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

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

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

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

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

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

Что делает

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

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

В большинстве случаев, если контент скрывается от пользователей, этот контент должен быть скрыт от всех пользователей. В этих сценариях 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 или шрифта вместе с визуально визуализированным текстом. Значок в этой ситуации будет дублировать текст, поэтому его лучше скрыть для вспомогательных технологий.

  
   
  Дом

  

Что делают

Если 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" .

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

В идеале вам не нужно использовать эти роли слишком часто, поскольку они полностью отрицают семантику любого элемента, к которому они прикреплены, и, надеюсь, не используется элемент со значимой семантикой для целей макета (возможно, используйте 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" содержит только те элементы, на которые можно сфокусироваться, которые отключены или недоступны для вкладок

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

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

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

Фон

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

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

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

  

  Привет, народ!

  

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

  

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


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

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

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

При установке 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, чтобы нормализовать читательская операция.

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

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

Есть

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

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

  
 Lorem ipsum dolor sit amet, следовательно, adipiscing elit, sed diam nonummy nibh euismod laoreet.