Element: ariaHidden property

The ariaHidden property of the Element interface reflects the value of the aria-hidden ) attribute, which indicates whether the element is exposed to an accessibility API.

Value

A string with one of the following values:

The element is hidden from the accessibility API.

The element is exposed to the accessibility API as if it were rendered.

The element’s hidden state is determined by the user agent based on whether it is rendered.

Examples

In this example the aria-hidden attribute on the element with an ID of hidden is set to «true». Using ariaHidden we update the value to «false».

div id="hidden" aria-hidden="true">Some things are better left unsaid.div> 

let el = document.getElementById("hidden"); console.log(el.ariaHidden); // true el.ariaHidden = "false"; console.log(el.ariaHidden); // false 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

aria — hidden

Атрибут для скрытия элементов от вспомогательных технологий.

Время чтения: меньше 5 мин

Кратко

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

Глобальное состояние из WAI-ARIA в котором элемент скрыт от вспомогательных технологий, но виден всем остальным пользователям.

Пример

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

   logout Выйти из аккаунта  button class="button button-aqua"> span class="material-symbols-outlined" aria-hidden="true">logoutspan> span class="visually-hidden">Выйти из аккаунтаspan> button>    Скопировать Скопировано Не удалось скопировать   

Как пишется

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

Добавьте к тегу aria — hidden с одним из значений:

• false — элемент виден вспомогательным технологиям.
• true — элемент скрыт от вспомогательных технологий.
• undefined (по умолчанию) — браузер сам определяет скрыт элемент или нет в зависимости от его стилей и видимости на странице.

Как это понять

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

Используйте aria — hidden , когда элемент надо скрыть только от пользователей вспомогательных технологий. Типичные ситуации:

• избыточный или дублирующийся текст;
• декоративный контент — иконочный шрифт или Unicode-символы в элементах управления;
• временно скрытые или свёрнутые элементы, например, выпадающее меню.

aria — hidden можно применять ко всем неинтерактивным элементам, которые не скрыты другими способами:

Подсказки

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

💡 Хорошая практика — текстовый эквивалент для скрытого контента. Идеально, если он доступен и для зрячих пользователей. Особенно тексты в контролах полезны для пользователей программ голосового управления.

💡 Если внутри неинтерактивного элемента с aria — hidden = «true» есть интерактивные, то они скроются не во всех браузерах и не от всех скринридеров.

💡 Когда используете aria — hidden для скрытия и показа элементов с помощью JavaScript, рекомендуется не прописывать aria — hidden = «true» в разметке. Если скрипт не сработает, такие элементы всегда будут скрыты от скринридеров.

На собеседовании

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

Какая разница между hidden , aria — hidden = «true» , role = «presentation» и role = «none» ?

Скопировать ссылку «Какая разница между hidden, aria-hidden=»true», role=»presentation» и role=»none»?» Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Don't Click Me Don't Click Me 

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

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

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

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

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

Источник

aria-hidden

The aria-hidden state indicates whether the element is exposed to an accessibility API.

Description

The aria-hidden attribute can be used to hide non-interactive content from the accessibility API.

Adding aria-hidden=»true» to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:

• Purely decorative content, such as icons or images
• Duplicated content, such as repeated text
• Offscreen or collapsed content, such as menus

The presence of the aria-hidden attribute hides content from assistive technology but doesn’t visually hide anything.

aria-hidden=»true» should not be used on elements that can receive focus. Additionally, since this attribute is inherited by an element’s children, it should not be added onto the parent or ancestor of a focusable element.

Warning: Do not use aria-hidden=»true» on focusable elements.

An element’s hidden status is based on whether it is rendered. Rendering is usually controlled by CSS. For example, an element whose display property is set to none via CSS is not rendered. An element is considered hidden if it, or any of its ancestors are not rendered or have their aria-hidden attribute value set to true. Note that an element and its children that has aria-hidden=»true» declared on it will still be visible, unless also hidden by CSS.

Use caution when using aria-hidden to hide visibly rendered content from assistive technologies. You should not be hiding visible content unless doing so improves the experience for users of assistive technologies by removing redundant or extraneous content. Only when identical or equivalent meaning and functionality is exposed to assistive technologies can removing visible content from the accessibility API be considered.

Note: Consider all disabilities when hiding visibly rendered content from assistive technologies. Not all users of assistive technology are visually impaired. If visible content doesn’t match text content in the accessibility API, the user experience will be negatively impacted for sighted users.

On the surface, the aria-hidden=»true» and the role=»presentation» and its synonym role=»none» seem similar, but the intent behind each is different.

• aria-hidden=»true» will remove the entire element from the accessibility API.
• role=»presentation» and role=»none» will remove the semantic meaning of an element while still exposing it and its content to assistive technology.

aria-hidden=»true» should not be added when:

• The HTML hidden attribute is present
• The element or the element’s ancestor is hidden with display: none
• The element or the element’s ancestor is hidden with visibility: hidden

In all three scenarios, the attribute is unnecessary to add because the element has already been removed from the accessibility tree. Visually hiding elements with display or visibility hides content from the screen and from assistive technologies.

Using aria-hidden=»false» will not re-expose the element to assistive technology if any of its parents specify aria-hidden=»true» .

Example

Adding aria-hidden=»true» to the icon hides the icon character from being included in the accessible name.

button> span class="fa fa-tweet" aria-hidden="true">span> span class="label"> Tweet span> button> 

We have a button with a Font Awesome icon. We hide the icon from assistive technologies with aria-hidden=»true» , as exposing the icon to assistive technologies could lead to redundancy or, if the icon doesn’t have the same content as the visible text, confusion.

Values

The element is exposed to the accessibility API as if it was rendered.

The element is hidden from the accessibility API.

The element’s hidden state is determined by the user agent based on whether it is rendered.

ARIAMixin API

The ariaHidden property, part of the Element interface, reflects the value of the aria-hidden attribute, which Indicates whether the element is exposed to an accessibility API.

The ariaHidden property, part of the ElementInternals interface, reflects the value of the aria-hidden attribute

Associated roles

Used in ALL roles

Specifications

See Also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник