このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

このページの位置: home カテゴリー: アクセシビリティ 2ページ目

“アクセシビリティ” カテゴリの記事

アクセシブルなタブ切り替えUIを考える

この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUIですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。

例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。

そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。

“アクセシブルなタブ切り替えUIを考える” の続きを読む »

pre 要素(整形済みテキスト)の折り返しを切り替え可能にする

この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。

ソースコードを掲載する時に code 要素と併せて利用する pre 要素(整形済みテキスト)。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。

敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。

ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。

pre 要素内で overflow: auto; によりスクロールが発生した場合(以降、これを “擬似的なインラインフレーム” と称します)、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。

多くのブラウザでは、その中に a 要素(リンク)がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。

“pre 要素(整形済みテキスト)の折り返しを切り替え可能にする” の続きを読む »

オープンソースのスクリーンリーダー NVDA と Mac と

この記事は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日に書かれたものです。情報が古い可能性がありますのでご注意ください。

視覚に障がいのある方がパソコンを使用される際に利用されるスクリーンリーダー。音声読み上げの検証のためにスクリーンリーダーを利用しているというWeb制作者は少ないのではないでしょうか。アクセシビリティチェックツールに任せて、実際に検証などしないというパターンが多いのではないかと思います。

しかし、例えば音声読み上げでもっとも問題となる画像の代替テキスト。チェックツールでは代替テキスト(alt 属性)の有無はチェックできますが、その内容が正しいか、妥当かどうかまではチェックできません。代替テキストが “画像” だけでも、“xxx.jpg” といったファイル名のままでも、値がどうであれ、とにかく alt 属性がありさえすれば OK と判定されます。

また、実際にスクリーンリーダーを利用されている方を対象に、ユーザーテストを実施する場合もあるかと思いますが、そもそも視覚的に画像を把握できないユーザーに、妥当な代替テキストが与えらているかどうか分かる筈もないですよね。ユーザーテストでストレスなく利用できていても、果たして提供されている情報がすべて入手できているでしょうか。

“画像の代替テキストについて” の続きを読む »

続・タイトルとサムネイル画像の重複リンク

この記事は2015年5月28日に書かれたものです。情報が古い可能性がありますのでご注意ください。

このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは[Tab]キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。

そして、これを解消する以下の3つの方法を紹介しました。

1. ページタイトルとサムネイル画像を一つのリンク内に含める
HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。
2. サムネイル画像をキーボードでフォーカスさせない
これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま[Tab]キーではフォーカスされなくする方法。
3. JavaScript でサムネイル画像のクリックに対応する
サムネイル画像にはリンクを設定せず、JavaScript(jQuery)を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。

しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。

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

1 2 3

page top