#javascript #reactjs #accessibility #wai-aria #voiceover
#javascript #reactjs #Специальные возможности #вай-ария #голос за кадром
Вопрос:
Я добавляю aria-метку в событие щелчка строки при щелчке строки, используя event.currentTarget объект метода onClick (событие, индекс). содержимое метки aria не читается голосом за кадром. Я тестировал как в браузере Chrome, так и в браузере safari, голос за кадром продолжает игнорировать содержимое метки aria в выбранной строке.
Содержимое aria-метки содержит текст «Выбранная строка». цель добавления aria-метки динамически при нажатии на строку — заставить voiceover читать строку как строку, выбранную при нажатии на строку.
Если добавить aria-метку в тег tr во время объявления, как показано ниже, Голос за кадром считывает содержимое aria-метки выбранной строки, как и ожидалось, вместо содержимого ячейки строки.
<tr role="row" aria-selected={isSelected} aria-label="row selected"/>
IsSelected — это логическая переменная, которая установит значение true при выборе строки.
Но когда я пытаюсь динамически добавить aria-метку при нажатии строки, голос за кадром не считывает содержимое aria-метки, даже если элемент Dom обновляется атрибутом aria-label при нажатии строки.
Пожалуйста, помогите мне в решении этой проблемы с голосом за кадром.
Я попытался добавить атрибуты aria-live = «напористый» и aria-live = «вежливый», чтобы как показано ниже
<tr role="row" aria-selected={isSelected} aria-live="assertive"/>
Когда я добавляю aria-живой голос за кадром сначала считывает содержимое ячейки, а затем содержимое метки aria. но это приводит к тому, что голос за кадром читается как Cell contents followed by Row selected вместо того, чтобы читать его как Row selected followed by cell Content , и еще одна проблема, с которой я сталкиваюсь, если я использую атрибут aria-live в строке, чем он считывает содержимое ранее выбранной ячейки строки при выборе новой строки. это потому, что я удаляю событие aria-label onBlur строки, поскольку строка обновляется при onBlur — это предыдущая строка, голос за кадром также считывает содержимое предыдущей строки.
Поэтому, пожалуйста, дайте мне знать, есть ли какие-либо другие способы заставить voiceover читать содержимое aria-метки, добавляемой при нажатии на строку.
Комментарии:
1. Если вы используете
role="row"иaria-selected="true"в строке, это обеспечит правильный контекст для пользователей программы чтения с экрана. То, что вы делаете, слишком многословно и перегружает доступность. Кроме того, VO часто игнорируетaria-labelне фокусируемые элементы.2. role =»row» и aria-selected =»true» должны работать, но не могут выяснить причину, почему. итак, попытка с aria-labels
3. Поскольку вас интересует a11y: выбирается ли строка с клавиатуры? Шаблон, который наиболее прост для понимания большинством пользователей, — это флажок перед каждой строкой. Это улучшило бы доступность для всех.
4. @Jason
"Additionally, VO often ignores aria-label on non-focusable items". Я не уверен, что это точное утверждение. aria-метка может быть проигнорирована, если у элемента нет роли, но она не должна иметь ничего общего с фокусируемым элементом. Смотрите «Практическую поддержку 2.10: aria-label, aria-labelledby и aria-describedby» на w3.org/TR/using-aria/#label-support5. @slugolicious — вы правы. Я оговорился относительно текущей проблемы с
aria-labelиsvgне объявляется, если только htesvgне является дочерним элементом фокусируемого элемента.
Ответ №1:
содержимое метки aria не читается голосом за кадром
Изменение aria-label не будет прочитано программой чтения с экрана. Однако, если вы перейдете от своего элемента к нему, он должен быть прочитан правильно.
Указание aria-live не поможет, потому что это относится к содержимому (дочерним элементам DOM) этого элемента, а не к атрибутам этого элемента.
Однако вам не следует добавлять aria-label , чтобы указать, что строка выбрана, если вы уже используете aria-selected . aria-selected достаточно.