При работе с HTML, особенно при использовании таких фреймворков как Angular или React, часто встречаются атрибуты, начинающиеся с префикса ‘aria-‘. В частности, ‘aria-hidden’ и ‘hidden’. Чем же они отличаются и какой из них использовать в той или иной ситуации?
Итак, рассмотрим пример. Предположим, на веб-странице есть элемент, который должен быть скрыт от пользователя в определенных условиях. В HTML есть два способа сделать это с помощью атрибутов ‘hidden’ и ‘aria-hidden’.
Атрибут ‘hidden’ является стандартным атрибутом HTML5. Он предназначен для скрытия элементов на веб-странице. Если элемент помечен этим атрибутом, он будет невидим для всех пользователей. Из этого следует, что ‘hidden’ работает на уровне визуального отображения.
<div hidden>Этот элемент скрыт</div>
В свою очередь, ‘aria-hidden’ является частью набора атрибутов Accessible Rich Internet Applications (ARIA). Эти атрибуты предназначены для улучшения доступности веб-страниц для людей с ограниченными возможностями. ‘Aria-hidden’ не скрывает элемент на физическом уровне, а указывает технологиям поддержки (например, считывателям экрана), что элемент должен быть недоступен для взаимодействия или проигнорирован.
<div aria-hidden="true">Этот элемент скрыт для технологий поддержки</div>
Таким образом, ‘hidden’ и ‘aria-hidden’ служат различным целям. ‘Hidden’ используется для скрытия элементов на уровне визуального отображения для всех пользователей, в то время как ‘aria-hidden’ используется для управления видимостью элемента для технологий поддержки. Важно помнить, что ‘aria-hidden’ не влияет на визуальное отображение элемента.
Добавить комментарий