コンテンツは、ちゃんと意味的なものにしておき、レイアウトも魅惑的にしておくだけでなく、ソース順において論理的に意味をなすようにもしておくべきです。使えば必ず望みどおりの場所にコンテンツを配置できますが、ソース順は、その順で読み始めるのが適切なようにしておくべきです。すれば、スクリーンリーダーのユーザーが読み上げさせたものが、意味をなすことでしょう。コントロールという言葉によって意味しているのは、ユーザーが対話的に操作する対象の、ウェブドキュメントの主要部分のことであり、もっとも一般的には、ボタン、リンク、およびフォーム・コントロールのことです。本節では、そうしたコントロールを作る際に認識しておくべき基本的なアクセシビリティの問題を見てゆきましょう。アクセシビリティの他の側面について見ることにします。コントロールをキーボードで操作できるようにしている、ということです。これを新規タブで開いて、タブキーを押してみてください。二、三回押してみた後には、フォーカス可能な異なる要素の間をタブ・フォーカスが動き回り始めたのだと分かるはずです。(そのスタイルは、異なるブラウザ間では少し差があります)。(他のフォーム要素には別のコントロールがあります。要素は、選択肢を表示させることや、上下の矢印キーを用いて選択肢の間を行ったり来たりさせることができます)。異なるブラウザでは、異なるキーボード・コントロール・オプションを使用可能としている場合があります。した振る舞いは、たとえば以下のように単に適切な要素を用いるだけで、本質的にはただで手に入ります。要素を含めています)。変なことをする場合がときにはあるものです。用いてマークアップしたボタンを見かけることも、ときにはあります。me!</div>しかし、そうしたコードを使うことは、勧められることではありません。スタイル付けを何も得られないからです。例示的コードを試せます。(タブキーを通じてのフォーカスを含みます)。持たせられるようにすることを、主に意図したものです。これはほとんどの場合、筋の悪い考え方です。重大な混乱を招きかねないからです。属性を使うようにしてください。レイアウトによって、物事がソースコードとはまるで違った見かけ上の順序で示されており、かつ、より論理的に物事を機能させたいと望んでいるような場合です。あと二つの選択肢があります。上記のとおり、この値によって、普通ならタブキーでの移動が可能ではない要素が、タブキーでの移動が可能となります。プログラム的にフォーカスを得たり、あるいはリンクのターゲットとしてフォーカスを得たりすることが可能となります。リターンキーを介してボタンをアクティブにすることはできるようになりません。ごまかしを追加せねばなりません。オブジェクトにリスナーを追加しています。プロパティを介して調べています。以上の二つの文の「ボタン」はキーボード上のキーのことのようです。プロパティは非推奨になっています。ボタンのことのようです]。ページ上で現在フォーカスの当たっている要素を教えてくれます。介して設定した場合にのみ、この技法がうまくいくだろうということに留意すべきです。これでは、機能を呼び戻すように盛り込むための、余計な厄介ごとの山ですね。それに、これにともなう他の問題もきっとあるはずです。そもそも、単にふさわしい要素をふさわしい役割に使うべきなのです。コントロールのテキストラベルはあらゆるユーザーにとって大変有益ですが、そうしたラベルを適切なものにしておくことは、とりわけ、障碍のあるユーザーにとって重要です。ボタンとリンクテキストのラベルが、理解可能であり、かつ弁別性のあるものになっていることを、確認すべきです。ラベルとして単に「ここをクリック」を使うのはいけません。スクリーンリーダーのユーザーは、ボタンとフォーム・コントロールの一覧をまとめ上げることがあるからです。よって一覧化されたコントロールを示しています。以下のものは、良いリンクテキストの例を示しています。<p>クジラは本当にすごい生き物です。href="whales.html">クジラについてもっと知ってくださいね</a>。</p>しかしこれは駄目なリンクテキストです。<p>クジラは本当にすごい生き物です。href="whales.html">ここをクリックしてください</a>。いう記事で知ることができます。フォーム・ラベルも重要です。各フォーム入力欄に何を入力する必要があるのかについての手がかりを与えてくれるからです。以下のものは、十分に筋の通った例のように見えます。name="name">しかしこれは、障碍のあるユーザーにとって、それほど有用ではありません。このラベルを曖昧性なしにフォーム入力欄に結びつけ、そして、仮に入力欄が見えなくても、入力欄をどう埋めたら良いのかを明確にしてくれるものが、上記の例には何もありません。なんらかのスクリーンリーダーでこの例にアクセスした場合には、「テキストを編集する」のような感じの説明のみが与えられることもあるかもしれません。以下のものは、ずっと良い例です。name="name"></div>このようなコードだと、ラベルが明確に入力欄と結びつけられることになります。テキストを編集する」といった感じのものになるでしょう。アクティブ化することが可能なことを意味します。このことにより、入力欄に対して、より大きなヒット領域を与えることになり、したがって、入力欄が選択しやすくなります。いくつかの良いフォーム例と悪いフォーム例を見られます。アクセシブルなデータテーブル基本的なデータテーブルは、たとえば以下のように、とても簡素なマークアップで書けます。</tr></table>しかしこれには問題があります。スクリーンリーダーのユーザーには、行または列をデータの集まりとしてまとめて関連づける手段が何もないのです。した関連づけを行うには、見出し行がどれなのか、見出し行は複数の行を統率しているのか、複数の列を統率しているのか、などといったことを知らねばなりません。参照して、その例をご自分で試してみてください)。ここでは、多少のアクセシビリティ支援が機能していることが分かりますね。要素を用いて定義されています。属性を使って、その見出しが行に対する見出しなのか列に対する見出しなのかを指定することもできます。すると、スクリーンリーダーが一つの単位として処理できる、データの完全なグループが示されることになります。属性は、どちらも似たような役割を果たします。テキストとして機能し、スクリーンリーダーのユーザーに対して、テーブルの中身についての有用で手短な要約を示すのです。中身がアクセシブルだからであり、晴眼者のユーザーもその中身を有用だと思うでしょう。二つとも必要というわけではありません。いう記事を参照してください。代替テキストテキストによるコンテンツは本質的にアクセシブルですが、マルチメディア・コンテンツについては必ずしも同じことが言えるわけではありません。動画コンテンツは視覚障碍者には見えず、音声コンテンツは聴覚障碍者には聞こえません。要素についてのアクセシビリティを見てゆきましょう。いう簡単な例を書き上げました。枚の同じ画像を含んでいます。赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。枚目の画像は、スクリーンリーダーで見たときに、実際のところ大した手助けをユーザーに与えてはくれません。image」と読み上げます。なんらかの手助けを提供しようとしてファイル名を読み上げるわけです。アップロードされる場合もよくありますし、そうしたファイル名は画像の中身に対する文脈を何も与えてはくれないでしょう。これこそが、画像の内部にテキストコンテンツを決して含めるべきではない理由です。スクリーンリーダーは、まったくそのテキストコンテンツにアクセスできません。それに、他の欠点もあります。ペーストすることもできません。属性を丸々読み上げます。「赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります」と読み上げます。属性において確実に提供しておくことの重要性を、際立たせるものです。属性の中身は常に、画像の端的な描写と、画像が視覚的に伝えているものとを提供すべきであることに、注意してください。ここには、個人的な知識や追加的な説明を何も含めるべきではありません。以前にその画像に出くわしたことのない人にとって有益ではないからです。考えるべきことの一つは、画像がコンテンツの内部で意味を持っているのか、あるいは、純粋に視覚的装飾のためのものであって意味は持たないのか、ということです。背景画像としてページ内に含めるだけにする方が良いのです。属性の内部に入れるべきです。属性と、ファイル名とを読み上げるでしょう。テキストをツールチップとして表示します。番目の方法についてもざっと見ておきましょう。属性をまったく使っていません。ラベルとして使わせることになります。使ってではできない事柄なのです)。