Ответ 1

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

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

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

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

Ответ 2

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

Пример:

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

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

Пример:

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

Посмотрите этот. Он должен ответить на все ваши вопросы.

Примечание. ARIA означает доступное использование интернет-приложений

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

Ответ 3

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

Согласно 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 доступности; такие элементы могут включать в себя "визуальный стиль", например значки и/или изображения, которые не являются необходимыми для пользователя.

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

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

Атрибут 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

Ответ 4

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