アイコンのみのコントロール

Silktide は、閉じるボタンの×印、ハンバーガーメニュー、検索用の虫眼鏡など、アイコンだけでラベル付けされ、アイコンを見られない人向けのテキストによる名前が付いていないボタンやリンクを探します。

<!-- 問題: このボタンが何をするのか読み上げられない -->
<button><svg>…</svg></button>

<!-- 修正: コントロールに名前を付ける -->
<button aria-label="メニューを開く"><svg>…</svg></button>

重要な理由

視覚のあるユーザーは、アイコンの形や周囲の状況から、アイコンボタンが何をするものか判断できます。のユーザーには同等の代替手段がありません。がない場合、使用しているソフトウェアは名前のない「ボタン」または「リンク」と読み上げるか、アイコンの CSS クラス名などの残ったコードを読み上げます。名前のないアイコンのみのコントロールはすべて、そのユーザーが見えない状態で操作するか、完全にスキップしなければならないコントロールです。しかも、こうしたコントロールはページ上で最も重要なものであることがよくあります。メニュー、検索、閉じる、次へなどです。

修正方法

コントロールが何をするかを説明するラベルを追加します。アイコンがどのように見えるかではありません。aria-label="検索" とし、aria-label="虫眼鏡" とはしないでください。
同じ文言が近くに表示されている場合は、それを重複させるのではなく、aria-labelledby で参照します。
アイコンが <img> の場合は、意味のある alt テキストを付けることでもコントロールに名前を付けられます。
コントロールが役に立つ動作をせず、装飾だけを目的として存在する場合は、名前を付けるのではなく、操作できない要素にします。

Silktide によるチェック方法

各ページに表示されるボタン、リンク、開示コントロールを見つけます。role="button" や role="link" を持つ要素も含みます。
すでに名前が付いているコントロールを除外します。対象は、2 文字以上の表示テキスト、aria-label、aria-labelledby、または title 属性です。
残ったコントロールにアイコンが含まれているかをチェックします。対象は、インライン SVG、空の alt テキストを持つ画像、または認識可能なアイコンフォントで描画されたテキストです。
アイコンは表示されているものの、名前が付いていないコントロールを報告します。

トラブルシューティング

別の方法でコントロールにラベルを付けている

Silktide は aria-label、aria-labelledby、title、表示テキスト、画像の alt テキストを認識します。これら以外の仕組みでコントロールに名前を付けている場合（これはまれです）は、スクリーンリーダーで実際に名前が読み上げられることを確認し、読み上げられる場合はその検出結果をしてください。

アイコンが装飾目的で、テキストの隣に配置されている

意味のある表示テキストを含むコントロールは、テキストの横にアイコンがあっても報告されません。コントロールが報告された場合、そのテキストは意味のある 2 文字に達していません。×などの 1 文字の記号はラベルとして扱われません。