アクセシビリティ
アクセシビリティ(Accessibility)とは、高齢者や障害者を含む誰もが支障なく利用できる度合いのことです。
回線品質、端末の性能、ブラウザの設定など、さまざまに異なる利用環境においても情報取得に重大な問題が起こらないようにすることが大切です。
- 利用者が情報やインターフェース要素を認知できること。
- 利用者がインターフェース操作できること。
- 利用者が情報やインターフェース操作を理解できること。
- コンテンツや支援技術が堅牢であること。
1.画像には代替テキストを提供する
ユーザーが画像表示を無効に設定している場合や、回線状況など何らかの原因によって画像が読み込めない場合
<img src="image.jpg" alt="代替テキスト"/>
代替テキストは画像をイメージできるように記述する必要があります。
2.テキストの体裁とアクセシビリティ
スペースを使ったテキストの整形は行わない
悪い例)
<table>
<tr>
<th>名 前</th>
<th>郵便番号</th>
<th>住 所</th>
</tr>
</table>
スペースは音声ブラウザで読み上げた場合問題が起きる可能性があるため、CSSを使用すべきです。
英語の略語は大文字で、英単語は小文字で
HTML エイチティーエムエル
WEB ダブリューイービ
Web ウェブ (頭文字のみ大文字はOK)
web ウェブ
小文字を大文字、頭文字だけ大文字にしたい時はCSSを使います。
適切なフォントサイズと指定方法
通常12px、小さくても10pxまでにしておくと多くのユーザーに対して可読性を確保できます。
フォントサイズはユーザーが変更できるようにしておきます。
ー>CSSでフォントサイズを相対指定します。
ただし、文字を大きくしたことでも文字が欠けたり、画面が崩れては意味がありません。フォントサイズが変更されることを想定したデザインが必要です。
3.キーボードでの操作に配慮する
キーボードのみで操作を行うユーザーに対しての配慮
キーボードでは、TABキーによるリンクや入力コントロールの移動が主になります。
TABキーによる移動の順序 tabindex属性
キーボードショートカット accesskey属性
フォーカスされている部分の可視化
「:focus」疑似クラスによってフォーカス時のスタイルを指定できます。
4.特定の技術に頼りすぎないWebサイトの設計
特定技術を使える環境にないユーザーは、その情報にアクセスできません。
JavaScriptが無効の場合
noscript要素による告知
<noscript>
<p>JavaScriptを有効にしていただくとすべての機能がお使いいただけます。</p>
</noscript>
JavaScriptが使えなくても重要な情報へのアクセス経路は確保されるように配慮することが大切です。
FLASHとPDFがインストールされていない環境への配慮
重要なナビゲーション部分はFLASHに含まずHTMLで提供します。
プラグインがインストールされていない環境向けに、プラグインのインストールページへのリンクを分かりやすく掲載しておきます。