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-страницу, элементы с атрибутом hidden не должны быть видны.

Пример:

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

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

Пример:

    <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 находятся в "неопределенном (по умолчанию)" состоянии, что означает, что пользовательские агенты должны раскрывать их для дерева на основе их рендеринга. Например, агент пользователя может решить удалить его, если цвет его текста совпадает с цветом фона.

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

Эффективное различие

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

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

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

Синтаксическое различие

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

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

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

Дальнейшее чтение: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

установка Ария-скрытая ложь и переключение его на элемент.показать() работал для меня.

е.г

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

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

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

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