こんにちは。アイレット株式会社デザイン事業部の鶴若です。
2024年4月1日から、障害者差別解消法の改正により、民間事業者も「合理的配慮」の提供が義務化され、制作者もウェブアクセシビリティを確保することが求められるようになっていきます。
実装する時につまづきやすい点を説明していこうと思います。

そもそもWebアクセシビリティとは

Webアクセシビリティとは、高齢者や障がい者を含む、すべての人がWebサイトやアプリを問題なく利用できるようにすることです。

ユーザーにとって、Webアクセシビリティが確保されていることは、Webサイトを閲覧したり、サービスを利用したりする上で、ストレスなく快適な体験を得られることを意味します。例えば、視覚障がい者はスクリーンリーダーで情報を読み取れるように、聴覚障がい者は字幕や文字起こしで動画コンテンツを理解できるように、といった配慮が必要です。

開発者は、Webアクセシビリティを実現するために、WCAG (Web Content Accessibility Guidelines) などのガイドラインを遵守する必要があります。具体的には、HTMLの構造を正しく記述し、代替テキストを提供することでスクリーンリーダーに対応したり、キーボード操作だけでサイト全体を操作できるようにしたり、色覚異常者にも配慮した配色にするなど、様々な技術的な工夫が必要です。

参考資料: WCAG2.2
https://waic.jp/translations/WCAG22/

実務でつまづきやすい点

画像のalt属性が適切ではない

alt属性が設定されていない場合、スクリーンリーダーを使っているユーザーにとって、画像の内容がわからなくなります。コンテンツの内容的に重要な場合、その画像の内容を適切に記述する必要があります。画像のalt属性は、視覚障害を持つ人々が画像の内容を理解するための不可欠な要素であり、ウェブアクセシビリティの根幹を支える技術の一つです。本記事では、alt属性の適切な記述方法と、それがウェブアクセシビリティにどのように貢献するかについて解説します。


ヘッダーなどにある企業ロゴの場合は下記のような感じですが、

1
<img src="logo.png" alt="iret" />

弊社の正式名称は「アイレット株式会社」なのでSEOを重視するならこちらの方が適切になります。

1
<img src="logo.png" alt="アイレット株式会社" />

クライアントのブランド戦略にもより見た目だけでは判断できない場合もあります。

また、関連企業のリンク一覧なのでよくある下記のようなデザインだと、altも「アイレット株式会社」にするとスクリーンリーダーで二重で同じ文言が読み上げられることになっていますので「iretのロゴ」とするか「altを空（alt=””）」にすると良いでしょう。

1
2
3
4
5
<ul>
    <li>アイレット株式会社
<img src="logo.png" alt="iretのロゴ" />
<a href="https://www.iret.co.jp/">https://www.iret.co.jp/</a></li>
</ul>

下記のようにfigcaptionに画像の十分な情報が記載されているならaltが空でも問題ない場合もありますが、複雑な画像や図表の場合はaltに詳細な情報を記述した方が適切です。

1
<figure><img src="logo.png" alt="" /><figcaption>アイレット株式会社</figcaption></figure>

例に出した物は簡単なロゴのaltでしたが、図表のaltになると少し変わってきます。
2010〜2024年にかけて50億円から100億円に売上が伸びた棒グラフの画像があったとしたら、全ての情報を入れると少し冗長になっていまうので下記のようにざっくりとした情報でも良いでしょう。

1
<img src="chart.png" alt="売上高のグラフ：2010年50億円から2024年は100億円に売上高は右肩上がりになっています" />

このように画像のalt属性は、単に画像そのままのテキストを入れるのが正解ではないケースが多々あり、エンジニアだけでは判断しにくい部分もあります。疑問に思ったらディレクターやクライアントに確認をとるなど、こまめなコミュニケーションを心がけましょう。適切なalt属性を記述することは、後々の修正の手間を省き、ウェブサイトのアクセシビリティを高めることに繋がります。すべてのユーザーにとって使いやすいウェブサイトを目指し、日々のウェブ制作でalt属性の記述に注意を払いましょう。

