Атрибут hidden тега <bdi>
Описание
Атрибут hidden для тега <bdi> позволяет скрыть элемент со всем его содержимым. Однако это противоречит семантическому назначению тега, который предназначен для корректного отображения двунаправленного текста.
Пример (не рекомендуется):
<bdi hidden dir="rtl">
هذا النص مخفي
</bdi>
Проблемы использования:
- Семантическое несоответствие: <bdi> создан для отображения текста, а не для его скрытия
- Доступность: Скринридеры могут проигнорировать скрытый контент
- Альтернативы: Для временного скрытия лучше использовать CSS или атрибут
aria-hidden
Правильные альтернативы:
<!-- CSS-решение -->
<bdi class="temp-hidden" dir="rtl">
هذا النص يمكن إظهاره لاحقا
</bdi>
<!-- ARIA-решение -->
<bdi aria-hidden="true" dir="rtl">
هذا النص مخفي عن التقنيات المساعدة
</bdi>
Сравнение методов скрытия:
| Метод | Влияние на отображение | Доступность | Семантика |
|---|---|---|---|
hidden |
Полное скрытие | Не доступен | Нарушена |
aria-hidden |
Видимый | Скрыт от скринридеров | Сохранена |
display: none |
Полное скрытие | Не доступен | Частично нарушена |
visibility: hidden |
Невидимый, но занимает место | Не доступен | Частично нарушена |
Важно: Использование hidden с <bdi> лишает смысла само существование элемента. Если текст не должен отображаться, используйте другие элементы или методы скрытия.
Когда можно использовать:
- Временное скрытие в процессе динамического обновления контента
- Тестовые среды и прототипирование
- Случаи, когда направление текста важно для скрытого функционала