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

インライン要素のアクセシビリティ：なぜ「ただのタグ」がスクリーンリーダーを混乱させるのか

現場でフロントエンドを書いていると、「とりあえず``で囲んでおけばいいか」という思考停止に陥る瞬間はありませんか？僕自身、駆け出しの頃はCSSを当てるための「ただの箱」としてインライン要素を多用していました。

しかし、アクセシビリティの観点から見ると、その「ただのタグ」がスクリーンリーダー（読み上げソフト）にとっての地雷原になることが多々あります。今回は、`a`, `strong`, `time`といったインライン要素が、ブラウザのアクセシビリティツリー（AOM）でどう解釈されているのか、そして僕たちが「意味のあるマークアップ」をするために何を知っておくべきか、深掘りしていきましょう。

—

1. ブラウザはDOMをどう「聴いて」いるのか

ブラウザはHTMLをパースする際、DOMツリーとは別にアクセシビリティツリーを構築します。スクリーンリーダーがユーザーに情報を伝えるのは、このツリーを参照しているからです。

例えば、``タグは単にフォントを太くするだけの要素ではありません。アクセシビリティツリー上では「重要性（Strong emphasis）」というセマンティクスが付与されます。一方で、``は「役割なし（Generic container）」として扱われます。

ここでの落とし穴は、「見た目の装飾」と「情報の意味」を混同することです。

``を単に太字にしたいだけで使う（本来はCSSの`font-weight`を使うべき）

``の中身がアイコンだけで、テキストが隠されている

これらは、スクリーンリーダー利用者にとって「意味のない読み上げ」や「文脈不明のリンク」を生み出す原因になります。

—

2. インライン要素の「読み上げ」をコントロールする

`a`タグのアクセシブルな名前

リンクは最も重要なインタラクティブ要素です。``タグの中身が画像だけの場合、スクリーンリーダーはリンク先のURLをそのまま読み上げてしまうことがあります。これを防ぐには、`aria-label`で文脈を補足するのが鉄則です。

`time`要素の「人間味」

`time`タグは非常に優秀です。`10月27日`と書けば、ブラウザは機械可読な日付と、人間が読むテキストを分離できます。読み上げソフトによっては「2023年10月27日」と自然に読み上げてくれるため、日付には必ず使いましょう。

—

3. 実践：明日から使える「アクセシブルなインライン装飾」

現場でそのまま使える、セマンティクスを意識した実装例です。CSSでの装飾と、意味的なマークアップを分離するのがプロの作法です。

更新日: 2023年10月27日

この設定は保存後に変更できません。

注意：詳細はこちら。

（新しいタブで開きます）

【Tips】`visually-hidden`のCSS
以下のクラスを定義しておくと、視覚的には消しつつ、スクリーンリーダーには確実に情報を届けることができます。

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

—

結論：コードは「誰に」届くのかを想像する

アクセシビリティ対応を「工数」と捉えるか、「プロダクトの品質」と捉えるか。ここでシニアエンジニアとしての真価が問われます。

`role`属性を多用して無理やり読み上げを修正するのは、HTMLのセマンティクスを汚す「対症療法」です。まずは正しい要素を選び、足りない情報を`aria-label`で補う。この基本さえ守れば、あなたのコードはスクリーンリーダー越しでも、まるで明快な文章のようにユーザーに届くはずです。

「画面を見る人」だけでなく、「画面を聴く人」の体験を想像する。その泥臭い配慮の積み重ねが、結局のところ、もっとも洗練されたフロントエンドを生むのです。さて、今のプロジェクトの``、見直してみませんか？