2015年12月11日 カテゴリー: アクセシビリティ
この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUI ですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。
例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。
そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。
“アクセシブルなタブ切り替えUIを考える” の 続きを読む »
2015年7月25日 カテゴリー: アクセシビリティ
この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ソースコードを掲載する時に code 要素と併せて利用する pre 要素（整形済みテキスト）。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。
敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。
ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。
pre 要素内で overflow: auto; によりスクロールが発生した場合（以降、これを “擬似的なインラインフレーム” と称します）、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。
多くのブラウザでは、その中に a 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
“pre 要素（整形済みテキスト）の折り返しを切り替え可能にする” の 続きを読む »
2015年7月16日 カテゴリー: WordPress
この記事は2015年7月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。
この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。
ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
フォントサイズの選択肢を、ラベルを px、値を % で定義する
“TinyMCE のブロック要素とフォントサイズの選択肢” の 続きを読む »
2015年7月10日 カテゴリー: アクセシビリティ
この記事は2015年7月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
先日の blog で、音声読み上げの検証のためにスクリーンリーダーを利用しているというWeb制作者は少ないのではないかということを書きました。その理由の一つに、スクリーンリーダーが高価だということもあるかもしれません。PC-Talker は38,000円で、これに Web 閲覧機能を強化する音声ブラウザ NetReader は28,000円（Web制作者向け価格は38,000円）、高機能なスクリーンリーダー JAWS に至っては15万円余りもの価格です。
つまりこれは、スクリーンリーダーを必要とする視覚障がい者は、パソコンを使用するために少なからずとも余計な出費を強いられているということでもあります。
一方、NVDA (NonVisual Desktop Access) は無料で使えるオープンソースの Windows 用スクリーンリーダーです。視覚障がい者が晴眼者と同じように、パソコンと OS 以外の出費をしなくても Windows が利用できるようにとの目的で、オーストラリアの Michael Curran 氏を中心に2006年から開発が進められ、現在は日本語版 を含む40以上の言語に対応しています。
“オープンソースのスクリーンリーダー NVDA と Mac と” の 続きを読む »
2015年6月25日 カテゴリー: アクセシビリティ
この記事は2015年6月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
視覚に障がいのある方がパソコンを使用される際に利用されるスクリーンリーダー。音声読み上げの検証のためにスクリーンリーダーを利用しているというWeb制作者は少ないのではないでしょうか。アクセシビリティチェックツールに任せて、実際に検証などしないというパターンが多いのではないかと思います。
しかし、例えば音声読み上げでもっとも問題となる画像の代替テキスト。チェックツールでは代替テキスト（alt 属性）の有無はチェックできますが、その内容が正しいか、妥当かどうかまではチェックできません。代替テキストが “画像” だけでも、“xxx.jpg” といったファイル名のままでも、値がどうであれ、とにかく alt 属性がありさえすれば OK と判定されます。
また、実際にスクリーンリーダーを利用されている方を対象に、ユーザーテストを実施する場合もあるかと思いますが、そもそも視覚的に画像を把握できないユーザーに、妥当な代替テキストが与えらているかどうか分かる筈もないですよね。ユーザーテストでストレスなく利用できていても、果たして提供されている情報がすべて入手できているでしょうか。
“画像の代替テキストについて” の 続きを読む »
2015年5月28日 カテゴリー: アクセシビリティ
この記事は2015年5月28日に書かれたものです。情報が古い可能性がありますのでご注意ください。
このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク 」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。
そして、これを解消する以下の3つの方法を紹介しました。
1. ページタイトルとサムネイル画像を一つのリンク内に含める
HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。
2. サムネイル画像をキーボードでフォーカスさせない
これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま［Tab］キーではフォーカスされなくする方法。
3. JavaScript でサムネイル画像のクリックに対応する
サムネイル画像にはリンクを設定せず、JavaScript（jQuery）を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。
しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。
“続・タイトルとサムネイル画像の重複リンク” の 続きを読む »
2015年4月14日 カテゴリー: アクセシビリティ
この記事は2015年4月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。
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つの方法を考えてみます。
“タイトルとサムネイル画像の重複リンク” の 続きを読む »
2015年2月24日 カテゴリー: アクセシビリティ
この記事は2015年2月24日に書かれたものです。情報が古い可能性がありますのでご注意ください。
弱視の方がパソコンを利用される際に通常の配色では眩しい場合など、画面の配色をハイコントラスト（白黒反転）に設定して利用されることが多いのですが、Windows でハイコントラストに設定すると、背景色や背景画像は表示されなくなります。そのため、通常の配色では見えない配慮が必要になる場合があります。（ちなみに Mac の機能にあるカラー反転は、背景を含めてすべての色が反対色になります。）
まず、配慮以前の問題なのですが、“オフレフト” や “画像置換” などと呼ばれるコーディング手法は致命的な問題が発生します。これは、HTML 上のテキストを text-indent: -9999px などとして画面の外に飛ばし、代わりに画像テキストを背景として配置するというもので、ナビゲーションやタイトル部分など、今でも多くの Web サイトで取り入れられています。
しかし、これをハイコントラスト設定で見ると、当然背景として配置した画像は表示されませんので、その部分は何も見えない真っ黒な空間になってしまいます。
テキスト情報なので SEO にも有利で、スクリーンリーダーでも読み上げられるからアクセシビリティも向上するなどという誤った考え方が広まったこともありますが、これは全くの論外で、装飾目的でない意味のある画像はきちんと代替テキストを伴った img 要素を使って HTML に記述すべきです。
“ハイコントラスト環境への配慮” の 続きを読む »
2015年1月29日 カテゴリー: アクセシビリティ
この記事は2015年1月29日に書かれたものです。情報が古い可能性がありますのでご注意ください。
画像の代替テキスト（alt 属性）は、Web アクセシビリティの基本中の基本とよく言われますが、適切な代替テキストを付けるということに関しては十分に考慮しなければなりません。
参考：HTML5: 有用な代替テキストを提供するためのテクニック
また、画像がリンクとなっている場合、その代替テキストは単に画像の代わりではなく、同時にリンクの目的を示すものである必要があります。例えば、その Web サイトのホームへのリンクとなっているロゴ画像の場合、その代替テキストは “有限会社Willさんいん” ではなく “有限会社Willさんいん ホーム ” などとすべきです。
画像がリンクとなっているパターンの一つとして、近年よく使われている Lightbox 系のスクリプトがあります。サムネイル画像をクリックすると、拡大画像がオーバーレイで表示されるというものですが、当然この場合もサムネイル画像の代替テキストはリンクの目的を示さなければなりません。例えば、”○○の拡大画像 ” といった具合です。
でも、CMS などの WYSIWYG エディタの中で更新担当者が自由に挿入する画像の場合、画像の代替テキストはアップロードする際に付ける場合が多く、その画像をリンクとして挿入するかどうかは後で決めることが多々あると思います。そもそも、拡大画像へのリンクは代替テキストを変更するという運用の徹底は難しいでしょう。
そこで、jQuery を使って拡大画像にリンクする場合の代替テキストを書き換えてみます。
“拡大画像にリンクするサムネイル画像の代替テキスト” の 続きを読む »
2015年1月14日 カテゴリー: アクセシビリティ
この記事は2015年1月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。
フォームのアクセシビリティ要件として、第一にラベルとコントロールを関連付けるということが必要です。この関連付けによって、スクリーンリーダー利用者は [tab] キーで入力枠等を移動していった場合に何を入力あるいは選択すればいいか分かります。また、マウスを使ってる場合はラベルのテキストをクリックすればコントロールをフォーカスでき、特にラジオボタンやチェックボックスの選択が容易になります。
しかし、CMS によってシステム的にフォームが出力される場合や、メルマガ配信サービスで出力される HTML を貼り付ける場合に、このラベルとコントロールの関連付けがなされていない場合があります。ラジオボタンやチェックボックスについては、暗示的なラベル付け（コントロールとラベルをまとめて label 要素で囲む）によって関連付けされていることが多いですが、テキストフィールドやセレクトメニューについては関連付けされていない場合があります。
最近上記のような事例があり、フロント側で HTML を編集することもできないため、jQuery を使って関連付けを設定してみました。フォームはよくあるテーブルによるマークアップの単純なもので、一行テキストフィールド、複数行テキストエリア、セレクトメニューに対して、ラベルとの関連付けを設定します。
“jQuery でフォームをアクセシブルに” の 続きを読む »