無料で使えるツールを使って、アクセシビリティをチェック(後編)アクセシビリティの無料のツールってめっちゃいっぱいあるやーん!第52号の全文はこちらからお読みいただけます。(閲覧にはメール・マガジンでお知らせしているユーザーネームとパスワードが必要です。Tools」というブログ記事を紹介する後編です。Titlesまずは、ページタイトルのお話です。皆さんもご存知の通り、HTMLであればページタイトルはhead要素内にあるtitle要素を用いて記述します。ページタイトルに関する達成基準ウェブページには,主題又は目的を説明したタイトルがなければならない。ページタイトルは、そのウェブページが何に関するウェブページなのかが分かるように記述されているかをチェックします。サイト内でユニークなページタイトルでなくてもよいのですが、コンテンツが異なればそれを表すページタイトルは自ずと異なってくるので、結果的にはユニークなページタイトルになるかと思います。ページタイトルに関しては、特にチェックツールを使わなくても、ブラウザのタブに表示されるので、ワタクシの場合は特にツールは使っていません。Rock次は、ALT。画像の代替テキストです。imagesあたりが参考になるかと思います。記事中では、WebAIMのWAVEを紹介しています。チェックしたいウェブページを表示した状態で、画像を使用している箇所にはそのalt属性値が表示されるので、実際のウェブページを見ながら代替テキストが適切かどうかをチェックすることができます。Developerを普段使っています。[画像]メニューにある[alt属性値を表示]で、同じようにブラウザで表示しているウェブページ上にalt属性値を表示してくれます。何も表示されていない画像があれば、alt属性値が記述されていないか、CSSの背景画像として表示されているかということになります。情報及び関係性に関する達成基準」で次のように書かれています。表現を通じて伝達されている情報,構造及び関係性は,プログラムが解釈可能でなければならない。この「表現を通じて伝達されている」というのがポイントで、見た目に見出しの役割を果たしているものは、その見た目だけではなく、ソースコードでもh1〜h6要素のいずれかを用いて見出しとしてマークアップされているかどうかがチェックすべきポイントになります。見出しであることがマシンリーダブルかどうかということです。WAVEでは、やはりチェックしたいウェブページを表示した状態で、h1〜h6要素でマークアップされている箇所を示してくれます。見た目に見出しなのにマークアップされていないものを容易に見つけることができます。Developerを使ってチェックしています。[アウトライン]メニューの[h要素を枠で囲う]で、同じようにブラウザで表示しているウェブページ上でh1〜h6要素を用いてマークアップされている箇所を枠で囲んで表示してくれます。このとき[枠で囲う時はタグ名を表示]を選択しておけば、h1〜h6のいずれかを表示してくれるので、見出しレベルが適切かどうかまでチェック可能です。Bad次は、デザイナーの皆さんの頭を悩ませる色のコントラストです。この記事では、ノースカロライナ州立大学が提供しているツールを紹介しています。これはワタクシも知らなかったので、一緒に見てみましょう。つづきはメルマガで......。第52号の全文はこちらからお読みいただけます。(閲覧にはメール・マガジンでお知らせしているユーザーネームとパスワードが必要です。