Есть ли способ написать контент, который читатели экрана будут игнорировать?

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

Есть ли принятый способ заставить читателей экрана игнорировать какой-либо контент?

Ответ 1

Наполовину, написав вопрос, я вспомнил, где искать.

CSS может сделать это:

<span class="dontRead">Screen readers shouldn't read this</span>

.dontRead {
    speak: none;
}

Ответ 2

На самом деле правильный способ сделать это - использовать ARIA role=hidden. Вот так:

<button type="button">
  <span aria-hidden="true" class="icon">&gt;</span>
  <span class="hide">Go!</span>
</button>

При этом вы скрываете симвul > , поэтому считыватели экрана не будут читать "прямоугольную скобку" и вместо этого читать "Go!". Прицельные пользователи видят только > , если визуально скрывать содержимое в классе .hide. Вот так:

.hide{
  position: absolute;
  left:-999em;
}

Роль ARIA presentation предназначена для "нормализации" семантического значения, например, <table> с role="presentation" не будет считана как содержимое таблицы и будет просто текстовым.

Если вы хотите, чтобы изображение не читалось, вы можете ввести пустой текст alt следующим образом:

<img src="decorative-flower.jpg" alt=""/>

.. или если он <svg> опускает <title> и <description>

<svg>
  <!-- <title>Remove this line</title> -->
  <!-- <description> Remove this too..</description> -->
</svg>

В некоторых редких случаях я заметил, что некоторые читатели по-прежнему читают пустые alt-изображения, поэтому вы также можете использовать aria-hidden="true".

Свойство CSS 'speak не поддерживается в этой точке, и то же самое относится к атрибуту link media = "aural".

Ответ 3

проверьте это

<h1 role="presentation" tabindex="-1">Some text that screen readers will ignore </h1>

из-за role = "presentation" и tabindex = "- 1" экранный ридер будет игнорировать вышеуказанный тег.

Я проверил это на ie8 и firefox 3.5, он работает с программой чтения JAWS.

Ответ 4

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

Ответ 5

Проблема сокрытия определенных частей информации от пользователей вспомогательных технологий заключается в том, что предполагается, что они используют ваше программное обеспечение только в какой-то темной комнате, что просто не является безопасным предположением. Многие пользователи вспомогательных технологий тесно сотрудничают с другими пользователями (для которых эта информация будет актуальной), а некоторые очень удачливые даже имеют помощников. Вам было бы разумно отказаться или подчеркнуть этот контент для них, вместо этого разместив его позже в документе как-то.