リンクテキストが不十分

「こちら」や「詳細」など、リンクが何を指しているのかが分かりづらい場合があります。スクリーンリーダーを使っているユーザーにとって、このようなリンクテキストは非常に困難です。

下記のようなリンクはよく見かけるかと思います。

1
○○の詳細は<a href="detail.html">こちら</a>

テキストを修正

リンクテキストは、文脈から独立して理解できることが望ましいです。スクリーンリーダー利用者がリンク一覧だけを抽出して聞いた場合でも、各リンクの目的が分かるようにすることが理想的です。
「○○の詳細ページ」のように、リンク先の内容を具体的に示すのが良いでしょう。

1
<a href="detail.html">○○の詳細ページ</a>

aria-labelを利用

クライアントの意向などでテキストが変更できない事もあるかと思います。
その場合は「aria-label」を設定することでスクリーンリーダーにその部分が読み上げられ、どこに移動するかを明確に伝えることが可能です。
ただし、過度な使用は避け、可能な限りリンクテキスト自体を修正する方が望ましいです。
また、aria-labelを使用する際には、リンクテキストの内容と矛盾がないように注意が必要です。

1
○○の詳細は<a href="detail.html" aria-label="○○の詳細ページへ移動">こちら</a>

参考：
達成基準 2.4.4 リンクの目的 (コンテキスト内)
https://waic.jp/translations/WCAG22/#link-purpose-in-context

フォームのラベルが不足

フォームの入力フィールドにラベルが適切に設定されていない場合、スクリーンリーダーを使っているユーザーがフィールドの意味を理解できなくなります。

1
2
名前
<input id="name" name="name" type="text" />

各フォーム要素にはラベルタグを使用し、for属性で対象の入力フィールドを明示的に関連付けます。

1
2
<label for="name">名前</label>
<input id="name" name="name" type="text" />

ラベルが使用できない状況や複雑なフォームの場合、aria-labelまたはaria-labelledby属性を使用することも可能です。

1
<input id="name" name="name" type="text" aria-label="名前を入力" />
1
2
<span id="name-label">名前</span>
<input id="name" name="name" type="text" aria-labelledby="name-label" />

ラジオボタンなどの場合少し記述が変わりラベルで包む形になります。

1
2
<label for="type"><input id="type_1" name="type_a" type="radio" />A</label>
<label for="type"><input id="type_2" name="type_a" type="radio" />B</label>

placeholder属性でinput上にテキストを表示する事ができますが、これは「データの種類のヒントとなる単語や短いフレーズ」を設定する為の属性です。なのでラベルの代替として使用することは避けましょう。また、placeholder属性のテキストのみではアクセシビリティの確保はできません。

適切なタブインデックスの設定

フォームやインタラクティブな要素にタブインデックスが正しく設定されていない場合、キーボードナビゲーションを利用しているユーザーにとって、ページ内の要素を適切に移動することができません。

tabindex属性を使用して、タブ順を管理します。

  • tabindex=”0″: 要素をデフォルトのタブ順序に含めます。
  • tabindex=”1″, “2”, “3”… (正の整数): タブ順序を明示的に指定します。値が小さい要素から順にフォーカスされます。
  • tabindex=”-1″: 要素をタブ順序から除外します。
1
2
<input id="name" tabindex="1" type="text" />
<input id="email" tabindex="2" type="text" />

何らかの理由でタブ移動をスキップさせたい場合は「-1」を設定します。

1
<input id="name" tabindex="-1" type="text" />

メガメニューなどでクリックなどのアクションを起こさないと表示されないUIは、display:none; または aria-hidden=”true” と tabindex=”-1″ の組み合わせで、タブ移動をスキップさせることが可能です。

  • aria-hidden=”true”: 要素を非表示にします。
  • tabindex=”-1″: キーボードのタブ移動から要素を除外します。
  • display:none;: 要素自体を完全に非表示にします。SEOやJavaScriptとの連携に影響を与える可能性があるため、注意が必要です。
  • visibility: hidden;: 要素を視覚的に非表示にしますが、タブ順序からは除外されません。

