Проблема 1: Сломанная навигация по заголовкам / манипуляция DOM

[adress (Angela Dresselhaus)]

Проблема: Элементы ответов на сообщения изначально не отображаются в объектной модели документа (DOM) при первоначальной загрузке страницы и удаляются из DOM после того, как экранный диктор проходит их, из-за чего пользователи экранных дикторов в Windows теряют доступ к контенту, а функциональность VoiceOver ограничивается инструментами, доступными для навигации по странице.

Конкретное поведение:

● При попытке перейти от основного сообщения к ответам элементы, используемые в ответах, еще не отрисованы в DOM, поэтому пользователи не могут использовать быструю навигацию для перехода к любому элементу в любом ответе.

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

● Инструмент доступности ANDI показывает постоянно изменяющуюся структуру заголовков после взаимодействия с элементами.

● При попытке доступа к элементам появляются сообщения об ошибке «удалено из DOM».

● Экраннный диктор теряет последовательное представление структуры страницы.

Детали платформы:

● JAWS/NVDA: Полная неработоспособность — невозможно получить доступ к заголовкам ответов.

● VoiceOver: Доступ через быструю навигацию, но без доступа через ротор — поскольку VoiceOver работает путем чтения непосредственно страницы, пользователи могут перемещаться по заголовкам ответов с помощью клавиш быстрой навигации, однако в роторе доступны только те элементы, на которых сфокусирован экранный диктор.

Почему это критично: Пользователи экранных дикторов не могут выполнить ключевую задачу — чтение ответов в обсуждениях. Это создает полное препятствие для участия в дискуссиях.

[adress (Angela Dresselhaus)]

Эти проблемы были впервые сообщены по адресу Screen Reader Accessibility issues. Пожалуйста, помогите в их решении: у нас есть целое сообщество незрячих и слабовидящих пользователей, которые не могут выполнять базовые функции на форуме обсуждений.

[awesomerobot (Kris)]

Спасибо за эти сообщения!

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

Мы можем использовать try.discourse.org или ссылку на пост здесь, в Meta, если это поможет.

@adress

поэтому пользователи не могут использовать быструю навигацию для перехода к любому элементу в любом ответном посте.

Похоже, под «быстрой навигацией» вы имеете в виду именно списки элементов? Я могу подтвердить, что как в NVDA, так и в VoiceOver в списках элементов доступен только контент, который в данный момент присутствует в DOM. Это верно и для зрячих пользователей и является фундаментальной особенностью работы Discourse. Вместо ручной пагинации мы загружаем или выгружаем контент по мере прокрутки страницы вверх или вниз.

@adress

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

Обычно именно это я ожидаю, когда кто-то упоминает «быструю навигацию», хотя понимаю, что терминология не всегда единообразна в разных приложениях.

Я подтвердил, что навигация от элемента к элементу работает в NVDA и VoiceOver, но выявил проблему с нашими «малыми постами» внутри тем, которая может прерывать навигацию. Я применю исправление для этого.

«Малый пост» — это обновление статуса темы, например «закреплено», «закрыто/открыто», «активировано» и т. д. Проблема в том, что у них нет внутренних заголовков, как у обычных постов. Поэтому, если такой пост оказывается на пороге загрузки новых постов во время навигации, пользователь может остановиться и услышать только «нет следующего заголовка».

@adress

Инструмент доступности ANDI показывает постоянно меняющуюся структуру заголовков после взаимодействия с элементами.

Автоматизированные инструменты, такие как ANDI, часто не распознают изменения DOM в веб-приложениях вроде Discourse; они обычно созданы для более простых сценариев, например статических страниц. Поэтому, хотя мы иногда используем такие инструменты для самостоятельного выявления проблем, в более сложных сценариях, таких как навигация, мы должны сосредоточиться на том, что можем воспроизвести при ручном тестировании.

@adress

При попытке доступа к элементам появляются ошибки «удалено из DOM»

