アクセス可能なSVG：スクリーンリーダーユーザーに最適なパターン

スケーラブルベクターグラフィックス（SVG）は、90年代後半に最初に導入されましたが、帯域幅とパフォーマンスがこれまで以上に重要となる世界で、その極端な柔軟性、高い忠実度、および比較的軽いため、過去10年間で人気が大幅に復活しました。 。 JavaScriptの進歩と、@prefers-color-schemeや@prefers-reduced-motionなどのCSSメディアクエリの導入により、SVGの機能は、Webサイトにベクター画像を表示するという当初のユースケースをはるかに超えて拡張されました。

SVGテクノロジーが進歩するにつれて、SVGをどのように設計および開発するかについての理解も進歩する必要があります。 その進歩の一部には、そのような設計とコードが実際の人間、つまりエンドユーザーに与える影響を検討することが含まれます。

この記事では、「実際に」見つかった12の異なるSVGパターンと、オペレーティングシステム、ブラウザー、スクリーンリーダーのさまざまな組み合わせからアクセスしたときに発表された各代替説明の概要を説明します。

もちろん、以下の例は、デジタル領域で使用されている可能性のあるすべてのパターンの完全なリストを意味するものではありませんが、遭遇する可能性のある、より一般的またはユビキタスなSVGパターンのいくつかを強調しています。 読み続けて、避けるべきSVGパターンと、最も包括的なパターンを見つけてください。

<img>タグを使用した基本的な代替説明

4つのパターンの最初のグループは、SVGファイルにリンクする<img>タグを利用します。 これは、Webサイト、アプリ、またはその他のデジタル製品の基本的な単純な画像に適しています。 このパターンを使用することの欠点は、多くの視覚要素やアニメーションをインラインSVGとして簡単に制御できないことですが、このパターンは全体的に明るく高速な画像をレンダリングし、複数の場所で使用するSVGのメンテナンスを容易にする必要があります。

パターン＃1： <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

パターン＃2： <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

パターン＃3： <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

パターン＃4： <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

<svg>タグを使用した基本的な代替説明

4つのパターンの2番目のグループは、インラインSVGファイルで<svg>タグを利用します。 SVGコードをマークアップに直接追加すると、ページの読み込みが少し遅くなる可能性がありますが、画像の視覚要素やアニメーションをより細かく制御することで、そのわずかな非効率性を相殺できます。 SVGをHTMLに直接追加することで、スクリーンリーダーユーザーに画像情報を提供する際のオプションも増えます。

パターン＃5： <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

パターン＃6： <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

パターン＃7： <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

パターン＃8： <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

<svg>タグを使用した拡張代替説明

4つのパターンの最後のグループは、2番目のグループと同様に、インラインSVGファイルで<svg>タグを利用します。 ただし、この場合、画像が複雑なため、簡単な代替説明を追加情報で拡張しています。

これは、より多くの説明が必要なより複雑な画像に適したパターンの選択です。 ただし、認知障害などの障害を持つ人々が、SVGコードに埋め込まれるのではなく、この追加の画像情報を画面上ですぐに利用できるようにすることで恩恵を受ける可能性があることを覚えておくことが重要です。

SVGに追加する必要のある情報の種類と量に応じて、まったく別のアプローチを取ることを検討する場合があります。

パターン＃9： <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

パターン＃10： <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

パターン＃11： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

パターン＃12： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

SVGパターンの勝者と敗者

オペレーティングシステムとブラウザのさまざまな組み合わせでさまざまなスクリーンリーダーを実行することにより、最終的な結果の表に明確なパターンが現れることがわかります。 いくつかの明確なSVGパターンの勝者と敗者に加えて、あなたが知っている限り実装でき、それらの制限を受け入れることができるいくつかのパターンが途中のどこかにあります。 結果表を見ると、次のように結論付けることができます。

<img>タグを使用した基本的な代替説明（グループ1）

ベストインショー

• パターン2 ： <img> + role="img" + alt="[words]"
• パターン3 ： <img> + role="img" + aria-label="[words]"

注意して

• パターン4 ： <img> + role="img" + aria-labelledby="[ID]"

推奨されません

• パターン1 ： <img> + alt="[words]"

<svg>タグを使用した基本的な代替説明（グループ2）

ベストインショー

• パターン5 ： <svg> + role="img" + <title>
• パターン8 ： <svg> + role="img" + <title> + aria-labelledby="[ID]"

注意して

• パターン7 ： <svg> + role="img" + <title> + aria-describedby="[ID]"

推奨されません

• パターン6 ： <svg> + role="img" + <text>

<svg>タグを使用した拡張代替説明（グループ3）

ベストインショー

• パターン11 ： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

注：このパターンは代替の説明を繰り返しているため完全ではありませんが、「注意を使用する」パターンとは異なり、テストの要素を無視しませんでした。

注意して

• パターン9 ： <svg> + role="img" + <title> + <text>
• パターン10 ： <svg> + role="img" + <title> + <desc>
• パターン12 ： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

推奨されません

• このグループのどのパターンもテストに完全に失敗しませんでした。

テスト結果

まとめ

SVGパターンテストの結果を解釈することの一部は、各スクリーンリーダーの作成者が完全にサポートする推奨ブラウザを持っていることを理解することであることに注意することが重要です。 これは、別のブラウザでスクリーンリーダーを使用するべきではない、または使用できないという意味ではありません。使用する場合、推奨されるものを使用した場合ほど結果が正確でない可能性があることを意味します。

この記事のパターンテストには、「フリンジ」カテゴリに分類される可能性のあるブラウザとスクリーンリーダーの組み合わせが含まれていましたが、独自のテストに推奨されるオペレーティングシステム、ブラウザ、スクリーンリーダーの組み合わせに関する注意事項もあります。 これらのテストの結果は、パターンのニーズと制約に基づいて、可能な限り最良のSVGパターンの決定を行うのに役立つはずです。

パターンを決定する前に、アクセシブルイメージを作成する方法とタイミングの基本を理解し、さまざまなイメージタイプに必要な代替情報を完全に理解していることを確認してください。

環境に使用するパターンを決定するための追加のヘルプが必要な場合は、記事「Good、Better、Best：Untangling the Complex WorldOfAccessiblePatterns」をチェックしてアクセス可能なパターンのトリッキーな海域をナビゲートするのに役立ててください。 このすべての情報とほんの少しの努力で武装して、あなたのSVGはすべてにもっと包括的になるために順調に進んでいます。

編集者のメモ：アクセシブルなフロントエンドパターンに関する彼女の今後のオンラインワークショップで、ガイドライン、テストツール、支援技術、包括的なデザインパターンを使用して、Carieのアクセシビリティに関するベストプラクティスを学ぶことができます。 オンライン、そしてライブ。