Firefox3入れてみたよ

Mozilla、最新ブラウザ「Firefox 3」を公開
とのことで、早速インストールしてみました。

恥ずかしながら、今日の今日までFirefox3がリリースされるなんてことも、
ましてやベータ版があったことさえも知りませんでした…。
いろいろ挙動がアレなIEに比べて、Firefoxはあまりレンダリングに関しては問題がないので、バージョンなどほとんど気にしていませんでした。反省。

インストールした結果、
私のデフォルトアドオンのうち、FirebugやSwitch proxyを含め
約半分がFirefox3に対応しておらず、お蔵入りになりました。
私の生命線であるWeb Developer、IE Tabは利用できるようだったので、私の環境ではこの点に関しては問題なかったです。

ネットには「レンダリング速度がかなり向上する」との記述がありましたが、
そうですね、実感としても早くなったのが目に見えてわかります。
ただ、今まで動作していたうちの半数以上のアドオンが無効になっていることを考えると、どっちのおかげで軽くなったのかは判断しかねますね。

なにはともあれ、アドオンの多さがFirefoxを重くしていた要因なんだということはよーくわかりました。
ちなみにMozillaは、Firefoxインストール数のギネスかなんかを狙っているようですね（笑）
インストールは下記アドレスからどうぞ。
http://mozilla.jp/firefox/

NVDAを使って分かったこと

以前ダウンロードしたNVDAについて。

百聞は一見にしかずといいますが、
自分でその大切さを実感することはとても大切です。

１．スキップリンクはとても大事。

昔自分がつくったテキストサイトをNVDAで閲覧してみたのですが、 当然同一サイトですから、ヘッダの情報やナビゲーションの情報はほとんど同じです。
ページに飛んだとき一番初めに読み上げるのは一番上にあるグローバルナビゲーションですから、テキストを読むには、ナビゲーションを飛ばすために何度もクリックしなければなりません。
これは辛い！

ページの一番上にコンテンツ部分へのスキップリンクがあるとやっぱり便利だと思います。
もしくはグローバルメニューを絶対配置にして、HTMLの最上部に置かないようにするとか…。

２．ページ下部の「トップへ戻る」、「次のページへ」、「前のページへ」の便利さ

前述したテキストサイトですが、
ページ移動のために「次のページへ」、「前のページへ」というリンクを設けていました。
当時は大して意識せずにこれらのナビゲーションを配置していたのですが、
文章を読み終わった後に出てくるこれらのリンクは正直とっても役立ちます。
特にページをまたいで文章がつながっているコンテンツの場合は大助かり。
文章を全部読んだ後、すぐに次のページに移動できるのは嬉しい。

３．パンくずリストがわかりにくい

スクリーンリーダーを利用するにあたっては、
パンくずリストが結構分かりにくいので、少し気になりました。
いきなりページのはじめに「ホーム」「大見出し」「今いる場所」とか言われても、ちょっと動揺します。
ulタグにtitle属性でも指定すれば、パンくずリストだとすぐに理解できるのかもしれません。

「パンくずリスト」は視覚的には非常に分かりやすいナビゲーションですが、スクリーンリーダーではいまいち分かりづらい気がしました。わたしは目を閉じてNVDAを使用しているわけではないので、あくまでも個人的に感じたことですが･･･。
今制作予定のサイトでは上下にパンくずリストを入れようとしていたんですが、ちょっと考え直した方がいいかもしれない…

あとは、
例）
ホーム＞メニュー＞カルボナーラ
というパンくずリストの記述があった場合、
「ホーム　だいなり　メニュー　だいなり　カルボナーラ」
とかいうよくわからない読み上げ方になってしまいます。

同様に、
ホーム｜メニュー｜カルボナーラ　だと、
「ホーム　たてせん　メニュー　たてせん　カルボナーラ」になります。

もしかしたら、パンくずリストだと分かるようにわざわざ読み上げさせるように仕向けているのかもしれませんが、ちょっと違和感がありました。
区切り記号は実体参照で指定すれば読み上げられることがないので、
実体参照で指定すると良いと思います。

以上、NVDAを使ってみた実感でした。
たぶん続きます。

「img src」 と 「background: url」

以前、alt属性とtitle属性のお話をしましたが、今回は画像の入れ方についてメモ。

画像の貼り方には、

1. img src="ファイル名"でHTMLに貼り付け。
2. background: url(ファイル名); とCSSで記述。

のふたつのやり方があります。

前回と少しつながってくるのですが、
「alt属性はimg要素を使う場合必ず書かなくてはいけない属性です。
 もしテキストで表示する意味の無い画像の場合はalt=""とするように仕様書で述べられています。」
Web標準化プロジェクト：http://www.mozilla.gr.jp/standards/webtips0024.html

と記載されていますが、
代替テキストの必要のない画像をHTMLに貼り付けて、空のalt属性でごまかすのは
なんとなく汚いやりかたな気がしてしまいます。

そう考えると、おのずと上記二つの方法の使い分けができますね。
意味のある画像（ロゴ、タイトル、ボタン）＝imgタグ
装飾的な役割の画像（背景、リストマーカーなど）＝CSS指定
ということになるでしょうか。

いままでなんとなく分類してきましたが、これからは
気を遣って画像を分類していきたいですね。

余談ですが、img srcって「イメージソース」の略なんだそうですね。
これも「５年目の真実」でした。

NVDAを使ってみた

オープンソースのスクリーンリーダー、NVDA（日本語版）をインストールしてみました。
NVDAJp
OSはWindowsのみの対応です。

FlashDeveloperやDesignerがたくさんいる中で、なかなか自分独自の切り口が見つけられずにいたので、
せっかくHTMLとCSSにこだわりを持っているならアクセシビリティ方面に興味を向けてみた方が良いかと思い挑戦。

これが結構面白い！便利！
視覚に障害のある方にとっては、まだまだ使いにくいものなのかもしれませんが、
視覚障害者の方がどのようにサイトの情報を仕入れているのか勉強になりますし、
自分のサイトがどのように閲覧されているのか知ることができます。

サイトの見た目だけじゃなくて、文章の順番やレイアウトにも気を配らないといけませんね。