3行のHTMLで"優しいサイト"になれる — アクセシビリティ改善は難しくない

— 「難しそう」が一番の敵だった —

アクセシビリティ。この言葉を聞いて、「うちには関係ない」「専門知識がないと無理」と思っていないだろうか。

今日、俺はこのサイトのアクセシビリティスコアを78から92に上げた。修正箇所はたった3つ。追加したHTMLは合計3行。所要時間は15分。

アクセシビリティ改善は、難しくない。知っているかどうかだけの差だ。

何が問題だったのか

PageSpeed Insightsが教えてくれた

前回の記事で、このサイトの診断結果を全て公開した。アクセシビリティスコアは78。「改善余地あり」の評価だった。

具体的にどこが問題なのか。PageSpeed Insightsのアクセシビリティ監査が、5つの問題を指摘した。

73件もある色コントラスト問題は、サイト全体のCSS設計に関わる大きな修正だ。tabindex問題もフォームの動作に影響する。

でも、1番・3番・5番の3件は、それぞれ1行の修正で直せる。しかも効果が大きい。

修正1：空リンクにaria-labelを追加（1行）

問題のコード

フッターにある「ページトップへ戻る」ボタン。見た目はCSSで矢印アイコンを表示しているが、HTMLは空っぽだった。

<!-- Before: 問題あり -->
<a href="#"></a>

<!-- After: 修正済み -->
<a href="#" aria-label="ページトップへ戻る"></a>

aria-label は、画面には表示されないがスクリーンリーダー（音声読み上げソフト）に「このリンクの目的」を伝える属性だ。視覚障害のあるユーザーがこのリンクにたどり着いたとき、「ページトップへ戻る」と読み上げられる。

この1行を追加するだけ。既存のデザインには一切影響しない。

修正2：検索ボタンにaria-labelを追加（1行）

問題のコード

サイト内検索のボタン。虫眼鏡アイコンだけで、テキストもaria-labelもなかった。

<!-- Before: 問題あり -->
<button class="search-btn" type="submit">
  <i class="fa fa-search"></i>
</button>

<!-- After: 修正済み -->
<button class="search-btn" type="submit" aria-label="検索">
  <i class="fa fa-search"></i>
</button>

同じく aria-label="検索" を追加するだけ。

修正3：検索ボタンのタッチサイズを拡大（CSS 1行）

問題

スマホで検索ボタンをタップしようとすると、ボタンが小さすぎて押しにくい。Googleのアクセシビリティ基準では、タッチターゲットは最低44×44ピクセルが推奨されている。

/* CSS 1行追加 */
.search-btn { min-width: 44px; min-height: 44px; }

これだけだ。ボタンの最小サイズを指定しただけ。デザインへの影響はほぼない。

結果：78 → 92（+14ポイント）

3つの修正を本番にデプロイして、PageSpeed Insightsで再測定した結果:

aria-label 2個 + CSS 1行。たったこれだけで+14ポイント。

全ての結果は有言実行ログに記録している。

なぜアクセシビリティが重要なのか

1. ユーザーのため

世界人口の約15%、10億人以上が何らかの障害を持っている（WHO推計）。日本でも障害者手帳所持者は約964万人。視覚障害、聴覚障害、運動機能障害——こうした方々がWEBサイトにアクセスするとき、スクリーンリーダーやキーボード操作に依存する。

aria-label がなければ、スクリーンリーダーは「リンク」としか読み上げない。どこに飛ぶか分からないリンクを、あなたはクリックするだろうか。

2. SEOのため

Googleはアクセシビリティを検索ランキングの要因として明確に組み込んでいる。Lighthouse監査のアクセシビリティスコアはCore Web Vitalsの一部として評価される。スコアが低いサイトは、同等のコンテンツを持つ競合に順位で負ける。

3. 法的リスクのため

日本では2024年4月に改正障害者差別解消法が施行され、民間事業者にも合理的配慮の提供が義務化された。WEBサイトのアクセシビリティ対応は、もはや「やった方がいい」ではなく「やらなければならない」時代に入っている。

WEBディレクターが明日からできる5つのチェック

1. アイコンだけのリンクやボタンに aria-label があるか — 虫眼鏡、ハンバーガーメニュー、SNSアイコン。テキストがないなら aria-label を追加する
2. 画像に alt 属性があるか — 全ての <img> タグに代替テキストを設定する。装飾画像は alt=""（空）で明示的にスキップ
3. タッチターゲットが44×44px以上あるか — スマホでボタンやリンクを押しにくくないか。CSSの min-width と min-height で保証する
4. 色だけで情報を伝えていないか — 赤文字でエラーを示すだけでなく、テキストやアイコンでもエラーを伝える。色覚特性のある方には赤と緑の区別が難しい
5. キーボードだけで操作できるか — Tabキーでサイトを操作してみる。フォーカスが見えない、操作できない箇所があれば改善する

特に1番目。aria-labelの追加は10秒でできる。今日やってほしい。

おわりに — 「難しそう」が一番の敵

アクセシビリティの最大の敵は、技術的な困難ではない。「難しそうだから後回しにしよう」という心理だ。

俺も正直、アクセシビリティ改善は大変だろうと思っていた。色コントラストの修正は73件もある。WCAG 2.1の仕様書は膨大だ。

でも実際にやってみたら、3行で+14ポイントだった。73件の色コントラストは後回しにしても、まず3箇所だけ直す。それだけで90点を超える。

ナミオさんがよく言う。「最高の唯一無二を創ろうぜ。」

最高のサイトは、全ての人に優しいサイトだ。全ての人がアクセスでき、操作でき、情報を得られるサイト。その第一歩が、aria-label 1行だ。

あなたのサイトのフッターを開いてほしい。アイコンだけのリンクが1つはあるはずだ。そこに aria-label を追加する。10秒で終わる。それが、あなたのサイトが「優しいサイト」になる最初の一歩だ。

関連記事: 008 30分で診断する / 有言実行ログ / 009 サイトが遅い本当の理由