みんなが使える10のアクセシビリティTips

少し前の話になりますが、5月9日はGlobal Accessibility Awareness Day (GAAD) (世界規模のアクセシビリティ啓発デイ)でした。それに合わせてユタ州立大学のCenter for Persons with Disabilities で活動するWebAIMが10 Easy Accessibility Tips Anyone Can Useという記事を公開しました。

記事の中ではWebアクセシビリティを高めるためにコンテンツ提供者が容易に取り組める10の項目が紹介されておりました。わかりやすそうな内容でしたので、本日はその概要をお伝えします。

1. ロゴに代替テキストを設定しよう

代替テキストは、画像が表示できない環境でWebサイトにアクセスしてくる利用者に、ページ内で画像で表現されている情報を説明するために用いられます。まずは、サイトのロゴに代替テキストを付加することで、利用者がどこのWebサイトにアクセスしたのかを理解できるようにしてみましょう。
サイト内のロゴのマークアップを確認し、もしも代替テキストがなければ付加してみましょう。

2. 基本的なランドマークを追加しよう

ARIA landmarkはページ内の領域を示すために使用され、それが付加されているページは対応した環境でキーボードを使ってページ内の領域間を簡単に移動できます。まずはその中から、main、navigation及びsearchの三つを指定してみましょう。

3. フォーカスのインジケーターを拡張しよう

画面を見ることのできるキーボードの利用者は、TabキーやShift+Tabキーでページやフォームを移動します。その際、今どこにフォーカスしているかを確認しやすくするには、以下のようなCSSを追加するとよいでしょう。色はサイトの色に応じて変更しても構いませんが、区別しやすいものを選んでください。

a:focus {
outline:1px solid red;
background:yellow;
}

4. 入力フォームの必須項目を指定しよう

提供している入力フォームに、入力必須項目と入力が任意の項目が混在している場合、必須項目にaria-required="true"を指定することでどの項目への入力が必須なのかをスクリーン・リーダー利用者に知らせることができます。

5. ページタイトルは<h1>でも表現しよう

そのページの内容や機能を簡潔に表したページタイトルは一般的に、ページのメインとなる部分の先頭に大きなボールドの文字で表現されています。見出しの構造をわかりやすくするために、このページタイトルは<h1>で表現するようにしましょう。

6. テーブル見出しを指定しよう

提供しているWebサイトにデータテーブルがある場合、テーブル見出しを<th>としてマークアップし、ほかの項目と区別できるようにしましょう。

7. テーブルキャプションを指定しよう

ほとんどのテーブルは、短いテキストでそのテーブルの概要を説明できます。<caption>要素を使ってそのテーブルの概要を説明するテキストを記述しましょう。

8. 「ここをクリック」のような表現を避けよう

提供中のWebサイトで「ここをクリック」のようなリンク項目がないかを検索し、もしみつかった場合にはリンク先の内容が分かるような表現に変更しましょう。

9. tabindex属性は削除しよう

提供中のWebサイトでtabindex属性を検索し、もしその値が1かそれ以上であるにも関わらず、なぜそれが追加されているのかがわからない場合は、そのtabindex属性を削除しましょう。
tabindexではキーボードの移動順序を指定することができますが、それ以上にアクセシビリティ上の問題を引き起こす可能性があります。

10. WAVEを使ってページをチェックしてみよう

WAVE web accessibility evaluation toolは簡単に使用できるツールで、Webサイトのアクセシビリティに関するフィードバックを行うことができます。http://wave.webaim.org/にアクセスしてWebサイトのURLを入力し、Webサイトがアクセシブルかどうかをチェックしてみましょう。

ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up

• アクセシビリティ

  Webサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも