検索

ホームページ  >  に質問  >  本文

スクリーン リーダー ユーザーにアクセス可能なテキストを HTML で提供するにはどうすればよいですか?

<p>数字が入った色付きの div がある Web サイトがあります。たとえば、内側に数字 2 が入った赤いブロックなどです。色は理解する上で重要です。視覚障害のあるユーザーが私に電子メールを送り、スクリーン リーダーで「2 赤」を読み上げてもらえないかと尋ねてきました。 </p> <p>alt="2 red" として追加してみましたが、何も起こらないと言われました。彼は、これは画像の alt タグを読み取るだけかもしれないと考えました。 </p> <p>div 要素を使用してこれを行う良い方法はありますか? </p>
P粉426780515P粉426780515531日前565

全員に返信(2)返信します

  • P粉492959599

    P粉4929595992023-08-23 15:43:06

    2020 年を編集: 現在、display:none または visibility:hidden を使用すると、一般的にコンテンツが視覚的にもスクリーン リーダーにも非表示になるようです (Firefox および Chrome の NVDA でテスト済み)。そのため、次のステートメントは次のようになります。無効。 現在、コンテンツを画面外に移動することが、スクリーン リーダー ユーザーにコンテンツを提供する唯一の方法のようです。次の表も参照してください。 http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

    受け入れられた回答に特に明記されていない限り、少なくとも Chromevox1 と NVDA2 は display:none## を持つファイルも読み取ります #または、aria-hidden=false が設定されている場合は、要素の visibility:hidden CSS プロパティ。ただし、これは現在 Chrome (65) のみで行われ、Firefox や Edge では行われません (私のテストによると)。

    したがって、(現時点では Chrome でのみ可能です)、次のこともできます:

    リーリー

    Chromevox と NVDA が最初と 2 番目のヘッダーを読み取る場所。 参照:

    https://jsfiddle.net/4y3g6zr8/6/

    すべてのブラウザーがこの動作に同意した場合、他のソリューションで提案されているすべての CSS トリックよりもクリーンなソリューションとなるでしょう。

    1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn 2NVDA https://www.nvaccess.org/

    返事
    0
  • P粉594941301

    P粉5949413012023-08-23 10:57:50

    代替テキストに関しては、おっしゃる通りです。画像でのみ機能します。ただし、次のように、aria-label を使用して非画像要素の alt 属性を置き換えることができます。

    効果的な解決策

    ARIA タグ ★ ★ ★ ★ ★ ★

    aria-label (別の要素のテキストからアクセス可能な名前を抽出する aria-labelledby と混同しないでください) は、画面外の説明コンテンツを要素に追加するために使用されますalt= 属性と同様、画面外の説明コンテンツを画像に追加し、画像が表示できない場合に使用されます。

    違いは、

    aria-label が画像以外の要素にも使用できることです。 リーリー

    内部テキストを非表示にするには、

    aria-hidden 属性を追加します。

    折り折りの位置 ★ ★ ★ ★

    リーリー

    トリミングは、画面上にまだ表示されている 1 ピクセル x 1 ピクセルの要素を完全に非表示にするために使用されます。

    ポジショニング ★ ★ ★

    リーリー

    インデント★

    リーリー

    ページ レイアウトの範囲を超えている限り、実際のインデント値は重要ではありません。例では、コンテンツを 5,000 ピクセル左に移動します。

    この解決策は、テキストの完全なブロックに対してのみ機能します。アンカー、フォーム、右から左へ記述する言語、または他のテキストと混合した特定のインライン テキストではうまく機能しません。

    機能しない

    可視性: 非表示; および/または表示: なし;

    これらのスタイルはテキストを非表示にして、すべてのユーザーに表示されないようにします。テキストはページの視覚的なフローから削除され、スクリーン リーダーによって無視されます。コンテンツをスクリーン リーダーで読み上げたい場合は、この CSS を使用しないでください。ただし、スクリーン リーダーでコンテンツを読み取れないようにしたい場合は、これを使用してください。

    幅:0px;高さ:0px

    上記と同様、高さや幅のない要素はページ フローから削除されるため、ほとんどのスクリーン リーダーはこのコンテンツを無視します。 HTML の幅と高さは同じ結果を生成する場合があります。スクリーン リーダーでコンテンツを読み取れるようにする場合は、コンテンツ サイズを 0 ピクセルに設定しないでください。

    ＃＃＃詳しくは：＃＃＃

    WebAIM障害センター
    • Fangs Mozilla スクリーン リーダー エミュレーター

    • 返事
      0
  • キャンセル返事