Как объявить, что на сайте нет поддержки чтения с экрана?

Мы можем использовать <noscript> чтобы сказать "Извините", для этого сайта требуется JavaScript для запуска.

Каким образом можно объявить, что сайт не поддерживает программы чтения с экрана? Что-то вроде <noscreenreader>Sorry,...</noscreenreader>.

(Короткая предыстория: это приложение, зависящее от идеи никогда не использовать слова. Оно в большой степени полагается на изображения для передачи информации. Было бы бессмысленно ничего говорить на разговорном языке.)

Ответ 1

Экранные читатели работают поверх браузера, поэтому нет простого способа (только некоторые запутанные методы Flash), чтобы обнаружить, когда кто-то его использует.

Лучше всего разместить предупреждение в начале содержимого и скрыть его для зрячих пользователей. В этой статье упоминаются несколько методов.

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<div class="hidden">Sorry, this website requires JavaScript to run.</div>

Ответ 2

В WAI ARIA есть атрибут role "alert", который будет действовать аналогично видимому ящику предупреждения JS для вспомогательных технологий/расширителей экрана, то есть по умолчанию его текст будет считан сразу после загрузки страницы.

(WAI ARIA означает "Инициатива доступности Интернета - Доступные богатые интернет-приложения" W3C, которая расширяет возможности веб-приложений для вспомогательных технологий, таких как устройства чтения с экрана)

Таким образом, вы можете создать невидимый элемент, содержащий этот атрибут непосредственно в начале вашего <body>, как и в моем примере ниже.

(Примечание. Не используйте display: none в таком сообщении - большинство читателей экрана воспримут это как указание НЕ читать его текст!)

#screenreader_alert {
  position: fixed;
  left: -50px;
  width: 1px;
  height: 1px;
  color: transparent;
  overflow: hidden;
}

<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>

Ответ 3

<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>

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

Если вы проверите приведенный ниже тест со встроенным устройством чтения с экрана в OSX, первые 2 абзаца будут прочитаны, но не будут третьим.

<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>

https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa

Ответ 4

Вы сосредотачиваетесь на исходном элементе? Если это так, вы можете добавить дополнительный текст с экрана чтения, который не будет виден, который будет читаться вместе с элементом, который имеет фокус. Как уже упоминалось, выполните поиск google для класса sr-only или посмотрите: что такое sr-only в Bootstrap 3? , Возможно, что-то вроде этого:

<button>
  I'm the first focusable element
  <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>

Если у вас нет начального фокуса, вы можете сделать первый элемент в DOM, который имеет tabindex="0" который содержит скрытый текст, чтобы при запуске пользователем экрана чтения с экрана через интерфейс они услышали текст как первое, но это менее желательное решение, потому что вы обычно не хотите, чтобы неинтерактивный элемент имел tabindex="0". Что-то вроде этого:

<html>
  <body>
    <span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
    <!-- the rest of your real code -->
  </body>
</html>

Возможным третьим решением, аналогичным первому, является наличие дополнительного текста, связанного с вашим первым заголовком или основным элементом, и сосредоточение внимания на этом элементе с помощью tabindex="-1". "-1" означает, что пользователь не может использовать клавишу Tab, чтобы добраться до нее. Что-то вроде:

<html>
  <script>
    function myload() {
      document.getElementById("myid").focus();
    }
  </script>
  <body onload="myload()">
    <h1 id="myid" tabindex="-1">
      Welcome to my site
      <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
    </h1>
  </body>
</html>