В чем разница между «скрытыми» и «скрытыми» атрибутами HTML?
256
Я видел атрибут aria во время работы с Angular Material. Может кто-нибудь объяснить мне, что означает префикс арии? но самое главное то , что я пытаюсь понять разницу между aria-hiddenи hiddenатрибутом.
ARIA (Accessible Rich Internet Applications) определяет способ сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями.
hiddenАтрибут является новым в HTML5 и говорит браузеры не отображать элемент. aria-hiddenСвойство сообщает скрин-читатель , если они должны игнорировать этот элемент. Посмотрите документы w3 для более подробной информации:
Так что, если вы просто используете скрытый атрибут, программа чтения с экрана все равно будет читать?
Даниэль Кобе
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-страницу, элементы со скрытым атрибутом не должны быть видны.
Пример:
<phidden>You can't see this</p>
Скрытые атрибуты Aria указывают, что элемент и ВСЕ его потомки все еще видны в браузере, но будут невидимы для инструментов доступности, таких как программы чтения с экрана.
Пример:
<paria-hidden="true">You can't see this</p>
Взгляни на это . Он должен ответить на все ваши вопросы.
Примечание: ARIA расшифровывается как Accessible Rich Internet Applications
Это не совсем правильно (даже официальная документация немного туманная). Элемент с aria-hidden="true"по-прежнему виден в браузере, но будет невидим для инструментов специальных возможностей, таких как программы чтения с экрана.
Андрей Барсан
aria-hiddenиспользуется, чтобы скрыть элемент от людей, использующих ваш сайт с инструментами доступности.
При указании в элементе [ hiddenатрибут] указывает, что элемент еще не является или более не имеет непосредственного отношения к текущему состоянию страницы или что он используется для объявления контента, который будет повторно использоваться другими частями страницы как в отличие от прямого доступа пользователя.
Примеры включают в себя список вкладок, на которых некоторые панели не отображаются, или экран входа в систему, который исчезает после входа пользователя в систему. Мне нравится называть эти вещи «релевантными во времени», т.е.
[ 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)», удалите атрибут вообще.
В этом сообщении от 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 () работали для меня.
Ответы:
ARIA (Accessible Rich Internet Applications) определяет способ сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями.
hidden
Атрибут является новым в HTML5 и говорит браузеры не отображать элемент.aria-hidden
Свойство сообщает скрин-читатель , если они должны игнорировать этот элемент. Посмотрите документы w3 для более подробной информации:https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
Использование этих стандартов может облегчить использование Интернета людьми с ограниченными возможностями.
источник
hidden
значит скрыто для всех.aria-hidden
означает скрытые для программ чтения с экрана и аналогичных инструментов. Это полезно для компонентов, которые используются исключительно для форматирования и не содержат, например, реального контента.hidden
Должна препятствовать тому, чтобы программа чтения с экрана получила доступ к содержимому тега.aria-hidden
правильном; однако вы ничего не сказали о том,hidden
чтобы отличить его отaria-hidden
. Это, к сожалению, лучший ответ. Пожалуйста, будьте внимательнее к своим ответам.Скрытый атрибут - это логический атрибут (True / False). Когда этот атрибут используется в элементе, он удаляет все отношение к этому элементу. Когда пользователь просматривает html-страницу, элементы со скрытым атрибутом не должны быть видны.
Пример:
Скрытые атрибуты Aria указывают, что элемент и ВСЕ его потомки все еще видны в браузере, но будут невидимы для инструментов доступности, таких как программы чтения с экрана.
Пример:
Взгляни на это . Он должен ответить на все ваши вопросы.
Примечание: ARIA расшифровывается как Accessible Rich Internet Applications
Источники: Paciello Group
источник
aria-hidden="true"
по-прежнему виден в браузере, но будет невидим для инструментов специальных возможностей, таких как программы чтения с экрана.aria-hidden
используется, чтобы скрыть элемент от людей, использующих ваш сайт с инструментами доступности.Семантическая разница
Согласно HTML 5.2 :
Примеры включают в себя список вкладок, на которых некоторые панели не отображаются, или экран входа в систему, который исчезает после входа пользователя в систему. Мне нравится называть эти вещи «релевантными во времени», т.е.
С другой стороны, ARIA 1.1 говорит:
Другими словами, элементы с
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 () работали для меня.
например
и когда прячешься
источник