Проблемы с VoiceOver в спойлерах

Продолжение обсуждения из темы Размытие спойлеров несовместимо с программами чтения с экрана:

Я получил сообщение от пользователя VoiceOver о том, что новый код спойлеров не работает:

Столкнулись ли другие пользователи программ чтения с экрана с трудностями при использовании обновлённой функции спойлеров на форуме? По крайней мере, я ПРЕДПОЛАГАЮ, что обновление было — раньше текст спойлеров читался как обычный, без какого-либо указания на то, что что-то должно быть скрыто, что, конечно же, было неидеально. Обновление, похоже, решило эту проблему, поместив контент за раскрывающуюся область с меткой «показать скрытый контент», но по какой-то причине текст не распознаётся, когда я нажимаю кнопку для разворачивания/раскрытия. Для справки: я использую VoiceOver, встроенную программу чтения с экрана от Apple, и заметил эту проблему как на iOS, так и на macOS.

3 лайка

Кто-то другой сказал:

У меня те же проблемы при использовании NVDA в Windows.

И третий человек согласился.

Извините, но похоже, что текущий код работает некорректно! Вероятно, было бы лучше даже откатиться к старому коду.

1 лайк

Привет @Dannii, спасибо за выявление этой проблемы. Я только что выпустил исправление, которое должно улучшить поведение, чтобы скринридеры читали содержимое спойлера после его раскрытия.

4 лайка

Я обновил свой форум, но пользователи скринридеров сообщают, что для них ничего не изменилось.

1 лайк

Вы уверены, что плагин обновлён до последней версии? (коммит 0ee68da)

У меня всё работает на Meta с VoiceOver. Мы также используем aria-live со значением polite для этого элемента, что означает, что экранная читалка не будет столь настойчивой и disruptive. Вместо этого она подождёт, пока пользователь перестанет быть активным, чтобы прочитать содержимое.

Проверка: это будет прочитано

1 лайк

Да, плагин спойлеров находится на 0ee68da1.

1 лайк

Киган, не мог бы ты рассказать немного подробнее о том, как ты проводишь тестирование? На твоем скриншоте видно, что используется десктопный браузер. Ты используешь macOS VoiceOver? (В каком браузере?)

macOS VoiceOver — это совершенно другой продукт по сравнению с iOS VoiceOver. Часто случается, что в macOS VoiceOver есть ошибки, которых нет в iOS VoiceOver, и наоборот. (По разным причинам iOS VoiceOver значительно популярнее среди слабовидящих пользователей, чем macOS VoiceOver.)

Когда я только что попытался протестировать твой пост https://meta.discourse.org/t/spoiler-issues-with-voiceover/257450/8?u=dfabulich в iOS Safari 16.3.1, вот что я увидел:

Вот расшифровка:

  • Видео начинается с фокуса на видео. Затем я провожу пальцем вправо, чтобы сфокусироваться на размытом тексте спойлера.
  • VoiceOver объявляет: «Показать скрытый контент. Кнопка. Свернуто. Дважды коснитесь, чтобы развернуть».
  • Я дважды касаюсь экрана. Текст спойлера перестает быть размытым.
  • VoiceOver объявляет: «Скрыть контент. Развернуто. Скрыть контент». Я утверждаю, что это ошибка в Discourse. Он должен был прочитать текст вслух, как это было в видео Кигана.
  • Я провожу пальцем вправо, переходя к следующему элементу управления интерфейсом.
  • VoiceOver объявляет: «Один человек лайкнул этот пост. Нажмите, чтобы просмотреть. Переключатель».
  • Я провожу пальцем влево, возвращаясь к размытому тексту спойлера.
  • VoiceOver объявляет: «Скрыть контент. Кнопка. Развернуто. Дважды коснитесь, чтобы свернуть».
  • Затем я снова провожу пальцем вправо и влево, чтобы дважды проверить, что поведение остается прежним, и оно действительно такое.

У нас есть сообщения от пользователей форума intfiction.org о том, что размытие спойлера не работает и в NVDA, что, возможно, стоит проверить с твоей стороны.

2 лайка

Привет, @dfabulich, спасибо за эти подробности. Да, я тестировал в основном в Chrome (VoiceOver на macOS и Narrator в Windows 11).

Я проведу дополнительное расследование и тестирование, чтобы понять, смогу ли я скоро выпустить исправление, которое решит проблему для iOS, NVDA и других основных устройств.

Спасибо!

3 лайка

Да, ни один из этих скринридеров не является сколько-нибудь популярным, поэтому не стоит использовать их в качестве основных платформ для тестирования.

