こんにちは！2014年10月22日（水）にAccSellメール・マガジン第52号を発行しました！
- ［連載］中根雅文の「全盲のコンピューター利用に関する四方山話」
- 第51回: WindowsのWebブラウズ環境
- ［不定期連載］植木 真の「こんなブログ記事見つけました！」
- 第10回: 無料で使えるツールを使って、アクセシビリティをチェック（後編）
アクセシビリティの無料のツールってめっちゃいっぱいあるやーん！
［不定期連載］植木 真の「こんなブログ記事見つけました！」
第10回: 無料で使えるツールを使って、アクセシビリティをチェック（後編）今回は前回の「A Workflow for Testing Web Accessibility with Free Tools」というブログ記事を紹介する後編です。
それでは、さっそく「後半いってみよう！」
We All Like Titles
まずは、ページタイトルのお話です。皆さんもご存知の通り、HTMLであればページタイトルはhead要素内にあるtitle要素を用いて記述します。ページタイトルについては、JIS X 8341-3:2010でいうと、
7.2.4.2 ページタイトルに関する達成基準
ウェブページには，主題又は目的を説明したタイトルがなければならない。これが適用されます。ページタイトルは、そのウェブページが何に関するウェブページなのかが分かるように記述されているかをチェックします。必ずしもサイト内でユニークなページタイトルでなくてもよいのですが、コンテンツが異なればそれを表すページタイトルは自ずと異なってくるので、結果的にはユニークなページタイトルになるかと思います。
ページタイトルに関しては、特にチェックツールを使わなくても、ブラウザのタブに表示されるので、ワタクシの場合は特にツールは使っていません。
ALT Rock
次は、ALT。画像の代替テキストです。代替テキストをどう記述するとよいかについては、記事中でも紹介されているWebAIMのAlternative Textという記事や、HTML5仕様書（ドラフト）の4.7.1.1 Requirements for providing text to act as an alternative for imagesあたりが参考になるかと思います。
記事中では、WebAIMのWAVEを紹介しています。チェックしたいウェブページを表示した状態で、画像を使用している箇所にはそのalt属性値が表示されるので、実際のウェブページを見ながら代替テキストが適切かどうかをチェックすることができます。
ワタクシの場合、前回もご紹介したWeb Developerを普段使っています。［画像］メニューにある［alt属性値を表示］で、同じようにブラウザで表示しているウェブページ上にalt属性値を表示してくれます。何も表示されていない画像があれば、alt属性値が記述されていないか、CSSの背景画像として表示されているかということになります。
Heads Up
次は見出しです。JIS X 8341-3:2010では、等級Aの「7.1.3.1 情報及び関係性に関する達成基準」で次のように書かれています。
表現を通じて伝達されている情報，構造及び関係性は，プログラムが解釈可能でなければならない。
この「表現を通じて伝達されている」というのがポイントで、見た目に見出しの役割を果たしているものは、その見た目だけではなく、ソースコードでもh1〜h6要素のいずれかを用いて見出しとしてマークアップされているかどうかがチェックすべきポイントになります。つまり、見出しであることがマシンリーダブルかどうかということです。
WAVEでは、やはりチェックしたいウェブページを表示した状態で、h1〜h6要素でマークアップされている箇所を示してくれます。見た目に見出しなのにマークアップされていないものを容易に見つけることができます。
これもワタクシは、Web Developerを使ってチェックしています。［アウトライン］メニューの［h要素を枠で囲う］で、同じようにブラウザで表示しているウェブページ上でh1〜h6要素を用いてマークアップされている箇所を枠で囲んで表示してくれます。このとき［枠で囲う時はタグ名を表示］を選択しておけば、h1〜h6のいずれかを表示してくれるので、見出しレベルが適切かどうかまでチェック可能です。
Color Me Bad
次は、デザイナーの皆さんの頭を悩ませる色のコントラストです。この記事では、ノースカロライナ州立大学が提供しているツールを紹介しています。これはワタクシも知らなかったので、一緒に見てみましょう。
つづきはメルマガで……。