Как прозрачность CSS влияет на доступность?

После просмотра ряда статей о Google и других SO я решил задать свой вопрос прямо в надежде на простой и прямой ответ.

Чтобы добавить еще один шаг к обсуждению Есть ли у opacity: 0 точно такой же эффект, как и видимость: скрыто: я понимаю, что display:none и visibility:hidden скрывают элементы от программ чтения с экрана и т.п., но как насчет opacity:0?

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

Установка гигантского отрицательного значения text-indent обычно предлагается в качестве альтернативы display: none и visibility: hidden для раскрывающихся меню, но я бы хотел, чтобы мои меню появлялись и исчезали без JavaScript, при этом убедившись, что я не скрываю их от программ чтения с экрана.


css opacity accessibility wai-aria
person Greg Perham    schedule 29.01.2012    source источник

Ответы (2)


arrow_upward
9
arrow_downward

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

По состоянию на апрель 2017 года программа чтения с экрана ChromeVox не считывает контент, для которого установлено значение непрозрачности 0.

В частности, ChromeVox не будет читать текст, который был визуально скрыт с нулевой прозрачностью, если только элемент не помечен визуально доступным текстом.

Например:

<!-- will not be read -->
<a href="#!" style="opacity: 0;">not read</a>

<!-- WILL be read -->
<a href="#!" style="opacity: 0.001;">is read</a>

<!-- span text will not be read -->
<a href="#!">
  Read More
  <span style="opacity: 0;">
    this will not be read
  </span>
</a>

<!-- 
  button text will not be read, 
  but aria-labelledby text will be read on button focus 
-->
<span id="test">button label</span>
<button type="button" aria-labelledby="test" style="opacity: 0;">
  This text will not be read
</button>
person scottohara    schedule 04.04.2017
comment
когда я пробую это: opacity: 0.001 полностью отображается в Firefox 88.0.1. opacity: 0.01 почти не видно. - person kca; 20.05.2021

arrow_upward
3
arrow_downward

opacity: 0; не скроет контент от программ чтения с экрана, но скроет контент от зрячих и слабовидящих пользователей.
Это похоже на отображение белого текста на белом фоне (или прозрачном, как вы понимаете).
Он будет сопоставлен с API специальных возможностей, вы все равно должны увидеть, как указатель меняется над ссылками, редактируйте: вы все еще можете выбирать текст / редактировать, и кто-то должен проверить, будет ли при табулировании ссылок и элементов формы пунктирный контур по умолчанию отображаются как обычно или будут прозрачными. Изменить: последний, только что протестированный с Firebug на этой странице.

person FelipeAls    schedule 29.01.2012
comment
Контур визуализируется как часть самого визуального объекта (свойство outline), несмотря на то, что он не влияет на размеры блока, поэтому он будет участвовать в альфа-компоновке объекта как эффект opacity. Отсюда то, что вы видите при тестировании с помощью Firebug. - person BoltClock; 30.01.2012
comment
@Felipe Это ответ, на который я надеялся. :) Не могли бы вы добавить ссылку на какую-нибудь ссылку или объяснить свою уверенность? - person Greg Perham; 30.01.2012
comment
Это был фантастический вопрос. Я огляделся, но не вижу источников, конкретно указывающих на то, что непрозрачность мешает программам чтения с экрана выполнять свою работу. Хотя в этом есть смысл. Представьте, что значение непрозрачности было 50 вместо 0; контент все еще там и все еще занимает место на странице. Я не понимаю, как снижение до 0 вызовет какое-либо другое поведение. Если программы чтения с экрана меняют свое поведение для этого крайнего случая, я бы сказал, что у разработчиков слишком много свободного времени ... - person Jonah Bishop; 31.01.2012
comment
Иона, то, что вы говорите, имеет смысл, но при непрозрачности 0% он скрыт, как и элемент с высотой 0 пикселей, но при высоте: 1 пиксель все еще «видим». Программы чтения с экрана пропускают элементы с нулевой высотой, поэтому мне интересно, пропускают ли они аналогично нулевую непрозрачность. Удивительно, что на этот вопрос нет прямого ответа, а? Может быть, я смогу задать вопрос по веб-стандартам, шерпа. Кажется, они то и дело обсуждают подобные вещи ... - person Greg Perham; 11.02.2012