Вот крупное отраслевое исследование пользователей скринридеров от WebAIM:

https://webaim.org/projects/screenreadersurvey9/ (опрос периодически повторяется каждые несколько лет; этот — за 2021 год)

Теперь важно внимательно прочитать этот отчёт, поскольку сначала в нём речь идёт о настольных браузерах, и есть диаграмма «Основной скринридер» https://webaim.org/projects/screenreadersurvey9/#primary, но она конкретно относится к основному скринридеру для «настольных компьютеров/ноутбуков».

Эта диаграмма показывает, что VoiceOver не очень популярен, однако в этом разделе речь идёт о VoiceOver для macOS. (Если прокрутить вниз до раздела «Операционные системы», вы увидите, что сама macOS не очень популярна среди пользователей скринридеров.)

JAWS для Windows — ведущий скринридер, за ним следует NVDA для Windows. VoiceOver для macOS занимает лишь далёкое третье место. Narrator для Windows имеет долю использования всего 0,5%!

Обратите внимание: JAWS платный (и его лицензионная схема обременительна), а NVDA бесплатен. Однако NVDA, как правило, содержит больше ошибок, чем JAWS; по моему опыту, всё, что работает в NVDA, работает и в JAWS.

Позже в отчёте говорится о «Используемых мобильных скринридерах» https://webaim.org/projects/screenreadersurvey9/#mobilescreenreaders.

Эта диаграмма показывает, что доминируют встроенные в ОС скринридеры: VoiceOver для iOS (71,5%) и TalkBack для Android (29,1%). (Сумма превышает 100%, поскольку некоторые пользователи используют оба.)

В этом исследовании отсутствует опрос о времени, проводимом на мобильных устройствах по сравнению с настольными, но, исходя из моего опыта, подавляющее большинство сообщений об ошибках, которые я получаю от пользователей скринридеров, поступают от пользователей iOS и NVDA.

Поэтому я рекомендую тестировать в следующем порядке приоритетности:

  1. VoiceOver в Safari для iOS. Я рекомендую мобильные устройства перед настольными (поскольку, как я утверждаю без конкретных данных, мобильные устройства значительно популярнее среди слабовидящих пользователей) и iOS перед Android, так как iOS среди слабовидящих пользователей намного популярнее Android.
  2. NVDA для Windows в Chrome. NVDA не совсем так популярен, как JAWS, но в нём больше ошибок. Всё, что работает в NVDA, будет работать и в JAWS, но не обязательно наоборот.
  3. JAWS для Windows в Chrome.
  4. TalkBack для Android в Chrome.
  5. VoiceOver для macOS в Safari.

Однако я считаю, что тестирование только в VoiceOver для Safari на iOS даст отличный результат за минимальные усилия. Обычно я тестирую только в Safari для iOS, а затем в NVDA для Windows в Chrome, если хочу быть особенно тщательным, и на этом обычно останавливаюсь.

Прошло уже как минимум пять лет с тех пор, как я видел сообщение об ошибке, которая возникала в JAWS для Windows, но не в NVDA для Windows. Думаю, я вообще никогда не видел сообщения об ошибке от пользователя TalkBack для Android.

4 лайка

Есть ли уже какие-то новости по этой проблеме?

aria-live не предназначен для переключения. Установите его значение в polite в начале и оставьте включенным. При текущей реализации он никогда не распознает внесённые изменения, так как изменения никогда не происходят, пока он активен.

1 лайк

Проблема для меня (NVDA/Windows) заключается, похоже, в том, что у вас есть внешний div с атрибутом aria-label. Я полагаю, что в большинстве программ экранного доступа это не аннотация содержимого, а замена недоступного контента. По крайней мере, для меня читается только aria-label.

Вот запись работы спойлера в этой теме: сначала читается ползунок времени в нижней части видео, затем пустое место (не знаю, что это), затем видимый спойлер («кнопка развернута, скрыть содержимое») и, наконец, выпадающее меню «2 ответа».

Обратите внимание, что если я использую функцию отладки NVDA и навожу мышь на развернутый текст, чтобы прочитать его, он действительно читается. Однако я не нашёл способа заставить его читать текст без использования мыши. Поэтому это, похоже, некорректный способ проверки реальной доступности…

2 лайка

Я создал PR с некоторыми улучшениями доступности:

3 лайка

Спасибо @Dannii за PR :slight_smile:

Я только что его проверил и добавил несколько комментариев, это совсем мелочи, но в остальном всё выглядит отлично!

1 лайк

Спасибо @Dannii, ваш PR был слит :slight_smile: эта проблема теперь должна быть решена

2 лайка