アクセシビリティアーカイブ: 世界中の１％の人々へ

トップ > コンピュータ＆インターネット > アクセシビリティ

このページは、アクセシビリティやユーザービリティに関する情報のアーカイブです。

今日のWebアクセシビリティ：Movable Typeで行う404エラー対策

2007年2月25日 04:40

dakiny.comのNot Foundのページ

「Not Found」のエラー表示だけですませるのは、もったない

Google等のサーチエンジンや、リンク集をたどった結果、「Not Found.」とか、「404 File Not Found.」とか「Error 404」などのメッセージを見たことはないだろうか？

これは、「リンク先のページがありません」というサーバからのエラーメッセージで、リンクのアドレスが間違っているか、リンク先が公開を停止したり、別のアドレスに引っ越した可能性がある場合に表示される。

さて、本題。Movable Typeはカテゴリーを簡単に編集できるから、サーチエンジンからリンクをたどると、頻繁にこのエラー表示が表示されて泣かされる。

多くはページがなくなったわけではなく、単にURLが変わっただけだから「Not Found.」とか、「ページが見つかりません。」だけでなく、検索機能をつけるなどして、探しにきたページにたどりつくようにしてあげるのといいと思うのだ。

で、カテゴリーを整理したのを機会に、僕のブログでも、エラー表示のテンプレートを修正してみたので参考にしてほしい。MT3.2、MT3.3ならば、やり方は実に簡単だ。

1. ".htacces"の設定

オリジナルの404エラーページは.htaccessに下記内容の記述がないと表示されないが、公開の設定で、ダイナミック・パブリッシングを選んでいる人は、以下の記述の.htaccessが自動的に作られる。
[すべてをスタティックHTMLで出力します](初期仕様)を選んでいる方は下記内容の.htaccessを作りアップロードする必要がある。

## %%%%%%% Movable Type generated this part; don't remove this line! %%%%%%%
# Disable fancy indexes, so mtview.php gets a chance...
Options -Indexes +SymLinksIfOwnerMatch
<IfModule mod_rewrite.c>
# The mod_rewrite solution is the preferred way to invoke
# dynamic pages, because of its flexibility.

# Add mtview.php to the list of DirectoryIndex options, listing it last,
# so it is invoked only if the common choices aren't present...
<IfModule mod_dir.c>
DirectoryIndex index.php index.html index.htm default.htm default.html default.asp /mtview.php
</IfModule>

RewriteEngine on

# don't serve mtview.php if the request is for a real directory
# (allows the DirectoryIndex lookup to function)
RewriteCond %{REQUEST_FILENAME} !-d

# don't serve mtview.php if the request is for a real file
# (allows the actual file to be served)
RewriteCond %{REQUEST_FILENAME} !-f
# anything else is handed to mtview.php for resolution
RewriteRule ^(.*)$ /mtview.php [L,QSA]
</IfModule>

<IfModule !mod_rewrite.c>
# if mod_rewrite is unavailable, we forward any missing page
# or unresolved directory index requests to mtview
# if mtview.php can resolve the request, it returns a 200
# result code which prevents any 4xx error code from going
# to the server's access logs. However, an error will be
# reported in the error log file. If this is your only choice,
# and you want to suppress these messages, adding a "LogLevel crit"

# directive within your VirtualHost or root configuration for
# Apache will turn them off.
ErrorDocument 404 /mtview.php
ErrorDocument 403 /mtview.php
</IfModule>
## ******* Movable Type generated this part; don't remove this line! *******

2. テンプレートの編集

Movable Typeシステムのテンプレート管理画面

メイン・メニュー > ブログ名 > テンプレート > システムを開き、[ダイナミックページ・エラー]をクリック。

ダイナミックページ・エラー、ソース編集画面

ソースの<boby>～</body>を任意に編集して保存する。このブログでは、断りの他に、検索機能、カテゴリーアーカイブメニュー、月別アーカイブメニュー、タグクラウドをつけた。

3. 404エラーページの確認

確認は簡単、ありもしないURLを入力すればいい。

試しにhttp://www.dakiny.com/seo/をクリックし、確認したら戻ってきてほしい。

電話番号や住所の移転通知サービスみたいなものと思えばわかりやすいと思う。

目的のコンテンツにたどりついた場合と、たどりつけなかった場合の差は決して小さくはない。

Movable Typeでなくても、.htaccessを利用して簡単にできるので、オリジナルの404エラーページを作り、迷える読者に目的コンテンツにたどりつけるようにしてあげるといいと思う。

参考になれば幸い。

今日のWebアクセシビリティ：基本文字サイズを考える

