Webアクセシビリティのチェックに役立つブックマークレット「tota11y」

  • 公開日:

この記事の目次

ブックマークレット「tota11y」の登録と使い方

「tota11y」の登録

  1. tota11y – an accessibility visualization toolkitを開きます。
  2. 下図の赤枠で囲った部分をブックマークバーにドラッグ&ドロップします。

キャプチャー:tota11yのサイト

「tota11y」の使い方

  1. アクセシビリティをチェックしたいページを開き、ブックマークレット「tota11y」をクリックします。
  2. ブラウザの右下に表示されるメガネのアイコンをクリックすると、下図のパネルが表示されます。

キャプチャー:tota11yのメガネのアイコンをクリックした後に表示されるパネル

次のセクションから、各項目について説明していきます。

Headings (見出し)

基礎知識

スクリーンリーダーの多くには見出しだけを拾い読みする機能があり、ユーザーはその機能を用いてページの全体像を把握し、目的の情報のあるセクションに効率よく移動することができます。

見出しを手がかりに情報を探しているユーザーが効率よく目的の情報にたどりつけるように、見出しが適切に構造化されている必要があります。

見出しのチェック

h1要素が無い場合、以下のエラーメッセージが表示されます。

キャプチャー:最初の見出しがh1で無い場合に表示されるエラー

見出しレベルが途中で飛んでいる場合も、エラーメッセージが表示されます。

キャプチャー:見出しレベルが途中で飛んでいる場合のエラー

Contrast (コントラスト比)

コントラスト比のチェック

文字色と背景色のコントラスト比が下図のように表示されます。

キャプチャー:文字色と背景色のコントラスト比が表示された状態

コントラスト比が一定の基準に満たない場合には、次のようなエラーメッセージが表示されます。

キャプチャー:コントラスト比が一定の基準に満たない場合に表示されるエラー

Link text (リンクテキスト)

基礎知識

リンクテキストは、それだけを読んでリンク先を予測できるようにすることが重要です。「詳細はこちら」のようにリンクテキストからリンク先を予測できない場合、ユーザーが正しくリンクを選択することが困難になります。

リンクテキストのチェック

今のところ日本語には対応していないため、すべてのリンクテキストでエラーが出ます。

Labels (ラベル)

基礎知識

下記のコードのように、label要素を用いてフォーム・コントロールとラベルとなるテキストを関連付けることができます。

<label for="name">名前</label><input type="text" id="name">

こうすることで、フォーム・コントロールにフォーカスが移動した際に、スクリーンリーダーが関連付けられたラベルを読み上げることが可能になります。また、ラベルをクリックすると、関連付けられたフォーム・コントロールが選択されるため、操作がしやすくなります。

label要素を用いることができない場合には、title属性を用いてフォーム・コントロールを特定できるようにします。

<input type="text" title="ここに検索語を入力"><input type="submit" value="検索">

ラベルのチェック

フォーム・コントロールにラベルが関連付けられていなければ、以下のようなエラーメッセージが表示されます。

キャプチャー:ラベルが関連付けられていない場合に表示されるエラー

ラベルとなるテキストが無い場合は、フォーム・コントロールにtitle属性を付与します。

Image alt-text (画像の代替テキスト)

基礎知識

原則として、画像が伝えている情報を代替テキストとしてalt属性に記述します。ただし、装飾を目的した画像の場合には、img要素にalt属性を空にします。

画像の代替テキストのチェック

img要素にalt属性が無い場合、次のようなエラーメッセージが表示されます。

キャプチャー:img要素にalt属性が無い場合に表示されるエラー

img要素にalt属性が空の場合、エラーは表示されません。ただし、該当する画像の左上に黄色の警告マークが表示され、マウスオーバーすると"This image is decorative"というメッセージが表示されます。

キャプチャー:img要素のalt属性が空の場合に表示されるメッセージ

画像にこの警告マークが表示されている場合は、その画像が装飾だけを目的としているかどうかを再確認する必要があります。

Landmarks (ランドマーク)

基礎知識

コーディングWebアクセシビリティ』では、ランドマークロールの役割について次のように記載されています。

私たちが本当に必要としているのは、ありふれたページデザインに含まれる、きちんとしたコードによって構成されたWebページの主要コンポーネント(言うなれば有名なランドマーク)を特定する方法です。その役目を果たすのがARIAのランドマークロールです。

ARIA (Accessible Rich Internet Applications)のランドマークに対応したスクリーンリーダーを用いれば、ランドマーク間をキーボードショートカットで移動することができます。

WAI-ARIA 1.0では、ランドマークロールとして以下の8つが定義されています。

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

ランドマークロールのチェック

「tota11y」を用いれば、ページ内のランドマークロール(厳密にはすべてのrole属性)が以下のように表示されます。

キャプチャー:ランドマークロールが表示された状態

参考文献