В чем разница между «скрытыми» и «скрытыми» атрибутами HTML?

256

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

Даниэль Кобе
источник
1
Я нашел некоторые разъяснения здесь: paciellogroup.com/blog/2012/05/…
Абдул

Ответы:

364

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

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

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

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

Лео Фармер
источник
4
Так что, если вы просто используете скрытый атрибут, программа чтения с экрана все равно будет читать?
Даниэль Кобе
40
Верный. hiddenзначит скрыто для всех. aria-hiddenозначает скрытые для программ чтения с экрана и аналогичных инструментов. Это полезно для компонентов, которые используются исключительно для форматирования и не содержат, например, реального контента.
Андрей Барсан
23
@ AndreiBârsan @DanielKobe Я думаю, что Андрей имел в виду "Неверно". (Остальная часть его комментария является фактической.) hiddenДолжна препятствовать тому, чтобы программа чтения с экрана получила доступ к содержимому тега.
eenblam
6
Ваш ответ о aria-hiddenправильном; однако вы ничего не сказали о том, hiddenчтобы отличить его от aria-hidden. Это, к сожалению, лучший ответ. Пожалуйста, будьте внимательнее к своим ответам.
Pegues
1
Ваш ответ объясняет влияние атрибутов, но не их значение . Вы ничего не упоминаете о дереве доступности или временной значимости элемента. прочитайте спецификации для получения дополнительной информации. [HTML 5.2 , ARIA 1.1 ]
chharvey
41

Скрытый атрибут - это логический атрибут (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

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

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

Согласно 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.

chharvey
источник
1
В этом сообщении от Paciello Group, 2012 говорится: «aria-hidden = false не отображается ни в одном браузере, поддерживающем aria-hidden, поэтому его использование не имеет смысла или другими словами имеет то же значение, что и его отсутствие». Не уверен, что это все еще так, но добавление в качестве предостережения. Я бы хотел описать мои состояния просмотра a11y отдельно от моего CSS, но не уверен, что это возможно с aria-hidden. developer.paciellogroup.com/blog/2012/05/…
RobW
-1

установка 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();
Моиз
источник