White Stage

アクセシビリティ配慮型テーマ WAIproCSS2.5.1を出しました。

2011年12月1日にリリースされたGeeklog 1.8.1-jp-extended-1.0日本語パッケージ拡張版に入っているWAIproCSSと同じものになります。

アウトラインの役割

リンクなどにフォーカスした時、アウトライン(外郭線)が表示されるのですが、このアウトラインにはどんな役割があるかご存知ですか？

アウトラインの役割を知らずに「何？この点線！じゃま」とCSSでoutline: none;と設定しアウトラインを消されているかたがいらっしゃると思うのですが、アウトラインが表示されないとキーボードのみで操作しているかたが自分が今どの位置にいるのかわからなくなってしまうんです。

リンクフォーカス時アウトラインが表示されないサイト

リンクフォーカス時にアウトラインが表示されないサイトがありましたので(ボタンフォーカス時にはアウトラインが表示されます)、アウトラインが表示されない状態で目的のページに辿り着けるか、また辿り着くのにどれだけ時間がかかり大変か体験してみましょう。私達はこのサイトの商品を購入したいとします。無事、目的の商品詳細ページまで辿り着く事ができるでしょうか？
サイトは、プレミアムバンダイ｜こどもから大人まで楽しめるバンダイ公式ショッピングサイトです。このページ内にある商品名「ふわふわでかチョッパー 新世界だぞコノヤロー！」の詳細ページ(予約ボタンのあるページ)を表示するのが目的になります。チョッパーは、アニメワンピースに出てくるキャラクターです。では、みなさんも私と同じようにキーボード操作のみで目的のページまで辿り着けるか試してみましょう。(FirefoxTabキーで移動していきます)

手足が不自由なため車椅子で生活されているAさんにiPad2を実際に使ってもらい、使えない事等ないかを教えてもらいました。

また、手がまったく使えないかたがiPad2を使うにはどうすればいいかを考え検証してみました。

Twitterで@tomo_eさんが

ここれは…ツライ… http://www.memo.marguerite.to/WWW/%E5%B9%B3%E6%88%9023%E5%B9%B4/7%E6%9C%8809%E6%97%A5-%E3%82%AA%E3%83%9A%E3%83%A911%E3%81%AE%3Cmark%3E%E8%A6%81%E7%B4%A0%E3%81%AE%E3%83%90%E3%82%B0.html

とつぶやかれているのを見て、リンク先の記事を読んだところ「<mark>要素にCSSでdisplay: inlineと設定すれば改行してしまう事を解消できるのでは？出きるのであれば<p>要素にdisplay: inlineを設定するよりスマートでは？」と思い、各種ブラウザで検証してみました。

当サイトは、Geeklog1.5.2からGeeklog1.7.1にアップグレードしました。