web-dev-qa-db-ja.com

Webサイトにスクリーンリーダーがサポートされていないことを通知するにはどうすればよいですか？

<noscript>を使用してと言うことができます。申し訳ありませんが、このWebサイトを実行するにはJavaScriptが必要です。

サイトはスクリーンリーダーをサポートしていませんとアナウンスする類似の方法は何ですか？ <noscreenreader>Sorry, ...</noscreenreader>のようなもの。

（短い裏話：決して言葉を使わないという考えに依存するアプリです。情報を伝えるために画像に大きく依存しています。意味がありません。話し言葉で何かを発表します。）

htmlaccessibilityscreen-readers
16
Lazar Ljubenović

スクリーンリーダーはブラウザ上で動作するため、誰かがスクリーンリーダーを使用していることを検出する簡単な方法はありません（複雑な フラッシュテクニック ）。

最善の策は、コンテンツの先頭に警告を配置し、目の見えるユーザーには警告を非表示にすることです。 この記事 いくつかのテクニックについて言及しています。

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

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

WAIARIAには「アラート」role属性があります。これは、支援技術/スクリーンリーダーの表示されているJSアラートボックスと同様に機能します。つまり、デフォルトでは、ページが読み込まれた直後にテキストが読み取られます。

（WAI ARIAは、W3Cによる「WebAccessibility Initiative – Accessible Rich Internet Applications」の略で、スクリーンリーダーなどの支援技術のためのWebアプリケーションの可能性を広げます）

したがって、以下の例のように、<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>

詳細については： https://w3c.github.io/aria-practices/#alert

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

FWIW、スクリーンリーダーを使用していないユーザーに関しては、他のオプションよりもテキストインデントを使用してテキストを非表示にする方が有利だと思います。

OSXに組み込まれているスクリーンリーダーを使用して以下のテストを確認すると、最初の2つの段落が読み取られますが、3番目の段落は読み取られません。

<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/PBrNWNdjpnWAhttps://codepen.io/panchroma/pen/yReWOa

4
David Taiaroa

最初の要素に焦点を当てていますか？その場合は、フォーカスのある要素と一緒に読み取られる、表示されていないスクリーンリーダーテキストを追加できます。他の人が言及しているように、「sr-only」クラスをグーグル検索するか、これを参照してください： Bootstrap 3？ のsr-onlyとは何ですか？）==。この：

<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>

最初の解決策と同様に、考えられる3番目の解決策は、最初の見出しまたはメイン要素に追加のテキストを関連付け、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>
0
slugolicious