Скринридер теряет последовательное представление структуры страницы

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

@adress

JAWS/NVDA: Полный сбой — невозможно получить доступ к заголовкам ответов

Это также происходит именно в списке элементов? Как упоминалось выше, я тестировал навигацию от элемента к элементу в NVDA и VoiceOver и могу подтвердить, что она работает… но если есть конкретный контекст, в котором это не работает, мы сможем рассмотреть его более внимательно.

[adress (Angela Dresselhaus)]

@awesomerobot

Вы знаете, по какой именно теме (темам) это тестировалось?

Последняя расширенная основная программа/Освоение монарха — Форум обсуждений APH Hive

Были протестированы экспресс-активности.

[awesomerobot (Kris)]

Быстрое обновление по этому вопросу: я работал над улучшением наших ориентиров, что должно обеспечить лучший способ навигации по списку элементов.

Навигация по заголовкам в списках элементов останется без изменений, но, надеюсь, это предоставит разумную альтернативу. Изменения описаны здесь: A11Y: improve landmark navigation and add aria-labels to post controls by awesomerobot · Pull Request #34421 · discourse/discourse · GitHub

Кратко, что это делает:

• Предоставляет области-ориентиры для всех сообщений в DOM.

• Добавляет область-ориентир, которая делает более очевидным наличие ещё сообщений выше/ниже — мы загружаем/выгружаем сообщения, чтобы не использовать ручную пагинацию; если бы в DOM одновременно загружались сотни сообщений темы, это могло бы вызвать проблемы с производительностью.

  Сделать весь контент заголовков доступным в DOM без снижения производительности для всех было бы очень сложным изменением, поэтому это своего рода компромисс. Хотя это не идеально, навигация к областям «загрузить больше контента» будет корректно загружать дополнительные сообщения, после чего список элементов можно будет снова открыть.

• Я обновил элементы управления сообщениями, изменив их с области навигации на область панели инструментов; это более семантически точно и позволяет списку областей-ориентиров сосредоточиться на сообщениях.

• Кроме того, я улучшил подписи для элементов управления сообщениями.

Таким образом, мы переходим от довольно скудного списка элементов-ориентиров внутри тем

К чему-то, что более чётко отражает структуру темы

Это обновление должно появиться в течение этой недели. Мне будет интересно услышать ваши отзывы об этих изменениях, как только они станут доступны @adress!

[Cody_Laplante]

Привет, @awesomerobot. Нас наняла организация APH для консультации по вопросам доступности в связи с этой проблемой. Ниже я привёл несколько видеоссылок, демонстрирующих нашу основную проблему, связанную с этой темой. Вы увидите проблему в первой записи, начиная с отметки времени 08:36.
Аудит доступности Discourse (JAWS)
Это не связано со списком элементов, а относится к тому, что мы называем «быстрыми клавишами» или «быстрой навигацией», с помощью которых мы переходим к следующему типу элемента HTML (в данном случае — заголовкам).

Проблема с решением этой задачи путём создания новых областей (landmarks) заключается в том, что такие области обычно зарезервированы для высокоуровневых секций. Поэтому для пользователя скринридера навигация между небольшими секциями страницы с помощью областей лишит его быстрого доступа к крупным регионам страницы, таким как навигационная панель. Кроме того, это нарушает стандарты WCAG уровня A, создавая проблему «обхода блоков» (Bypass Block).

[awesomerobot (Kris)]

Отлично, спасибо за дополнительные детали! Видео очень поможет — похоже, оно защищено паролем. Не могли бы вы либо снять защиту, либо отправить код на accessibility@discourse.org?

[Cody_Laplante]

Да, извините за это. Вот ссылка с встроенным паролем: https://us02web.zoom.us/rec/share/45j1ymetOZ7KtgoCwVRrUc_wu3YnlsySMmpiXfDv0xaG76NCr4lSMONMtnD0Nkrc.coIPd9Sw2cp4bN8T
Пароль: .kBwdK3a

