Я видел атрибут aria во время работы с Angular Material. Может кто-нибудь объяснить мне, что означает префикс арии? но самое главное то , что я пытаюсь понять разницу между aria-hiddenи hiddenатрибутом.

ARIA (Accessible Rich Internet Applications) определяет способ сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями.

hiddenАтрибут является новым в HTML5 и говорит браузеры не отображать элемент. aria-hiddenСвойство сообщает скрин-читатель , если они должны игнорировать этот элемент. Посмотрите документы w3 для более подробной информации:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

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

Скрытый атрибут - это логический атрибут (True / False). Когда этот атрибут используется в элементе, он удаляет все отношение к этому элементу. Когда пользователь просматривает html-страницу, элементы со скрытым атрибутом не должны быть видны.

Пример:

    <p hidden>You can't see this</p>

Скрытые атрибуты Aria указывают, что элемент и ВСЕ его потомки все еще видны в браузере, но будут невидимы для инструментов доступности, таких как программы чтения с экрана.

Пример:

    <p aria-hidden="true">You can't see this</p>

Взгляни на это . Он должен ответить на все ваши вопросы.

Примечание: ARIA расшифровывается как Accessible Rich Internet Applications

Источники: Paciello Group

Семантическая разница

Согласно HTML 5.2 :

При указании в элементе [ hiddenатрибут] указывает, что элемент еще не является или более не имеет непосредственного отношения к текущему состоянию страницы или что он используется для объявления контента, который будет повторно использоваться другими частями страницы как в отличие от прямого доступа пользователя.

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

С другой стороны, ARIA 1.1 говорит:

[ aria-hiddenСостояние] указывает, открыт ли элемент для API доступа.

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

Теперь давайте сравним семантику. Целесообразно использовать hidden, но не aria-hidden для элемента, который еще не «актуален во времени», но который может стать актуальным в будущем (в этом случае вы будете использовать динамические сценарии для удаления hiddenатрибута). И наоборот, это целесообразно использовать aria-hidden, но неhidden использовать элемент, который всегда актуален, но с которым вы не хотите загромождать API доступности; такие элементы могут включать в себя «визуальный стиль», например значки и / или изображения, которые не являются необходимыми для пользователя.

Эффективная разница

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

hiddenАтрибут должен скрыть элемент из всех презентаций, включая принтеры и чтение с экрана (предполагается , что эти устройства чтить HTML спецификация). Если вы хотите удалить элемент из дерева доступности, а также визуальные медиа, hiddenсделайте свое дело. Тем не менее, не используйте hidden только потому, что вы хотите этот эффект. Спросите себя, hiddenправильно ли сначала семантически правильно (см. Выше). Если hiddenсемантически не правильно, но вы все еще хотите визуально скрыть элемент, вы можете использовать другие методы, такие как CSS.

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

Синтаксическая разница

Наконец, существует разница в синтаксисе между двумя атрибутами.

hiddenявляется логическим атрибутом , означающим, что если атрибут присутствует, он имеет значение true, независимо от того, какое значение он может иметь, а если атрибут отсутствует, он имеет значение false. Для истинного случая лучше всего либо вообще не использовать значение ( <div hidden>...</div>), либо значение пустой строки ( <div hidden="">...</div>). Я бы не советовал, hidden="true"потому что кто-то, читающий / обновляющий ваш код, может сделать вывод, что это hidden="false"будет иметь противоположный эффект, который просто неверен.

aria-hiddenнапротив, является перечисляемым атрибутом , допускающим одно из конечного списка значений. Если aria-hiddenатрибут присутствует, его значение должно быть либо "true"или "false". Если вы хотите состояние «undefined (default)», удалите атрибут вообще.

Дополнительная литература: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content.

установка aria-hidden в false и переключение его на element.show () работали для меня.

например

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

и когда прячешься

$(span).attr('aria-hidden', 'true');
$(span).hide();