Я бачив атрибут 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>

Приховані арія атрибути вказують на те, що елемент та ВСІ його нащадки все ще видно у браузері, але вони будуть непомітні для інструментів доступності, таких як зчитувачі екрану.

Приклад:

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

Погляньте на це . Він повинен відповісти на всі ваші запитання.

Примітка: ARIA розшифровується як Доступні додатки для багатого Інтернету

Джерела: 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". Якщо ви хочете стан "невизначений (за замовчуванням)", видаліть атрибут взагалі.

Подальше читання: 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();