アクセシブルネームの計算をわかりやすく解説

アクセシブルな名前とは、スクリーンリーダーが要素に対して読み上げる短いラベルです。buttonのSubmitやフィールドのSearchなどが該当します。

要素にアクセシブルな名前がないと、スクリーンリーダーはbuttonのようにroleだけを読み上げるため、ユーザーは何をするものかわかりません。

名前を直接設定することはほとんどありません。ブラウザーはマークアップに対して名前の計算アルゴリズムを実行し、各要素の呼び名を決定します。

アルゴリズムは決まった優先順位で情報源を確認し、最初に見つかったものを使います。この順序を知っていれば、結果を予測できます。

最も優先順位が高いのはaria-labelledbyです。存在する場合、他のすべての情報源に優先し、指定された要素からテキストを集めます。

labelledbyがない場合、ブラウザーはaria-labelを使います。これは要素に直接入力する、読み上げ用の文字列です。

次に使われるのは、inputに関連付けたlabelや画像のaltテキストなど、ネイティブの情報源です。可能な限りこれらを使ってください。

多くの要素では、名前はテキストコンテンツにフォールバックします。Saveと表示されたbuttonなら、追加の属性がなくても名前はSaveになります。

最も優先順位が低い情報源はtitle属性です。ほかに適切なものがない場合にのみ要素の名前になり、見落としやすい情報源でもあります。

計算された名前は1つの文字列に平坦化され、余分な空白はまとめられます。そのため、改行やインデントがユーザーに伝わることはありません。

nameは要素の呼び名で、descriptionはその後に読み上げられる補足情報です。ここでは、まず名前を正しく設定することに集中します。

名前の計算の順序を学びました。labelledby、aria-label、ネイティブのラベルとコンテンツの順で確認され、titleが最後です。🧩