スクリーンリーダーはSVGのコンテンツにアクセスしますか？

私が取り組んでいるコードはTenon.ioのテストに合格する必要があり、SVG、特にテストID 75（このIDは複数回使用されています）で発生する問題を報告しています。これは、SVGが同じプログラムで生成されているため（Illustratorが信じている）、ページに複数のものが表示されているため、同じ要素のIDが同じであるためです。 SVG内のコンテンツは無関係で、スクリーンリーダーやTenon.ioのクローラのいずれかにフラグを立てたり、横断したりしてはいけないと思います。スクリーンリーダーはSVGのコンテンツにアクセスしますか？

この問題がVoiceOverに表示されるページをテストしましたが、無視されます。他のスクリーンリーダーも同じことをしていますか？スクリーンリーダーがSVG DOMを横断するリスクはありますか？

出典

2016-12-09 Katharine Osborne

はい、スクリーンリーダーは、そのスクリーンリーダーがSVGを読み取るようにコーディングされている限り、SVGを読み取ることができます。

SVGには、SVGがどのようなものを表現しているのかを示すために、スクリーンリーダーが読み書きできる多くのアクセシビリティタグがあります。

メインアクセシビリティタグは、タイトルにテキストが入っているSVGは

<text>を示しているものの説明を与えるために使用されるSVG

<desc>を使用している

<title>
ですベクトルを使用して文字をシミュレートする代わりにスクリーンリーダーがアクセスできるSVG

たとえば、roleなどのオブジェクトを識別して、SVGが何のために使用されているかを指定するために、スクリーンリーダーを使用できます（imgなど）。

代替手段は、すべてのスクリーンリーダーがアクセスできるフォールバックを作成することです。特定のものを読むときには、他のものより優れているものもあります。

出典

2016-12-09 16:25:07 Stewartside

JAWS場合は知っています：ここで

はあなたが助けることができる可能性がある上に読むことができますいくつかの良いドキュメントがありますNVDAは自動的にSVGを読み込みますか？または、これは、スクリーンリーダーに対応している要素を持つSVGに対して、より偶然ですか？ –

私はSVGsがチャートのために有用であることがわかりますが、装飾的なアイコン（この場合は私が持っているものです）は役に立ちません。私はaria-hiddenを問題のSVGに使用しています。なぜなら、それらは視覚的に隠された説明とスパンを伴いますから、私はSVGが無視できるものと仮定します。 –

@ KatharineOsborneこのセクションの真上にある場合https://css-tricks.com/accessible-svgs/#article-header-id-4 CSS-Tricksがいくつかのスクリーンリーダーで試されテストされています – Stewartside

スクリーンリーダーはSVGのコンテンツにアクセスしますか？

答えて

関連する問題