2007年2月24日 19:19

文字サイズ中

Webは異なる読者環境でもきちんと情報が伝わることが大切

アクセシビリティを配慮して、このブログを少し修正した。何を直したかといえばpxをもちいて固定していた文字サイズを、%に変更し相対表示とした。

修正の結果、Internet Explorerでも表示サイズを変えることが可能となった。IE6やIE7で見ている方は、文字サイズを変更してみるとわかると思う。

ところで、悩んだのは基本文字サイズだ。IEは、最大、大、中、小、最小と５段階に文字の表示サイズを変えることができる。文字サイズに割り当てるCSSは１種類であり、５段階すべてで情報が伝わるように基本文字サイズを設定することは、けっこう大事なことかもしれない。最初は普通に100%（文字のサイズ小で見れば12px相当）にしてみた。

基本文字サイズ100%で最大から最小まで

文字サイズ最大

文字のサイズ最大：可読性に問題なし

文字サイズ最大

文字のサイズ最小：可読性に問題あり

文字サイズ最小にすると、本文より一回り小さく表示させた文字は、小さくて読めないだけでなく、つぶれてしまい、もはや文字としての機能を果たさなくなった。文字サイズを大きくすれば可読可能だが、このサイトを見るためだけに利用者に設定を変更させること自体がすでにアクセシビリティの思想から外れる。利用者に文字サイズを変えさせることなく、読んでもらえればいいと思い。基本文字サイズ指定を改めることにした。

参考までに、アットスタイルさんのソースを見ると基本文字サイズを115%にしていた。なるほどね、さすがに、Web標準にこだわった人だと感心した。115%とした理由は、きっちり最小までを配慮した結果なのだな。

2月25日、100%でバランスをとり、結果文字サイズが小さかったので、一括で変更できるから基本文字サイズを115%にしたとこのことで、最初から115%で構築してはいけない。できれば100%で個々の文字サイズするのがよいと本人から連絡があった。

そこで、こんどは最小で12px相当に見える115%に基本文字サイズのみを変更した。

基本文字サイズ115%で最大から最小まで

文字サイズ最大

文字のサイズ最大：可読性に問題なし

文字サイズ最小

文字のサイズ最小：可読性に問題なし

この修正をほどこすことにより、多くの人々が通常利用している環境（文字サイズ最大なら、最大のまま）で文字サイズの設定を変更することなく、見てもらうことが可能になった。

参考リンク

ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
http://www.zspc.com/documents/wcag10/
アクセシビリティ : 富士通
http://jp.fujitsu.com/accessibility/
ハンディがあっても利用できるページづくり
http://www.kanzaki.com/docs/html/accessible.html

アクセシビリティに配慮するなら、単に文字のサイズ最小から最大まで可読性に問題がおこならいだけでなく、読みやすいようデザインするべきだ

Firefoxを例にとれば、たとえ文字サイズをpxで固定しようが、読者が文字サイズを変更すれば、表示文字の大きさは変化する。だから老眼の人はFirefoxで見ればいいかと思うのは早計。新たにブラウザを開くと基本サイズに戻ってしまうから、ブラウザを開くつど文字サイズを変更しなければならないので面倒だ。

その点、約７割のインターネットユーザーが利用する、Internet Explorerは設定サイズをブラウザが記憶しているから、文字サイズを一度最大に設定すれば、最大のまま閲覧できる。だがpx等で固定すれば文字サイズを変更することはしない。だからこそ、アクセシビリティに配慮するならば文字サイズを修正できるようにしておくべきなのだ。

文字を相対にすれば、少なくとも最初から、最大までは利用できるように、デザインも配慮すべきになる。

こんご、ますます日本は高齢化社会になっていくから、自由に作れる個人のサイトや、JIS X8341（通称Web JIS）を~~意味も知らずに大好きで~~推奨している官庁のサイトは技術的問題だけだからいいが、独断で仕様を決められない商用サイトを作るWebプロデューサーやWebディレクターは、こういうことを配慮して、~~意味無くFlash大好きな~~顧客を何故、レイアウトを固定すべきではないのか説得し、仕様を詰める能力が必要になってくるだろう。

参考までに、このブログの最新統計では、65.04%がInternet Explorerは、27.34%がFirefoxで、4.5%がSafariとなっており、すべて検証はしている。

参考になれば幸い。

なお、今回の改修で、合わせて、表示エラーのでるMac IEおよび、NetScape4.7ではCSSが効いてない状態で可読可能対応とさせていただいた。
悪しからずご了承願いたい。

2007年2月25日追記

