実践的な制作手順
SVGロゴのアクセシビリティ：適切な要素に名前を付ける
カフェのカップマークには、単独で店を識別する、表示中の店名を飾る、ホームリンクに入るという3つの役割があります。すべてに同じタイトルを付けると、操作の意味を伝えずに読み上げを繰り返すことになりかねません。
架空のCedar Cupで同じパスを3つの実際のHTML文脈に使いました。Ciyoがコードと描画を作り、保管したページを開いて画像とリンクの公開名を確認しました。名前の付け方を確かめた例で、スクリーンリーダーの認証ではありません。
その場でのロゴの役割を決める
SVG単体ではなく周囲のページから考えます。店を示す唯一の情報でしょうか。既に店名が文字で見えていますか。全体がリンクでしょうか。その答えで情報を持たせる要素を決めます。
viewBox 0 0 120 100、塗り#7A4A2Aのカップパスを用意しました。3例とも形は同じです。変えるのは名前、非表示の装飾、リンクの文字で、ブランドの描画ではありません。
既存のSVGパスを変更せず使ってください。単独の情報ロゴCedar Cup、見えるCedar Cup文字の横の装飾コピー、装飾アイコンを含むCedar Cup homeというホームリンクを実際のHTMLで示します。適切なtitle、role、ARIAを使い、ページを描画・確認してください。公開される名前とキーボードフォーカスを調べ、正確なHTMLを返します。単独の情報を伝えるマークに名前を付ける
単独の例ではrole="img"とaria-labelledbyを使い、最初の子要素titleを参照します。titleの内容はCedar Cupです。ブラウザはその名前の画像を1つ公開し、装飾の形の説明ではなく店の識別を伝えます。
必要な各インライン要素には固有のtitle IDを使います。同じIDを繰り返すコンポーネントは別要素に名前を結び付ける場合があります。このデモは情報を伝えるコピー1つと明示的なIDを使っています。
重複する装飾のコピーは隠す
Cedar Cupという文字が既に見える場合、この例では隣のカップは重複です。aria-hidden="true"とfocusable="false"を使い、識別は文字に任せ、マークは見た目として残します。
ほかにない情報を伝えるマークにはこの処理を適用しないでください。装飾例に似ているからといって意味のある内容を隠すと、必要な情報が失われます。
| 文脈 | 名前の出所 | SVGの扱い |
|---|---|---|
| 単独のマーク | 参照したtitle：Cedar Cup | role="img" |
| 店名の横のマーク | 表示文字Cedar Cup | aria-hidden="true" |
| ホームリンク | 表示文字Cedar Cup home | リンク内の装飾SVG |
ホームリンクに意味の分かる名前を付ける
リンクに見える文字はCedar Cup homeです。SVGは装飾で、操作の名前は文字から得ます。デモのリンク先はローカルな#homeですが、本番では実際のホームのURLを使います。
独立して開いたデモでTabを押しました。ホームリンクにフォーカスが移り、ブラウザはCedar Cup homeを名前として公開しました。装飾SVGは別の画像項目を作りませんでした。このページで観察できた限定的な結果です。
公開するページで名前を確認する
保存HTMLを開き、アクセシビリティツリー、キーボード順、見えるラベルを調べます。ヘッダーに組み込んだ後も確認します。周囲のボタン、重複した店名、別リンクで利用者が出会う内容は変わります。
SVGのtitleは意味のある操作テキストの代わりではありません。機能を持つ要素が目的を明確に伝える必要があります。別の用途なら明快な表示ラベルか確認済みのアクセシブルな名前を選び、文脈を無視してコピーしないでください。
引き継ぎに使い方も添える
開発者に原本SVG、3文脈の例、どのコピーが情報でどれが装飾かを示すメモを渡します。最終ページと、対象者が使う支援技術での確認を依頼します。
色と名前は別々に確認します。名前が正しくても暗い背景で消えるロゴや、見えていても不明瞭なリンク名を持つロゴはあり得ます。
よくある質問
すべてのSVGロゴにtitleが必要ですか？
使う文脈で判断します。このデモは単独の識別マークにtitleを付け、重複する装飾を隠しています。
SVGのtitleだけでリンクに名前を付けられますか？
機能を持つ要素の名前を明確にします。この例では見えるCedar Cup homeの文字をリンク名にしています。
すべてのスクリーンリーダーで試しましたか？
いいえ。ブラウザの公開名とキーボードフォーカスを確認しました。最終画面は適切な支援技術で確認してください。
実際の文脈でロゴを1つ見直す
情報、装飾、リンクの例をCiyoに依頼し、用途に合うコードを確認済みサイト実装に取り入れましょう。