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

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

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

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

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

Ответ 1

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

Ответ 2

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

Ответ 3

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