Влияние абсолютного позиционирования на программное обеспечение голосовой активации

Question

Влияет ли использование абсолютного позиционирования на веб-сайте негативно на программное обеспечение голосовой активации?

Контекст :

Я работаю в компании, которая оценила доступность своего веб-сайта.,Один из комментариев был:

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

Убедитесь, что пользователи голосовой активации могут получить доступ к флажкам, реализовав в CSS следующее:

.checkbox__input {
  /* position: absolute; */
  cursor: pointer;
  /* left: 0; */
  /* top: 0; */
  width: 38px;
  height: 38px;
  margin: 0;
  opacity: 0;
}

Рекомендованные свойства - это их рекомендации относительно того, что мы должны удалить из нашего CSS.

Мне известно, что использование position: absolute выводит контент из нормального потока страницы.Однако мы помещаем каждый флажок в контейнер, который относительно позиционирован.

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

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

Answer 1

ОП запрашивает распознавание речи, например Дракон , а не программы чтения с экрана.

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

1. роль элемента
2. отображаемая метка элемента по сравнению с базовым доступным именем

Для роли, если у вас был <div>, который был оформлен в стиле флажка, но <div> имел не имел role="checkbox", тогда пользователь распознавания речи не был бы в состоянии сказать "нажмите флажок".

Для метки, если визуальная метка флажка не соответствует доступному имени флажка (что должно быть редкостью), тогда пользователь распознавания речи может не иметь возможности (напрямую) установить флажок. Например:

<input type="checkbox" id="mycheck">
<label for="mycheck">do you like dogs?</label>

Пользователь распознавания речи сможет произнести «щелкнуть собаками» или «щелкнуть мышью» или «щелкнуть <любое слово, являющееся частью видимой метки </em>>».

Однако, если у вас было что-то вроде:

<input type="checkbox" id="mycheck" aria-label="are you a puppy lover?">do you like dogs?

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

Теперь, что касается позиционирования, если у вас есть объект, который был "сверху" флажка, и этот объект сверху получил события щелчка, тогда возможно позиционирование может повлиять на Dragon, но я не уверен , Если пользователь мыши пытается щелкнуть флажок, но что-то (визуально или нет) находится сверху, этот верхний объект получит событие. Если пользователь распознавания речи говорит «нажмите <имя флажка </em>>» и объект находится поверх него, я не знаю, получит ли флажок событие. Похоже, этот флажок был бы выбран, потому что вы использовали имя флажка и не полагались на порядок DOM для объекта, чтобы получить событие.

Answer 2

Программы чтения с экрана обычно следуют порядку HTML (включая любой HTML, сгенерированный скриптами) при чтении документа. Когда CSS используется для позиционирования контента, контент, отображаемый на экране, может отображаться в порядке, отличном от того, что отображается в коде.

Из офиса доступности штата Пенсильвания:

Атрибут position используется для изменения визуальной позиции элемента независимо от того, где он находится в коде. Например, любой элемент с position:absolute и положением, установленным на top:0px и left:0px, будет отображаться первым визуально, даже если div является окончательным текстом в коде HTML. В качестве альтернативы, элемент может быть указан первым в коде, но фактически визуально должен располагаться в нижней правой части страницы.

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

http://accessibility.psu.edu/css/readorderhtml/#fxd

Относительное положениеg представляет ту же проблему.

Единственный способ преодолеть эту проблему - позволить элементам отображаться на экране в том порядке, в котором они отображаются в HTML. Это может означать внесение изменений в ваш HTML-код, сценарии, шаблоны и т. Д.

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