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

Question

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

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

Answer 1

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

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

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

.dontRead {
    speak: none;
}

Answer 2

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

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

Делая это, вы скрываете символ>, чтобы программы чтения с экрана не читали «правую угловую скобку», а вместо этого читали «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>

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

CSS свойство talk на данный момент не поддерживается, и то же самое относится и к атрибуту ссылки media = "aural".

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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