【実務・中級編】インライン要素のアクセシビリティとARIA属性 – HTML実践ガイド

インライン要素に「意味」を宿らせる：ARIAでアクセシビリティを最大化する実務的アプローチ

フロントエンドの世界に足を踏み入れて数年、「``をdiv代わりにするな」という教訓は、もはや耳にタコができるほど聞かされてきたはずだ。しかし、実務の現場では、デザインカンプの要求や複雑なコンポーネントの構造上、どうしても意味のない``や``に役割を与えなければならない局面がある。

そこで今回は、「ただの装飾」になりがちなインライン要素を、スクリーンリーダーにとって「雄弁な案内役」に変えるための、ちょっとシビアなアクセシビリティ論を展開しようと思う。

—

ブラウザはどう解釈しているのか？（アクセシビリティツリーの真実）

まず、ここを履き違えているエンジニアが多い。ブラウザのDOMツリーと、スクリーンリーダーが参照する「アクセシビリティツリー」は別物だ。

我々が``タグを書き、そこに`role=”button”`を付与した瞬間、ブラウザは「これはリンクではなくボタンである」とアクセシビリティツリー上で再定義する。しかし、この時、HTML本来の「リンクとしての挙動（Enterキーでの遷移やTab操作のフォーカス順序）」までが自動的に書き換わるわけではない。

「HTMLのセマンティクス（本来の意味）」と「ARIAのロール（補助的な役割）」の不一致は、アクセシビリティにおける最大の地雷だ。 原則として、ARIAを使うよりも、まずは正しいHTMLタグを使うことを優先すべきだ。だが、それがどうしても叶わない時のための「正しいARIAの処方箋」を伝授する。

—

実践：その``と``を「意味あるもの」に変える

1. ボタンとして振る舞う``の救済

デザイン上の理由でどうしても`button`タグを使えない場合、`span`に適切なロールとキーボード操作を付与する必要がある。

保存

解説: `tabindex=”0″`はフォーカスを当てるために必須だ。これがないと、スクリーンリーダーユーザーはマウスでクリックするまでその要素の存在に気づけない。また、`aria-label`で具体的な動作を補足することで、文脈が希薄なアイコンボタンなどでも迷わせない配慮ができる。

2. ``タグの「読み上げ」を最適化する

リンクの中にアイコンとテキストが混在している場合、スクリーンリーダーはそれらをバラバラに読み上げることがある。これを一つの塊として認識させるのがコツだ。

設定

解説: ここで最も重要なのが `aria-hidden=”true”` だ。装飾用のアイコン（⚙️）は、スクリーンリーダーにとってノイズでしかない。「設定ギア」と読み上げられてもユーザーは混乱するだけだ。`aria-hidden`で装飾を消し、`a`タグ全体に`aria-label`を付与することで、情報量を最適化している。

—

守るべき「ARIAの黄金律」

現場で若手に必ず伝えている鉄則がある。これを守るだけで、バグの半分は防げる。

1. ARIAよりもHTMLを優先せよ： `role=”button”` を付けるくらいなら `