アクセシビリティ向上のためにコーディングで出来ることまとめ

HTML2019.7.12

最終更新日：2019.7.12 Update!!

先日、ある案件でウェブアクセシビリティへの対応が要件に含まれており、勉強になったのでこの機会にまとめておきたいと思います。ウェブ制作の場合、どうしてもクリエイティブな側面に注目されがちですが、どんな環境や条件でも利用しやすいサイト作りを目指すことも重要です。

ウェブにおけるアクセシビリティとは？

ウェブの場合、アクセシビリティというのはウェブサイトの利用しやすさを表す言葉であり、視覚障害や身体障害といったユーザーにも快適にウェブサイトを閲覧・利用できるための施策を行うことになります。具体的な施策などは考え方によりいろんなものが存在しますが、特に重要なポイントは下記になるのではないでしょうか。 ・見やすいコントラスト＆意味を明示させるデザイン ・スクリーンリーダーでの音声読み上げに対応している ・キーボードでの操作ができる ・モバイルでは画面のズームができる 視覚障害のユーザーの場合には、いろんな制限が求められ、快適に閲覧できるための工夫が必要になります。そこで以下にはこれらのポイントをメインに、コーディングで出来る施策をまとめてみました。 1. 文字色と背景色のコントラストを適切に アクセシビリティを考慮しなくても、見やすいデザインは重要ですが、色については特に気をつけなければなりません。文字色と背景色のコントラストが弱くならないようにします。

// NG（背景色が白で文字色が黄色のため見にくい）

div {
 background-color: #fff;
 color: #ff0;
}


// OK

div {
 background-color: #fff;
 color: #222;
}

2. テキストリンクには下線をつける テキストリンクの場合、クリックができることを明示しなければなりません。デフォルトではa要素には下線が付きますが、デザインが優先されリセットCSSなどで下線が削除されている場合には下記のように表示されるようにしておきましょう。

a, a:link {
 text-decoration: underline;
}

3. lang属性の設定 ウェブサイトに使われている言語がどこの国の言葉であるかをlang属性を使って明示させておきます。html要素に設定することが多いようです。

<html lang="ja">
 <head>
  ……………
 </body>
</html>

4. img要素のalt属性を適切に設定する alt属性は代替テキストとも呼ばれ、画像が表示されない場合に代わりとして表示されるテキストのことです。スクリーンリーダーで音声読み上げ時にはalt属性も読み上げられますが、その時に直前の要素と重複する場合には、繰り返して音声が読み上げられることになります。直前の要素の内容を補足的に示している画像の場合にはalt属性に入れるテキストは考えましょう。必要がない場合には空にしておくのも有効です。

// NG（音声読み上げ時に見出しと代替テキストが繰り返される）

<h1>アクセシビリティについて</h1>
<img src="./img/about-accessibility.jpg" alt="アクセシビリティについて">
<p>アクセシビリティとは全ての人が快適にウェブサイトを………</p>


// OK

<h1>アクセシビリティについて</h1>
<img src="./img/about-accessibility.jpg" alt="">
<p>アクセシビリティとは全ての人が快適にウェブサイトを………</p>

5. title属性の代替テキストを活用 img要素にはalt属性が代替テキストとして用いられますが、それ以外の要素であるリンクやインラインで表示されたマップなどのコンテンツにはtitle属性を使います。値にはその要素が持つ意味を説明できるような内容を設定します。

<a tilte="トップページへ" href="http://example.com">Home</a>

<iframe tilte="会場周辺のGoogleMap" src="https://www.google.com/maps/embed?………"></iframe>

6. aria-label属性の活用 title属性と同じようなものですが、要素に明示的なラベリングを行う場合にはaria-label属性も用いられることも多いです。特にクリックされるようなボタンの補足説明として採用されます。見た目では意味や目的が伝わりにくいですので、これらを有効に活用しましょう。

// 例
<button aria-label="閉じる"> X </button>
<button aria-label="ページトップへ"> ↑ </button>
<button aria-label="前の記事へ"> ＜ </button>
<button aria-label="次の記事へ"> ＞ </button>

7. キーボード操作で要素へアクセス 身体が不自由な方の中にはマウスの操作が難しい場合もあります。そのようなケースではキーボード操作への対応が求められます。具体的にはtabキーで要素にフォーカスされ、キーボードのキー（Enterキーなど）でクリックなどの操作ができるようにする必要があります。その際には要素に対して「tabindex属性」を付けるとフォーカスの対象になります。値にはフォーカスされる順番などが設定できますが、0で入れておくと要素の登場順になるので特にこちらで問題ありません。またクリックイベントだけではキーボードだと操作できなくなるので、「keypress」などのイベントも追加しておきましょう。

<div tabindex="0" id="clickable">こちらをクリック！</div>

<script>
 $(function(){
  $("#clickable").on('click keypress', function(){
   ………………
  });
 });
</script>

8.モバイルでの画面ズーム 目が不自由な方の中には、モバイル端末の小さい画面が見にくいと感じられるユーザーもいるかと思います。そんな時にピンチインで画面が拡大ズームできるようにしておくと親切です。metaタグのviewport設定にはズームできるような設定をしておきましょう。

// NG（ズーム時の最大倍率が100%になっている）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">


// OK

<meta name="viewport" content="width=device-width,initial-scale=1">

9. 動画や音声メディアの自動再生OFFとユーザー側での制御 少し視点は異なりますが、ウェブサイトの中に動画や音声データが含まれる場合には自動で再生されないようにした上で、ユーザー側で再生や停止といった制御ができるようにしておきます。

// NG（自動再生が有効になっている）

<video src="movie.mp4" autoplay></video>
<audio src="music.mp3" autoplay></audio>


// OK（場合によっては操作用のUIを設定してあげると良い）

<video src="movie.mp4" controls></video>
<audio src="movie.mp3" controls></audio>

今回はウェブサイトのアクセシビリティ対応についてコーディングで出来ることをまとめてみました。これ以外にもいろんな要件が求められるケースもあるかと思いますが、どんな条件や環境でも快適にウェブサイトが閲覧できるようにするため、常にこれらのポイントは心がけておきたいですね。