今日から始れるWebページをアクセシブルにする10のWebアクセシビリティTips

sixrevisions.comの「10 Simple Web Accessibility Tips You Can Do Today」のエントリーより、今日から始れるWebページをアクセシブルにする10のWebアクセシビリティTipsの和訳です。

1.意味のあるtitle属性を使え

title属性は、ハイパーリンクの短いサマリーになるので、リンク先のページの簡単な説明をすることができます。

下記のようにリンクテキストとtitle属性は同じではいけません。バリデーションに通らないだろう。そして、その場合は、title属性を省くほうがよいでしょう。

<a href="portfolio.html" title="ポートフォリオ">ポートフォリオ</a>

良いとされる例は下記です。

<a href="portfolio.html" title="そのアーティストのアートワーク">ポートフォリオ</a>

2.重要なインタラクティブな要素を上に置け

ユーザが1つのウェブページにアクセスする必要が重要なハイパーリンクおよびユーザーインタフェースコントロールを識別します。次に、それを取得するにはTabキーを押す必要が何回カウントされます。

それに十分な速度を得るか?または狂ったようにTabキーを押す必要があるか?Tabキーが押されたときに、インタフェイスコントロールのハイパーリンクにフォーカスされいたことはないですか?

3.title属性は同じテキストで始めるな

下記のようにtitle属性を記述していることがあります。

<a href="/" title="Link to home">Home</a>
<a href="/products" title="Link to products">Products</a>
<a href="/contact" title="Link to contact">Contact</a>

JAWSのようなスクリーンリーダを使用しているユーザはページ上のリンクを見つけるために、title属性を頼りにします。

もしtitle属性が、同じテキストで始まっているならば、スクリーンリーダが組み込まれている検索機能を使用するのは難しい。

4.見出しは正しく使え

見出しタグは、スクリーンリーダを使用しているユーザにとって、興味のあるセクションへ読み飛ばしができる要素です。<h1>がセクションならば<h2>はサブセクション。

5.別個で意味のあるページ・タイトルを使え

たまに、全ページ同じタイトルの場合とページタイトルがない場合があります。 その場合は、リンクをクリックしても同じページと思ってしまうことと、スクリーンリーダを使っているユーザは、ページのコンテンツをすべて読まなければならなくなってしまう。

<head>
  <title>ホーム - E-riverstyle Design</title>
</head>
<head>
  <title>お問い合わせ - E-riverstyle Design</title>
</head>

6.スキップナビゲーションを使え

スクリーンリーダを使っているユーザは、Webページを上から下へとナビゲーションします。
マウスを使うことができないユーザやスクリーンリーダを使っているユーザは、Webサイトのプライマリーナビゲーションのような長いリストリンクをスキップすることができる。

また、スキップナビゲーションをCSSで非表示にしたい場合は、CSSを下記のように指定するほうがよい。

#skipnav {
  position:absolute;
  top:-10000px;
}

7.フォーム要素にはラベル

HTMLのWebフォームのWebサイトとの相互作用の主な方法です。ウェブ上のフォームの重要性があるため、その場合適切なマークアップを使用することを確認するのユニバーサルデザインが重要です。

有意義かつわかりやすいテキストをinput要素にラベルすると、提供しなければならない明確な情報になる。

<label for="searchbox">Enter key words to search:</label><input id="searchbox" name="searchbox" type="text" />

8.CSSとJavaScriptを無効にしてWebページをテストしろ

コンピュータのモニタ内のコンテンツを参照できない場合は、CSSやJavaScriptをオフにすることです。

これら2つのウェブ技術を無効にすると、すべてのウェブページのコンテンツにアクセスされ表示することができます。またWebページを最適な形で構成されて示しています。

9.と10.に関しては、これらの内容を含む形で別エントリとして公開します。

参照

skipリンクは少なくとも表示にすべき