0%

Programmingプログラミングナレッジ

Posted:2019.07.12

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

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

 

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

ウェブの場合、アクセシビリティというのはウェブサイトの利用しやすさを表す言葉であり、視覚障害や身体障害といったユーザーにも快適にウェブサイトを閲覧・利用できるための施策を行うことになります。具体的な施策などは考え方によりいろんなものが存在しますが、特に重要なポイントは下記になるのではないでしょうか。

・見やすいコントラスト&意味を明示させるデザイン
・スクリーンリーダーでの音声読み上げに対応している
・キーボードでの操作ができる
・モバイルでは画面のズームができる

 

視覚障害のユーザーの場合には、いろんな制限が求められ、快適に閲覧できるための工夫が必要になります。そこで以下にはこれらのポイントをメインに、コーディングで出来る施策をまとめてみました。

 

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>

 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】