アクセシビリティ向上に役立つツール

「WebAxe」経由、アクセスビリティを向上させるために便利なツールが紹介されていたので、ちょっと調べてみました。

中々自分のサイトでも対応できていないのが、今後少しずつ対応できればいいなーと思っちょります、奮ってメモメモ。ちなみに、WebAxeはpodcastで解説していたりするので英語に自信があるかたはそちらもどうぞ。

Cynthia Says

URLを入れて対照サイトのアクセシビリティをチェックしてくれるサービス。FirefoxのWebDeveloperというツールバーにも含まれていますので有名かも。

A-Prompt

Windowsクライアントプログラム。HTMLを用意してプログラムを走らせるとアクセシビリティ的に問題のある部分を抽出してくれるようです。修正点も（ゆるいですが）指摘してくれます。

Watchfire WebXACT

上記Cythia Says 同様Web上でアクセシビリティをチェックしてくれるサービス。通常のアクセシビリティ項目以外にも、「ページダウンロードサイズ」「メタデータ概要」「無効リンク」「ブラウザー互換性」もチェックしてくれます。

Firefox Web Developer Toolbar

これは上記Cynthia Saysでも紹介しましたが、有名なFirefoxのツールバーです。アクセシビリティチェック以外にも色々開発に役に立つ機能満載。ちなみにCSSの「on/off」とかが意外な所で便利って思ったりした。

Accessibility Toolbar

IE(Internet Explore)専用のアクセシビリティチェックツールバー。「XHTMLとCSSのバリデータ」「ブラウザのリサイズ」「javascriptのon/off」「画像のALT表示」「見出し構造表示」

Lynx viewer

URLを入力してテキストブラウザのLynxでの表示を見せてくれます。テキストブラウザの見栄えはわざわざLinuxとかで見てましたがこれは便利。

Opera

Operaは有名ですが、「ブラウザリサイズ」「画像非表示」「テキストブラウザエミュレータ」辺りは使った事なかった。今度使ってみよう。

本当はもっと一杯あるようですが、使えそうなのはこんな感じ。

• Testing for Web Accessibility

複数のブラウザでの見栄えをスクリーンショットで確認

HTMLを書いた後で見栄えを確認したい時に、機能までは確認しなくても軽く複数のプラットフォームでスクリーンショットだけでも見れると修正しなければならなくてならないプラットフォームが絞れて便利です。

そんなサービスが「Browsershots」以下のような複数プラットフォームでスクリーンショットを撮ってくれます。ちなみに30分位かかるみたいです。

Linux

• Dillo 0.8
• Epiphany 2.14
• Firebird 0.7
• Firefox 1.0
• Firefox 1.5
• Firefox 2.0
• Firefox 3.0
• Flock 0.7
• Galeon 2.0
• Konqueror 3.5
• Mozilla 1.7
• Navigator 4.8
• Opera 9.0
• Phoenix 0.5
• SeaMonkey 1.0

Windows

• MSIE 5.0
• MSIE 5.5
• MSIE 6.0
• MSIE 7.0

Mac

• Safari 2.0

ちなみに「Safari 2.0 on Mac OS X」で撮るとこんな感じ。

本当はちゃんとフルサイズで撮ってくれます。ステキ。

• Test your web design in different browsers - Browsershots

CSSをクリーンアップ - Clean CSS

CSSは使えるプロパティというのは決まっているので、フォーマットを揃えるとソースが綺麗に見えますし、後で管理しやすくなります。プロパティーの並べ替えなどのフォーマットを整形してくれるサービスらしいです。

「Clean CSS」というサービスで、CSSTidyというローカルプログラムをWebサービス化してるようです。CSSTidyはC言語とPHPの二通りリリースされていてどちらも使い勝手がイイです。ただ、小さいCSSだったりした場合はWebのサービスでサクっと整形できるとこれはこれで便利。

ちなみに、整形例としてはこんな感じ(↓)になるようです。個人的にはプロパティーの並び替えが一番メンドクサイのでここを並び替えをしてくれるのが一番嬉しい。

整形前

.marquee { background: url(images/sfx1_bg.gif) bottom repeat-x; padding: 0; margin: 0;}
.marquee_l { background: url(images/sfx1_bga.gif) bottom left no-repeat; margin: auto 0; padding: 0 15px 10px 15px; }
.marquee_copy { margin: 0 0 10px 0; padding: 0;}
.marquee_copy h3 { font-size: 100%; margin: 0; padding: 0; }
.marquee_r { background: url(images/sfx1_bgb.gif) bottom no-repeat; width: 327px; text-align: center;}
.marquee_rb { background: url(images/sfx1_bgc.gif) bottom no-repeat;}
.marquee_rb ul {height: 28px; padding: 0; margin: 0; text-align: center;}
.marquee_rb li {position: relative; font-size: 85%; font-weight: bold; display: inline; list-style: none; background: url(images/sfx1_bullet.gif) 0 2px no-repeat; padding: 0 0 0 12px; margin: 0 10px 0 0;}

整形後

.marquee {
background:url(images/sfx1_bg.gif) bottom repeat-x;
margin:0;
padding:0;
}
 
.marquee_l {
background:url(images/sfx1_bga.gif) bottom left no-repeat;
margin:auto 0;
padding:0 15px 10px;
}
 
.marquee_copy {
margin:0 0 10px;
padding:0;
}
 
.marquee_copy h3 {
font-size:100%;
margin:0;
padding:0;
}
 
.marquee_r {
background:url(images/sfx1_bgb.gif) bottom no-repeat;
width:327px;
text-align:center;
}
 
.marquee_rb {
background:url(images/sfx1_bgc.gif) bottom no-repeat;
}
 
.marquee_rb ul {
height:28px;
text-align:center;
margin:0;
padding:0;
}
 
.marquee_rb li {
position:relative;
font-size:85%;
font-weight:700;
display:inline;
list-style:none;
background:url(images/sfx1_bullet.gif) 0 2px no-repeat;
margin:0 10px 0 0;
padding:0 0 0 12px;
}
 
.marquee_stats {
font-size:85%;
padding:0 0 0 15px;
}

• Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
• CSSTidy