“アクセシビリティ” タグの記事（20件）

CMS で作成されたサイトで、下層ページの一覧などにページのタイトルとサムネイル画像、ページの概要があり、そのタイトルとサムネイル画像それぞれに、リンク先となる同じページへのリンクが貼ってあるパターンをよく見かけます。例えば、次のような HTML です。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><a href="hogehoge.html"><img src="thmbnail.jpg" alt="" /></a></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

サムネイル画像が左に、ページタイトルと概要がその右にあるようなデザインでは、1行目と2行目が逆の場合もありますし、サムネイル画像の代替テキストにページタイトルが付けられている場合もあります。

しかし、このような HTML は、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになりますし、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなります。

これではアクセシビリティ的に問題がありますので、これを解消する3つの方法を考えてみます。

“タイトルとサムネイル画像の重複リンク” の続きを読む »

弱視の方がパソコンを利用される際に通常の配色では眩しい場合など、画面の配色をハイコントラスト（白黒反転）に設定して利用されることが多いのですが、Windows でハイコントラストに設定すると、背景色や背景画像は表示されなくなります。そのため、通常の配色では見えない配慮が必要になる場合があります。（ちなみに Mac の機能にあるカラー反転は、背景を含めてすべての色が反対色になります。）

まず、配慮以前の問題なのですが、“オフレフト” や “画像置換” などと呼ばれるコーディング手法は致命的な問題が発生します。これは、HTML 上のテキストを text-indent: -9999px などとして画面の外に飛ばし、代わりに画像テキストを背景として配置するというもので、ナビゲーションやタイトル部分など、今でも多くの Web サイトで取り入れられています。

しかし、これをハイコントラスト設定で見ると、当然背景として配置した画像は表示されませんので、その部分は何も見えない真っ黒な空間になってしまいます。

テキスト情報なので SEO にも有利で、スクリーンリーダーでも読み上げられるからアクセシビリティも向上するなどという誤った考え方が広まったこともありますが、これは全くの論外で、装飾目的でない意味のある画像はきちんと代替テキストを伴った img 要素を使って HTML に記述すべきです。

“ハイコントラスト環境への配慮” の続きを読む »

画像の代替テキスト（alt 属性）は、Web アクセシビリティの基本中の基本とよく言われますが、適切な代替テキストを付けるということに関しては十分に考慮しなければなりません。

参考：HTML5: 有用な代替テキストを提供するためのテクニック

また、画像がリンクとなっている場合、その代替テキストは単に画像の代わりではなく、同時にリンクの目的を示すものである必要があります。例えば、その Web サイトのホームへのリンクとなっているロゴ画像の場合、その代替テキストは “有限会社Willさんいん” ではなく “有限会社Willさんいん ホーム” などとすべきです。

画像がリンクとなっているパターンの一つとして、近年よく使われている Lightbox 系のスクリプトがあります。サムネイル画像をクリックすると、拡大画像がオーバーレイで表示されるというものですが、当然この場合もサムネイル画像の代替テキストはリンクの目的を示さなければなりません。例えば、”○○の拡大画像” といった具合です。

でも、CMS などの WYSIWYG エディタの中で更新担当者が自由に挿入する画像の場合、画像の代替テキストはアップロードする際に付ける場合が多く、その画像をリンクとして挿入するかどうかは後で決めることが多々あると思います。そもそも、拡大画像へのリンクは代替テキストを変更するという運用の徹底は難しいでしょう。

そこで、jQuery を使って拡大画像にリンクする場合の代替テキストを書き換えてみます。

“拡大画像にリンクするサムネイル画像の代替テキスト” の続きを読む »

フォームのアクセシビリティ要件として、第一にラベルとコントロールを関連付けるということが必要です。この関連付けによって、スクリーンリーダー利用者は [tab] キーで入力枠等を移動していった場合に何を入力あるいは選択すればいいか分かります。また、マウスを使ってる場合はラベルのテキストをクリックすればコントロールをフォーカスでき、特にラジオボタンやチェックボックスの選択が容易になります。

しかし、CMS によってシステム的にフォームが出力される場合や、メルマガ配信サービスで出力される HTML を貼り付ける場合に、このラベルとコントロールの関連付けがなされていない場合があります。ラジオボタンやチェックボックスについては、暗示的なラベル付け（コントロールとラベルをまとめて label 要素で囲む）によって関連付けされていることが多いですが、テキストフィールドやセレクトメニューについては関連付けされていない場合があります。

最近上記のような事例があり、フロント側で HTML を編集することもできないため、jQuery を使って関連付けを設定してみました。フォームはよくあるテーブルによるマークアップの単純なもので、一行テキストフィールド、複数行テキストエリア、セレクトメニューに対して、ラベルとの関連付けを設定します。

“jQuery でフォームをアクセシブルに” の続きを読む »

スクリーンリーダー利用者が [Tab] キーで Web ページ内のリンクを辿っていく場合、スクリーンリーダーは、リンクの範囲（ a 要素に囲まれている範囲）のテキスト、あるいは画像などの代替テキストを読み上げます。

未だに多くの Web サイトで見受けられる、文章中の「こちら」だけにリンクが貼られている場合、この3文字だけではリンク先に何があるのか全くわかりませんので、そのリンクの前後のテキストを確認する必要があります。

JIS X 8341-3:2010 では、「7.2.4.9：リンクの目的に関する達成基準」として、

それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

とありますが、これは等級 AAA の達成基準となっています。一方、等級 A の達成基準では、「7.2.4.4：文脈におけるリンクの目的に関する達成基準」として、

それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

となっています。

つまり、「こちら」だけにリンクを貼ることは、同じ段落内のテキストや直前の見出しなどを参照してリンク先が分かれば、等級 A、あるいはこれを含む等級 AA も達成できるということになります。

しかし、[Tab] キーでリンクを辿っている途中で、「こちら　リンク」と読み上げられ、前に戻って確認しなければならないという行為は、とても煩わしいのではないかと思うのです。「7.2.4.9　リンクの目的に関する達成基準」は少なくとも等級 AA であるべきではないかと。

“ページネーションの読み上げ対応” の続きを読む »