Състояние Глобално състояние

`aria-hidden`

Премахва елемент и всички негови потомци от дървото за достъпност. Потребителите с добро зрение все още виждат елемента; помощните технологии никога не достигат до него. Запазен за декоративно съдържание — никога не се прилага към фокусируем елемент за управление.

Кога да се използва

За декоративно съдържание, което не носи смисъл за потребителите на екранни четци — обикновено икони, наредени до текстово означение, разделители, фонови графики или дублиран текст, съществуващ единствено за целите на оформлението. Маркирането на такива елементи с aria-hidden="true" поддържа дървото за достъпност фокусирано върху значимото съдържание.

В сравнение с подобни механизми:

aria-hidden="true" — видим за потребителите с добро зрение, невидим за помощните технологии. Елементът продължава да заема пространство в оформлението.
CSS display: none и HTML атрибутът hidden — невидим за всички (потребители с добро зрение и помощни технологии). Елементът изобщо не се визуализира.
CSS visibility: hidden — невидим за всички, но елементът продължава да заема пространство в оформлението.
Атрибутът inert — елементът и потомците му не могат да получат фокус, клик събитията са потиснати, но те остават в дървото за достъпност (за разлика от aria-hidden). Правилният инструмент за фонови слоеве на модали и деактивирани екрани.

Важно: никога не се прилага aria-hidden="true" към елемент, който е или съдържа фокусируем елемент за управление. Потребителите с клавиатура все още могат да достигнат до него чрез Tab, но екранният им четец няма да го обяви. Те се озовават върху елемент за управление, невидим за тях — това е една от най-честите грешки, откривани от axe-core.

Синхронизация на стойността

Валидните стойности са "true", "false" и "undefined". Полезната е "true"; "false" съществува, за да се замени наследен aria-hidden от родителски елемент, което на практика рядко се налага.

Състоянието може да бъде статично (икона, която е винаги декоративна) или динамично. При превключване на aria-hidden за даден регион — например скриване на основното приложение при отворен модал — синхронизирайте го с действителното визуално състояние и комбинирайте с inert, за да стане регионът и нефокусируем.

Чести грешки

aria-hidden="true" върху фокусируем елемент — най-часто докладваният проблем от axe-core.
Използване на aria-hidden за скриване на видим текст, който не се желае да се чете от екранните четци. Текстът трябва да се премахне или да се изнесе от DOM.
Пропуск при добавяне на aria-hidden="true" към чисто декоративна икона до означен бутон — екранният четец обявява достъпното наименование на иконата в допълнение към означението на бутона.
Задаване на aria-hidden="true" на елемента <body> или <main> за заключване на фоновото съдържание зад модал, без едновременна употреба на inert — клавиатурният фокус може да излезе извън модала.
Използване на aria-hidden="false" за „показване” на нещо, скрито от CSS. CSS продължава да го крие.

Пример

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Save
</button>