Активируйте VoiceOver на iOS, затем перейдите к сообщению, содержащему размытие для спойлеров, как это.
Проведите пальцем по тексту, чтобы экранная читалка прочитала его.
Фактический результат: VoiceOver просто читает текст спойлера, игнорируя размытие.
Ожидаемый результат: Элемент должен иметь ARIA-роль (кнопка?) и альтернативное ARIA-описание, например, «читать спойлеры» или что-то подобное.
(Аналогичное поведение наблюдается в JAWS и NVDA.)
Я не думаю, что в ARIA есть что-то о спойлерах… Возможно, я ошибаюсь. Насколько я понимаю, ближайшее решение, которое мы можем реализовать, — это использование тегов details и summary, чтобы запустить этот функционал.
Готовы рассмотреть альтернативные варианты реализации.
Кажется, есть разумная гибкость в стилизации элементов details/summary, однако предвычисление их ширины, вероятно, окажется нереализуемым.
Ах, я понял: я фактически создал дублирующуюся задачу по проблеме доступности плагина «Предупреждение о спойлере», о которой идёт речь здесь, извините за это. Хотя моя задача была сфокусирована больше на доступности с клавиатуры, моё решение также исправит эту проблему, поскольку, как предложил @dfabulich, будет использоваться паттерн виджета раскрытия, активируемый кнопкой.
Я не думаю, что здесь стоит использовать элементы details/summary, так как вы хотите отображать содержимое на странице, даже когда оно «скрыто» — просто нужно также размыть его. Использование aria-hidden="true" для размытого контента скроет его от пользователей скринридеров, но позволит отображать на странице (в размытом виде). Затем кнопка может переключать aria-hidden, делая контент доступным для вспомогательных технологий.
Я не думаю, что в ARIA есть что-то о спойлерах
Предупреждение о спойлере по сути является виджетом раскрытия, для которого Руководство по авторским практикам ARIA предоставляет рекомендации.
Я думаю, что эта проблема должна быть решена этим коммитом:
Эта тема была автоматически закрыта через 25 часов. Новые ответы больше не принимаются.