Кнопки внутри слайдера не вызываются из Voiceover (a11y) - PullRequest
Новая
       54

Кнопки внутри слайдера не вызываются из Voiceover (a11y)

0 голосов
/ 07 марта 2019

У меня есть видео с временной шкалой и маркерами, чтобы показать точки на временной шкале для доступа (контрольные точки).Я хочу иметь возможность сфокусироваться на маркере контрольной точки и объявить его в VoiceOver, но нет способа добраться до маркера контрольной точки (кнопки) через Screenreader, тогда как кнопка имеет , имеет фокус отБраузер.

Если бы мне пришлось удалить ролик = "ползунок" или роль = "индикатор выполнения" на временной шкале, то внимание уделяется контрольным точкам.Это наводит меня на мысль, что VoiceOver (в Safari) не углубляется в эти элементы.

Один из вариантов - разделить кнопки на отдельный элемент div вне временной шкалы, но это выглядит грязно.Есть ли какие-либо идеи заставить VoiceOver объявить кнопки внутри div role = "slider" или role = "progressbar", когда они получат фокус.

Примечание. Это работает в Chrome, поэтому это Safari.проблема.

Вот пример: https://codepen.io/kmcgrady/pen/oVZxLE Обязательно используйте Safari и получите доступ к фрейму, а затем попробуйте нажать на кнопку. 

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow=50>
    <button tabindex="0">Hello</button>
</div>

1 Ответ

0 голосов
/ 09 марта 2019

К сожалению (для вас), VoiceOver является правильным. Спецификация для role="slider" говорит, что все дочерние элементы считаются « presentational », что означает, что дочерние элементы DOM не имеют роли. Таким образом, ваша встроенная кнопка теряет свою «кнопку» и просто становится простым текстом. Если Chrome работает, то это неправильно.

Я попробовал ваш пример кода ручки с NVDA (на ПК) с Firefox и Chrome, и они оба (правильно) проигнорировали вашу кнопку. Затем я добавил кнопку до и после вашей кнопки, и эти кнопки были найдены, как я и ожидал. Если я перемещаюсь по кнопкам с помощью клавиши B в NVDA, ваша кнопка игнорируется, и образцы кнопок находятся. Если я попробую пример на iOS и поменяю ротор на «Form Controls», то при нажатии вверх или вниз ваша кнопка будет игнорироваться.

Таким образом, вам, возможно, придется поработать с сотрудником UX, чтобы пользователи могли получить ваши контрольные точки. Когда вы выбираете кнопку контрольной точки, она должна привести вас к этой точке в видео? Я думаю, что наличие ряда кнопок контрольных точек за пределами ползунка не было бы слишком плохо. Воспроизведение, пауза, громкость, закрытые титры и другие подобные кнопки находятся за пределами временной шкалы, поэтому наличие нескольких кнопок для контрольных точек может быть не таким уж плохим.

...