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

Question

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

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

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

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

Answer 1

Хотя это старый вопрос, он был одним из первых, который всплыл в поиске 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>

Answer 2

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

Answer 3

Непрозрачность является фактором прозрачности, поэтому непрозрачность: 0 означает, что она не видна.Если вы говорите об отображении: нет и видимости: скрытое запоминание, разница в том, что отображение полностью исчезает с какого-то объекта, контейнера и не имеет никакого размера, тогда как видимость делает его невидимым, но все же имеет некоторый размер на странице.