Weblog　 11のアクセシビリティTips

| HOME |

11のアクセシビリティTips

『11 Accessibility Tips - Css Globe』から。
今回はアクセシビリティのおべんきょー。

アクセシビリティを高める11のTipsです。

いつもの如く，意訳には全く自身がございません。

1．スタイルシートを適用しなくても読めるように構築する

これは最も重要なTipです。きちんとページを構築する事を特に注意して下さい。見出しを使って内容部を記述し，リストを使って，論理的な流れを持たせて制作して下さい。その流れを作る為に，スタイルシートに頼らないで下さい。

CSSに対応していない閲覧環境というものもあるワケですから，ページの流れをCSSに頼って作ってしまうのは頂けないという事だと思います。

2．リンクは切り離す

ちょうどホワイトスペースより多くのものとの連続したリンクを切り離して下さい。スクリーン閲覧者は、1つのリンクとして2つの(またはより多くの)切り離されていない連続的なリンクを解釈する傾向があります。

要するに，“<a href="...">リンク1</a><a href="...">リンク2</a>”って感じに記述すると2つのリンクがくっ付いて表示されて1つのリンクに見えるからやめろと。

3．意味のあるリンク

前後から読み，リンクが意味をなしているか確認して下さい。例えば，“ここをクリック”は“記事を読む”に。

リンクのテキストはジャンプ先が何なのかわかるようにしましょうという事だと思います。

4．コンテンツへのスキップリンク

閲覧者が反復的にナビゲーションリンクからスキップ出来るようにして下さい。ページの最上位に同じナビゲーションを設置するのなら，閲覧者がページをロードする度に下にスクロールしなければならないので，直接コンテンツへジャンプ出来るようにして下さい。これはスクリーン閲覧者には関係がありません。ウェブまたはモバイルウェブに非常に役立ちます。

ちょっとキツい意訳ですが，恐らくは，携帯端末でのウェブ閲覧が楽になるように，コンテンツへスキップ出来るリンクなどを用意してページ内の移動を容易くしましょう的な事かと。

5．非テキストデータにテキストを

通常，私達はここの画像について話します。テキストデータを持たせ，画像の意味を簡潔に述べる為に，alt属性を使いましょう。また，より長い説明の為にlongdesc属性があります。意味を持たない画像は，空のalt属性を使って下さい。テキストデータを持たせる他の方法は，コンテンツ内で非テキスト要素の意味を説明する事になっています。

テキストの代わりに画像を使う際はalt属性にテキスト内容を入れておきましょう。長い時はlongdesc属性を使いましょう。って事でしょう恐らく。

6．リンク画像

上記とかぶりますが，リンクに画像だけを使う時は慎重にして下さい。テキストデータ無しだと，スクリーン閲覧者にはリンクを表示する事が出来ません。スクリーン閲覧者がリンクテキストとしてそれを認識出来るように，alt属性を使いましょう。

さっきと一緒です。
リンクを画像にする時もalt属性を忘れずに。

7．テーブル

行と列ヘッダを特定しましょう。ヘッダには他のスタイルで整えられる規則的なtd要素ではなく，th要素を使って下さい。また，テーブルの見出しを記述する為に，caption要素を使って下さい。caption属性を使いたくないなら，ほとんど言葉で見出しを記述しない為に，title属性を使って下さい。テーブルの説明をする為に，summary属性を使って下さい。これは，特に非視覚的閲覧者に役立ちます。

表のヘッダ部分はth要素を使いましょう。表の見出しはcaption要素を使いましょう。見出しを付けたくないならtitle属性を付けましょう。summary属性で表の説明を付けて，視覚障害者が使う音声ブラウザに対応しましょう。って事ですね。