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

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

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

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

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

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
     role="img" alt="Simply Accessible">

<a href="#">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
       role="img" alt="Simply Accessible">
</a>

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

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

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

<a href="#">
  <svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
    <use xlink:href="#icon-close"></use>
  </svg>
  <span class="sr-only">Close</span>
</a>

<svg display="none" version="1.1" viewBox="0 0 32 32">
  <defs>
    <g id="icon-close">
      <path class="path1" d="M31.708 25.707v0l-9.708-9.708 9.708-9.708c0.104-0.104 
      0.18-0.227 0.229-0.356 0.134-0.355 
      0.058-0.771-0.229-1.058l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.131 
      0.049-0.254 0.125-0.357 0.229l-9.708 
      9.708-9.708-9.708c-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 
      0.229l-4.586 4.585c-0.286 0.286-0.361 0.702-0.231 1.058 0.051 0.13 0.125 
      0.252 0.23 0.356l9.709 9.708-9.708 9.708c-0.105 0.104-0.18 0.228-0.23 
      0.357-0.132 0.354-0.056 0.771 0.23 1.057l4.586 4.586c0.286 0.286 0.702 
      0.361 1.057 0.229 0.131-0.050 0.252-0.125 0.357-0.229l9.708-9.708 9.708 
      9.708c0.104 0.104 0.227 0.18 0.357 0.229 0.355 0.133 0.771 0.057 
      1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 
      0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357z">
      </path>
    </g>
  </defs>
</svg>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>

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

3. IE のバグ

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

<svg focusable="false">...</svg>

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

4. Safari 10 のバグ

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

<svg> <use>...</use> </svg>

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

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

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

<a href="https://simplyaccessible.com">
  <svg role="img" focusable="false"> <use xlink:href="#sa_logo"></use> </svg>
  <span class="sr-only">Simply Accessible</span>
</a>

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

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

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

<!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

7. 色のコントラスト

SVG アイコンをデザインするときは、色に弱いユーザーや、ハイ コントラストの黒い背景テーマ (ハイ コントラスト テーマ) で使用するユーザーを必ず考慮してください。ユーザー。たとえば、アイコンをデザインするときは、明るい色の境界線が付いた単色の背景を使用することを検討してください。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がWeb ページ上の SVG ファイルのアクセシビリティを向上させるいくつかの方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。