web-dev-qa-db-ja.com

スクリーンリーダーのテキストのみを非表示にする

WCAGはaria-hiddenタグで実行できると言っていますが、多くのスクリーンリーダーでは機能していないと読みました。

display:noneがスクリーンリーダー（= SR以外の他のデバイスに表示される）の一部のテキストonlyを非表示にするのにどのように役立つかわかりません。これは、CSSをサポートしていない場合、スクリーンリーダーがdisplay:noneに対してどのように機能するかについても明確ではありません。

スクリーンリーダーのテキストonlyを隠すために使用できるテクニックやベストプラクティス、または何かありますか？

htmlcssaccessibilityhidden-text
1
jiostoph

スクリーンリーダー専用のテキストを非表示にするためのテクニックやベストプラクティス、または使用できるものはありますか？

あなたの質問の「何でも」の部分に答えることができます。

画像を作成し、画像操作プログラムを使用してテキストを追加します。次に、最も秘密のアプローチとして、CSSを使用して、DIV要素の背景として画像を定義します。

開始に役立つコードは次のとおりです。

<html>
<head>
<style>
#secret{background-image:url('/path/to/imagewithwords.jpg');width:Wpx;height:Hpx;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>

私のコードでは、画像の幅と高さを示すためにWとHを使用しました。スタイル宣言のこれらの文字をすべて表示するには、ピクセル単位の画像の実際の幅と高さに置き換える必要があります。たとえば、画像がファイル名secret.jpgとしてドキュメントルートフォルダに保存され、画像の幅が100ピクセル、高さが200ピクセルの場合、次のコードを使用します。

<html>
<head>
<style>
#secret{background-image:url('/secret.jpg');width:100px;height:200px;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>

ブラウザは、DIVがブロック要素であることを尊重し、ブラウザがそうでない場合は、{の直後にdisplay:block;を追加する必要があります。

私の方法の唯一の注意点は、画像自体の一部であるため、画面の解像度やブラウザの設定に関係なく、テキストは常に固定サイズでなければならないということです。

1
Mike