アクセシビリティについて
はじめに
こんにちは。株式会社VOWZ の Chikara です。
弊社では、定期的なアクセシビリティ講習の実施や、制作したWebページに対するアクセシビリティチェックなど、企業として継続的にアクセシビリティに取り組んでいます。
そうした活動の中で感じたのは、「アクセシビリティの知識がないエンジニアであっても、アクセシブルなサイトを作れる環境が必要ではないか」ということでした。
では、そのために必要なものは何か──その答えのひとつとして、「アクセシビリティに配慮されたモジュールテンプレートの公開」であると考えました。
今後、この取り組みをブログという形で継続的に発信していきます。実装時にそのまま使えるコードと、配慮すべきポイントもあわせて紹介していく予定です。
アクセシビリティの概要
Webアクセシビリティの定義とその重要性
Webアクセシビリティとは、障害のある方や一時的な制約のある状況下にいる人々を含め、すべてのユーザーがウェブサイトやウェブコンテンツを支障なく利用できるよう設計することを指します。
特定のユーザーを想定して使いやすさを追求する「ユーザビリティ」に対し、誰もが利用できる状態を目指す設計が「アクセシビリティ」といえるでしょう。
アクセシビリティを考慮するメリット
-
包括的な社会の実現
障害の有無に関わらず、あらゆる人が情報やサービスへ平等にアクセスできる環境が整います。アクセシビリティ対応は、社会的な公平性と包摂性を推進する重要な手段の一つです。 -
ユーザーエクスペリエンスの向上
誰にとっても使いやすいUI（ユーザーインターフェース）設計が実現し、利便性や快適さが高まります。結果として、サイト全体の満足度や滞在時間の向上にもつながります。 -
法的遵守
国や地域によっては、アクセシビリティが法的に義務付けられているケースもあります。たとえばアメリカでは、障害を理由とした差別を禁じる「ADA法（Americans with Disabilities Act）」により、公共機関やサービス提供者にアクセシビリティ対応が求められています。適切に対応することで、リスクの軽減にもつながるでしょう。 -
検索エンジン最適化（SEO）との親和性
アクセシビリティ対応は、SEOの観点からも効果的です。構造化されたHTMLや代替テキストの適切な記述は、検索エンジンにも評価されやすく、検索順位の向上が期待できます。
アクセシビリティ対応の具体例
画像に代替テキストを設定する
ネットワーク環境が不安定なときや、視覚に障害のあるユーザーがスクリーンリーダーを使用する際に読み上げられるのが「代替テキスト（alt属性）」です。すべての画像に一律で必要というわけではなく、装飾目的の画像などには空のalt属性を設定することが望ましい場合もあります。コーディングを行う際は、これらの判断基準を正しく理解することが重要です。
<img src="example.jpg" alt="晴れた空と山の写真" width="300" height="200">
<!-- widthとheightはレイアウト安定のため指定（任意） -->
ラベル又は説明（入力支援）を設定する
適切にマークアップすることで、フォームの入力が直感的になり、ユーザーの利便性が向上し離脱率の低減に繋がります。
一時停止や非表示が可能なインターフェース
自動で動くコンテンツや動画などは、ユーザーにとって負担になる場合があります。再生の一時停止や停止、非表示の機能を提供することで、ユーザーが自身で操作をコントロールできるよう配慮しましょう。
ガイドラインの必要性
アクセシビリティの対応には、決まった正解があるわけではありません。チェック結果の合否でさえ、評価基準や担当者の解釈によって差が生じることがあります。こうした現状において、エンジニアに求められるのは次のような視点です。
- どのような方法で、どこまでアクセシビリティ対応・修正を行うのか
- どの基準に基づき、どのような方法でアクセシビリティチェックを実施するのか
しかし、WCAG（Web Content Accessibility Guidelines）で定義されている達成基準は、A〜AAレベルだけでも50項目以上にのぼります。そのすべてをエンジニア個人で把握・実装するのは容易ではありません。
そこで重要となるのが、対応方針やチェック方法を整理した「ガイドライン」の存在です。明確な指針があることで、チーム間での認識統一や作業効率の向上につながります。
以下に、一般に公開されているアクセシビリティガイドラインの参考例を紹介します。
今後の活動について
Webアクセシビリティの社会的な重要性は年々高まっていますが、日本国内における認知度はいまだ十分とは言えません。アクセシビリティに精通したエンジニアも限られており、「難しそう」「手間がかかりそう」といったイメージがその要因となっているように思われます。
「重要性は理解しているが、自分で対応するのはハードルが高い」──そう感じている開発者の方々のために、コピペで導入できるアクセシビリティ対応済みのモジュールを公開していく予定です。
今後は月2回のペースでモジュールを追加し、実装の敷居を下げる取り組みを進めていきます。次回以降の更新については「タブ切り替え」「チェックボックス」「アコーディオン」など、汎用性の高いUIコンポーネントを中心に提供していく予定です。
Discussion