Web ページ上の SVG ファイルのアクセシビリティを向上させるいくつかの方法についての簡単な説明

(推奨チュートリアル: html チュートリアル)

SVG は画像ファイル形式で、英語の正式名は Scalable Vector Graphics で、「スケーラブル」を意味します。ベクトルグラフィックス。この記事では、Web ページ上の SVG ファイルのアクセシビリティを向上させる 7 つのソリューションを紹介します。

1. 画像として使用される SVG ファイル

SVG が の src としてインポートされる場合は、必ず role="img" 属性を追加します:

role="img" を追加しない場合、一部のスクリーン リーダーはnot を画像として認識し、alt 値を読み出すだけです。

2. SVG をアイコンとして使用する

SVG をアイコンとして使用する場合は、aria-hidden="true" を使用して非表示にしてくださいアクセス デバイスから、視覚的に隠された兄弟要素をアイコンのテキストの意味論的説明として追加します。

  
  Close

上記と同様に、アクセスデバイスから非表示にするには、aria-hidden="true" を .sr-only は、いわゆる視覚的に隠された要素です。これらは視覚的に見えないだけですが、スクリーン リーダーによって読み取られます。

3. IE のバグ

Web ページが IE と互換性がある必要がある場合、 を使用するときに、次のことを行う必要があります。 focusable="false" 属性を明示的に追加します。

理由は、IE ブラウザの SVG に関するバグです。ご存知のとおり、SVG はデフォルトではフォーカスされませんが、IE では、SVG がリンクやボタンなどのフォーカス可能な要素に含まれている場合、Tab を使用してフォーカスできます。これにより、親要素がフォーカスされた後に、子要素が再度フォーカスされるという状況が発生します。

4. Safari 10 のバグ

Safari 10 では、 に が含まれている場合、必ずスペースで区切ってください。

そうしないと、キーボードのタブを使用してここにアクセスすると、そこにジャンプできなくなります。以降のバージョンでは修正されているため、Web ページで Safari 10 をサポートする必要がある場合は、この点に注意する必要があります。

5. SVG を画像として使用する

SVG ファイルを別の画像として使用し、2 番目の項目と同様に、視覚的な隠し要素を追加する必要がある場合があります。意味論的な記述として使用されます。

  
  Simply Accessible

の形式で説明を追加することを選択しなかった理由は次のとおりです 一部のスクリーン リーダーは、フォーカス可能な要素の外で使用すると、aria-label 属性を正しく読み取れません。

6. IE8 ブラウザのサポート

IE8 ブラウザでは、 の タグが表示されるため、そのようなブラウザをサポートするにはタグを非表示にする必要があります。

 ... 

7. 色のコントラスト