長年運営している既存のWebサイトをリニューアルする場合でも、新たなウェブサイトをゼロから立ち上げる場合でも、アクセシビリティを担保するためにできることはたくさんあります。
今の時代、デザイン制作が優れたユーザー体験（UX）の創出を前提とし、コンテンツ制作がSEOを意識して書かれるのと同様に、アクセシビリティもWeb制作の「土台」となるべきものです。
この記事では、デザイン、ライティング、開発において、アクセシビリティを意識するための7つの基礎的、かつ重要なポイントをご紹介します。
【目次】
・色とコントラストを意識する
・インタラクティブ要素を明確にする
・キャプション（字幕）を付ける
・ALT属性（代替テキスト）を最適化する
・構造と階層を活用する
・タップ（タッチ操作）領域を確保する
・キーボード操作に対応する
1.色とコントラストを意識する
色、コントラスト、そして柄は、世界中に多く存在する色覚障がいを持つ人々にとって、極めて重要です。テキスト、ボタン、フォーム入力欄など、すべてのWeb要素において、前景と背景の間に十分なコントラストを確保する必要があります。唯一の例外は、非アクティブなリンク（グレーアウトされたもの）や、純粋に装飾目的の要素のみです。「白背景に黒文字」が最もコントラストが高いのは確かですが、それが唯一の選択肢ではありません。重要なのは、コントラスト比を正しく設定することです。
また、情報を伝える手段を「色」だけに頼らないのも良い習慣です。例えば、入力用フォームの必須項目を示す際、色を変えるだけでなく、別の方法を組み合わせる方が親切です。例えば、「必須項目は赤色で表示されています」と書く代わりに、「必須項目は赤色で、アスタリスク（*）が付いています」とするなどの工夫を検討しましょう。
さらに、色だけでコンテンツを識別させるのも避けたいところです。
色の見え方には個人差があり、この「色覚多様性」により、赤いボタンがエラーを意味するように見える場合もあれば、それが伝わりづらい場合もあるかもしれません。柄やアイコン、テキストなど別の要素を追加することで、誰にとっても情報が格段に伝わりやすくなります。Adobe Colorは、色覚多様性に対応するために作られた、優れたシミュレーションツールのひとつです。
2.インタラクティブ要素を明確にする
リンク、ボタン、フォームの操作箇所など、サイト上の「インタラクティブな要素」が標準的なコンテンツと明確に区別できることが重要です。ブランドイメージに合わせつつ、視覚的に一貫性のある特徴的なスタイルを適用することで、マウス、キーボード、スクリーンリーダーなど、どのような方法で操作しているユーザーでも、それらがクリック可能であることを容易に識別できるようになります。
下記は、インターネット上で使われる技術仕様を策定・標準化している団体、World Wide Web Consortium （W3C）が挙げている例です：
（上記の図では、マウスを使わず、キーボードだけでウェブページを操作するユーザー向けに、Webページのすべての要素がキーボードを使ってアクセスでき、どの要素に焦点が当たっているかが明確にわかるようにすることを推奨しています）
3.キャプション（字幕）を付ける
ポッドキャストや動画コンテンツの人気が高まっていますが、字幕（クローズドキャプション）や音声文字変換機能を提供していないと、聴覚障がいのある方や、音を出せない環境にいる多くのユーザーを取り込む機会を逃すことになります。音声コンテンツには、話されている内容だけでなく、話者の交代や重要な音響効果などのコンテキスト（文脈）を含めた文字起こしを提供しましょう。
動画の場合は、字幕と文字起こしの両方を用意するのが理想的です。視覚的な情報も、テキストで補足することで、より伝わりやすくなります。
4.ALT属性（代替テキスト）を最適化する
ALT属性は、視覚障がいのある方がスクリーンリーダーを通じてWebコンテンツを「聴く」ためのものです。写真やイラスト、グラフィックを掲載する際にALT属性を空欄にしていると、それらのコンテンツは多くのユーザーにとって存在しないも同然になってしまいます。
この欄に単に「写真」や「画像」とだけ書くのは避けましょう。その画像が何を表しており、ページの文脈においてどう関連しているかを簡潔に記述します。「電話越しに相手にその画像を説明する」ようなイメージで書くのがコツです。ここを空欄にすると、スクリーンリーダーはファイル名を読み上げてしまいますが、UXの観点から、それは好ましくないでしょう。
5.構造と階層を活用する
Webサイトを開発する際、HTML要素を使ってテキストのスタイルを設定します。例えば、＜h1＞タグは大きく太いフォント、＜h3＞はやや太いフォントにする、といった具合です。
見出しタグ（＜h1＞～＜h6＞）を本来の目的通りに使用することで、論理的な階層構造が生まれます。これにより、特に支援技術を使用しているユーザーがコンテンツ内を移動しやすくなります。この構造がバラバラだと、情報のナビゲーションは途端に困難になります。
これらの要素がどのように機能すべきかを明確に定めたスタイルガイドを用意しておくことで、視覚効果を目的としたナビゲーションスタイルの誤用を防ぐことができます。ただし、実際にはこれよりもはるかに複雑になる場合があります。アクセシブルなナビゲーションには、単なるテキストのスタイル設定以上の要素が関わってくるため、ウェブ開発の専門家に相談することを検討するのが良いでしょう。
6.タップ（タッチ操作）領域を確保する
ボタンやリンクなどのタッチ操作領域を十分に確保することは、運動機能に制限がある方だけでなく、すべてのユーザーにとって不可欠です。
特にモバイル端末では、操作エリアが十分に大きくないと誤操作を招きます。デザイン上、どうしても領域を大きくできない場合は、ボタンの配置やデザインを変える検討をしましょう。例えば、YouTubeのモバイルアプリでは、再生/停止ボタンが（デスクトップのように）左下にあるのではなく、動画の中央部を広く使うことで操作性を高めています。
厳密なサイズ規定はガイドラインを参考にするかによって異なりますが、自身のサイトやアプリで実際にテストを繰り返し、最適なサイズを見つけることが重要です。
7.キーボード操作への対応
これまでのステップをすべて踏んだとしても、ナビゲーションができなければ意味がありません。キーボード操作は、マウスやタッチスクリーンだけに頼らない、よりユニバーサルな選択肢です。
最低限、すべてのインタラクティブな要素（リンク、ボタン、フォームの入力欄）を「Tab（タブ）」「Enter（エンター）」「Space（スペース）」キーだけで操作できるようにすることを推奨します。コード上で明確な階層構造が作られていれば、これらのキーを使って論理的かつ直感的な操作が可能になります。
8.まとめ
このリストは、アクセシビリティを完璧にするためのすべての要素を網羅しているわけではありませんが、Webデザインに取り掛かる際に「アクセシビリティを意識している」と言えるようになるための良いスタート地点となります。
今では、数多くのWebアクセシビリティを検証できるツールが存在していますので、ぜひご自身のWebページを様々な方法でテストしてみてください。そして可能であれば、実際のユーザーからフィードバックをもらうことをお勧めします。サイトをよりアクセシブルにすることは、結果的にすべてのユーザーにとっての体験を向上させることにつながります。