aria-hidden=”true” のみでは、要素内にフォーカス可能な要素がある場合など、タブ移動を完全にキャンセルできないケースがあります。そのため、タブ移動を確実にキャンセルしたい場合は、tabindex=”-1″ と aria-hidden=”true” の組み合わせ、もしくは display: none; を使用してください。

上記の点を踏まえて、tabindex属性を適切に設定することで、キーボードユーザーの操作性を向上させることができます。

カラーコントラスト

文字と背景のカラーコントラストが不十分だと、視覚に障害があるユーザーにとって内容を読み取るのが困難になります。W3Cのガイドラインでは、通常のテキストは4.5:1以上、大きなテキスト（18pt以上またはボールド14pt以上）は3:1以上のコントラスト比が推奨されています。

しかし、カラーコントラストはデザイン上の制約も多く、エンジニアだけで判断が難しい場合があります。明らかにコントラストが低い部分や疑わしい箇所が見つかった場合は、以下のカラーコントラストチェッカーのようなツールを使用してコントラスト比を確認し、デザイナーに修正を依頼しましょう。

カラーコントラストチェッカー：
https://chromewebstore.google.com/detail/%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%B9%E3%83%88%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/lncflajadhabgilcllpmmlifgoifglla?hl=ja

コントラスト比のガイドラインが適用されないケースもあります。例えば、ロゴや装飾的な要素など、情報伝達の役割を持たない要素は例外となります。

1
<h1>○○についてAbout</h1>

ただし、少しでも情報補足の役割を持つ要素はコントラスト比の基準を満たすようにしましょう。また、背景と文字のコントラストが極端に低い場合は、視覚特性によっては読みにくく感じるユーザーもいるため、常にアクセシビリティに配慮したデザインを心がけましょう。

ARIA属性の不足

ARIA（Accessible Rich Internet Applications）属性は、スクリーンリーダーなどの支援技術に対して、Webコンテンツの構造や状態を正確に伝えるために不可欠です。動的なコンテンツやJavaScriptで生成されたコンテンツなど、HTMLのセマンティクスだけでは情報が不足する場合に、ARIA属性を使用することでアクセシビリティを向上させることができます。

例えば、aria-live属性を使用すると、コンテンツが動的に変化する際に、その変化を支援技術に通知できます。aria-live="polite"は、他のコンテンツが読み上げ終わった後に通知し、aria-live="assertive"は、直ちに通知します。

1
<div class="content" aria-live="polite"><!-- 動的に変化する内容 --></div>

ARIA属性は多岐にわたるため、適切な属性を選択し、正しく設定することが重要です。以下のドキュメントなどを参考に、各属性の役割と使用方法を理解しましょう。

また、むやみにARIA属性を追加するのではなく、HTMLのセマンティクスを優先し、必要な場合にのみ使用することが大切です。

まとめ

Webアクセシビリティは、すべてのユーザーがストレスなくWebサイトを利用できるようにするための重要な取り組みです。特に、2024年4月の法改正により、民間事業者にとっても「合理的配慮」の提供が義務化されるため、これまで以上にアクセシビリティの確保が求められます。

本記事では、実装の際につまづきやすい点として「alt属性の適切な設定」「リンクテキストの明確化」「フォームのラベル付け」「タブインデックスの管理」「カラーコントラストの確保」などを紹介しました。これらのポイントを押さえることで、より多くの人が快適に利用できるWebサイトを構築できます。

アクセシビリティ対応は一度きりの作業ではなく、サイト運営を続ける中で継続的に改善していく必要があります。デザイナー・エンジニア・コンテンツ制作者が連携し、ユーザー目線でのアクセシビリティ向上を意識することが大切です。

今後も、技術の進化やガイドラインの改定に伴い、Webアクセシビリティの考え方は発展していきます。最新の情報をキャッチアップしながら、誰にとっても利用しやすいWebを目指していきましょう。