Заставить VoiceOver для iOS игнорировать элементы на странице HTML? - PullRequest
Новая
       8

Заставить VoiceOver для iOS игнорировать элементы на странице HTML?

0 голосов
/ 02 октября 2018

Я работаю над улучшением доступности веб-приложения.В этом флажке есть кнопка, состоящая из флажка, метки и рисунков, и при выборе ее путем прокрутки влево и вправо на iPad с включенным VoiceOver VoiceOver выделяет отдельные элементы внутри кнопки, а не всю кнопку в виде единственного числа.элемент.Я попытался стилизовать CSS с помощью нескольких различных свойств, чтобы функция VoiceOver в iOS игнорировала эти отдельные элементы. 

aria-hidden:true;
speak:none;
user-select:none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
                   supported by Chrome and Opera */

Они не имели никакого значения.Я очистил кэш в Safari, чтобы убедиться, что CSS обновляется правильно, и на рабочем столе я вижу, что эти свойства действительно существуют для разных элементов, но iOS все еще решает игнорировать CSS и считывает элементы / разрешает эти элементыбыть выбранным независимо.Все остальные исследования, которые я провел, подразумевают, что единственный способ отключить VoiceOver - это явное отключение его в полномасштабном приложении.Есть ли другие методы, которые я пропустил?

1 Ответ

0 голосов
/ 02 октября 2018

У вас была правильная идея, просто неправильно использовали.aria-hidden это не свойство CSS, это атрибут, который вы помещаете в тег html.Таким образом, чтобы скрыть кнопку, вы должны иметь 

<button aria-hidden="true">voiceover won't see me</button>

. Однако убедитесь, что метка вашего флажка программно связана с самим флажком, а не только физически рядом с ним в DOM.Если они не связаны, VoiceOver не будет рисовать границу вокруг всего флажка и метки.

Неправильно: 

<input type="checkbox">
<label>i like puppies</label>

Правильно: 

<input type="checkbox" id="myid">
<label for="myid">i like puppies</label>
...