[dkapoor (Dylan Kapoor)]

Привет, @awesomerobot! Я коллега Коди и инженер по доступности. Я изучил репозиторий, чтобы диагностировать проблему. Как вы, возможно, уже знаете, основная проблема заключается в следующем: (1) содержимое в скрытых постах недоступно для скринридеров и (2) посты раскрываются только тогда, когда находятся в поле зрения пользователя согласно PostStreamViewportTracker.

Продумывая возможное исправление, я хочу оптимизировать два аспекта: (1) обеспечить навигацию по каждому посту с помощью заголовков для скринридеров и (2) минимизировать изменения в репозитории Discourse и влияние на производительность.

Рекомендуемый подход заключается в том, чтобы для каждого загруженного поста сохранять лёгкую обёртку, включающую семантический заголовок H2, используемый для навигации по заголовкам, в то время как основной тяжёлый контент поста остаётся скрытым. Это обеспечивает стабильность заголовков для вспомогательных технологий без раздувания DOM на всей странице. Когда пользователь переходит к заголовку H2 любого поста через навигацию по заголовкам, скринридер инициирует прокрутку страницы, что, в свою очередь, раскроет тело поста на месте.

Жизнеспособность этого решения зависит от момента загрузки следующей порции постов. Дополнительным улучшением может стать заголовок-сигнальный маркер «Загрузить больше постов», видимый только для скринридеров (аналогично предложенному в вашем PR «области загрузки»), расположенный в нижней части списка загруженных постов. Когда этот заголовок появляется в поле зрения или выбирается из ротора заголовков, загружается следующая порция постов, а завершение загрузки объявляется через сообщение с атрибутом aria-live=polite.

[awesomerobot (Kris)]

Спасибо за обратную связь и предложения! Мы обсудим это внутри компании и вернёмся с обновлением!

[awesomerobot (Kris)]

@dkapoor

Рекомендуемый мной подход заключается в том, чтобы для каждой загруженной публикации использовать легковесный обёрточный элемент, включающий семантический заголовок H2 для навигации по заголовкам, в то время как основной тяжёлый контент публикации остаётся скрытым. Это позволяет сохранить стабильность заголовков для вспомогательных технологий, не раздувая DOM-дерево на всей странице. Когда пользователь переходит к заголовку H2 любой публикации с помощью навигации по заголовкам, программа экранного доступа инициирует прокрутку страницы, что, в свою очередь, раскрывает основной контент публикации на месте.

Мы в настоящее время работаем над этим подходом в A11Y: improve heading-to-heading nav, fix infinite scrolling for screenreaders by awesomerobot · Pull Request #34589 · discourse/discourse · GitHub

Как вы и предложили, мы добавляем лёгкие заголовки, видимые только для программ экранного доступа, ко всем публикациям (как скрытым, так и нет), а также заголовок, который будет инициировать загрузку дополнительных публикаций, вместе с уведомлением о завершении загрузки.

Это всё ещё находится в стадии разработки, поэтому потребуется некоторая доработка, но мы надеемся, что сможем скоро сделать это исправление доступным для всех.

[awesomerobot (Kris)]

Краткое обновление по срокам: в течение следующей недели у нас действует заморозка перед релизом, и многие члены нашей команды будут на ежегодной встрече… поэтому, скорее всего, пройдет пара недель, прежде чем это изменение будет внедрено.

[awesomerobot (Kris)]

Привет! По состоянию на 5 ноября мы внедрили обновление, которое, как ожидается, улучшит навигацию по темам с помощью заголовков. Подробнее здесь:

@awesomerobot

Спасибо за сообщение. Начиная с вчерашнего дня мы внедрили обновление, призванное сделать навигацию по сообщениям через заголовки более надёжной. Мы обеспечили наличие последовательных заголовков для каждого сообщения и добавили заголовки с живыми областями, которые будут сообщать о загрузке дополнительных сообщений.