アットスタイルさんより、連絡があり、最初100%でバランスをとり構築して、表示文字が小さかったので、一括で拡大できるよう115%と拡大したとのこと。最初は100%で作りバランスをとることが大事だということだ。そしてできれば、基本文字サイズを100%にして構築するのが好ましいという話であったので、このブログでも時間をみてやりなおしたい。

今日のSEO：aDesignerで、簡単に！Webアクセシビリティ　その３

2007年2月23日 00:10

aDesigner　ロービジョンモード　パラメーター設定

aDesignerは視覚障害者の希望につながるだろう

『aDesignerで、簡単に！Webアクセシビリティ　その１』で、aDesigner（エーデザイナー）の入手方法を、『aDesignerで、簡単に！Webアクセシビリティ　その２』でaDesignerの利用方法を説明したが、全盲の人達向けサイトについての説明が中心で、さらに多くの人口をかかえる視覚障害者を見捨てたような気がしたしたから、本日はロービジョンモードをキッチリ紹介したい。

あなたの眼で、しかと確認してもらいたい。

初期状態は、視力0.5、緑色覚異常、40歳という設定だ。これで測定して「へぇ～、こんな風に見えるんだね」とチェックするのは最初の使い方としては正しいとは思えない。

３つのパラメーターを単独で利用して、それぞれが、どう見えるかを、まず確認してみることが、視覚障害者への理解につながる重要なポイントだ。

なお、下記文章における症状であるとか、数値等の多くは、Wikipediaの情報を流用させていただいた。

１．視力（弱視対応）

aDesigner　ロービジョンモード　視力のパラメーターある意味これはわかりやすい。日本の視覚障害者の中では弱視が一番多く、7～8割。かつての住まいのお隣さんの息子さんも弱視だった。
なお、彼は視覚的ハンデキャップを勉学で乗り越え京都大学へと進み、現在は学術の道についている。

対処方法として、よく書かれているのが、健常者向きのサイトは最小文字サイズを10px相当に、シニア向けサイトは最小文字サイズを12px相当にというものだが、文字サイズよりもむしろ、サイズ指定の方法に気を配る必要がある、サイズ指定は固定（px等）ではなく相対（%指定等）にしておけば、Internet Explorerのユーザーでも文字サイズを調整して見ることが出でる。
＃僕も一昨日、本文のみだが、こっそりとIE対応で文字サイズを%指定にした(笑)。

aDesigner

右が視力0.5。少し文字がボケているのがわかるだろうか。視力0.5ともなると裸眼では10ピクセル相当の文字は読めない。

aDesigner

右が視力0.1。実際に文字はまったく読めず、写真もかなりボケている。僕の視力が0.1なのでよくわかるが、ここまで視力が落ちると肉眼では正しい位置に座ってモニターを見ても字が読めない。

これより視力の悪い人用のパラメーターも用意してほしかったと思うのは僕だけだろうか？

１．色覚異常

aDesigner 「色盲」「色弱」と呼ばれる事もあったが、誤解を与えるとして現在は「色覚異常」「色覚障害」等と呼ばれる事が多い。意外にと思うが、男性の20名に１名の割合で存在しているとか。

ここで配慮するのは文字色と背景色のコントラストだ。

aDesigner　赤色覚異常

赤色覚異常

色覚異常の中で一番多く、赤と緑の区別が付きにくい。日本人では男性の20人に1人、女性の400人に1人が赤緑色覚異常で、日本全体では300万人近く存在する。合衆国の男性は8%がこの症状に相当するそうだ。赤であれ、緑であれ、どちらに異常が出ても色の見え方に大きな差はなく、この二つはひとくくりに扱われる。

aDesigner　緑色覚異常

緑色覚異常

ということなので、上と同じ色に見えた方は安心してほしい(笑)。

aDesigner　青色覚異常

青色覚異常

上記写真を比べると、若干右（正常）でがピーコックグリーンなら左はエメラルドグリーンというぐらいの違いでしかないから、検査で発見されないかぎり本人も周囲の者も気づかないことが殆どだそうだ。症状は希。
※一般的な検査は赤緑色覚異常に対するもの

３．水晶透過率（老人性白内障）

aDesigner　水晶透過率（加齢性白内障）のパラメーターわかりやすく言えば、老人性白内障。その名のように老人性白内障は老人になって起こるものであるが、では何歳ぐらいからかというとはっきりした規定はない。よって最近では加齢性白内障ともよばれる。早い人は30代から始まり50代では約半数。60代で70-80%、70代で80-90%、80代で90-97%、90代では１００％と言われているそうだ。