スクリーンショットイメージにアクセスできるようにするにはどうすればよいですか？

Question

スクリーンリーダーのようなデバイスでは、私のウェブサイトに完全にアクセスできるようにしています。私のサイトのあるページには、多くのテキストを表示するアプリケーションのスクリーンショットがあります。参考のため、ここでの私のイメージだ：私のページで

、私は、ユーザーが読んでいることを期待しています/この画像にテキストを脱脂ので、私は基本的にすべて読むことができるようにスクリーンリーダーを必要としますこのイメージのテキスト。しかし、<img>のalt属性にはあまりにも多くの情報が含まれています。スクリーンショットに表示されるテキストの構造を保持することはできません。

私はもちろん画像全体を転写したいと思いますが、転写をどのようにフォーマットするかはわかりません。 <img>タグにARIAラベルまたは他のARIA属性のいずれかを使用できる方法はありますか？または、目に見えないブロックに別々に転写を含めるだけですか？ <pre>タグを使用してプレーンテキストでイメージを再作成するか、意味論的HTMLでイメージを作成するのが最善でしょうか？または、私が取るべきである他のアプローチがありますか？

Answer 1

あなたは短い代替テキストと代替長いテキストの両方を提供しなければならないことに注意してくださいあなたの懸念は、WCAGの1.1.1 Non-text Content以内に覆われている

：

状況B：短い説明が可能であれば同じ目的を果たしておらず、非テキストコンテンツ（チャートや図など）と同じ情報を提示しないでください：

G95: Providing short text alternatives that provide a brief description of the non-text content状況B と状況Bのために、次の長い代替テキスト技術の一つのためのQUES：longdescよう

[...]

、説明テキストはaria-describedbyを使用して提供される短い名から分離されていますHTML内のalt属性を使用して提供されます。 ARIA15: Using aria-describedby to provide descriptions of images

<img src="screenshot.jpg" 
    alt="Screenshot of my application" 
    aria-describedby="long-alternative" /> 

：

例えばalt属性を使用した画像のラベル（=短い説明）を設定した後、次の技術を使用して、aria-describedby属性を使って、その説明を設定することができます

<div id="long-alternative">insert your full text here</div> 

Answer 2

WCAG 2.0の達成基準1.3.1（情報及び関係）および3.3.2（ラベルや取扱説明書）を満たすために、以下の技術を参照してください。

https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html

基本的にあなたがアリア-describedbyのセットの属性あなたの画像のように、対応するID及び所望の情報を用いて要素を指す：

<img src="image.png" aria-describedby="description" /> 

<div id="description"> 
My description. 
</div> 

DIVユーザないREQからそれを隠すためにvisibility hidden又はdisplay noneを有することができますアクセシビリティ支援を提供する。

Answer 3

イメージタグのcssに画面のmediatypeを与えてから、メディアタイプのスピーチを持つdivやテキストを内部に作成すると思います。