ウェブアクセシビリティガイドライン「JIS X 8341-3:2010」への適合性を評価するツールとして、総務省よりmiCheckerが配布されています。
Raindropsテーマは、アクセシビリティに配慮したWordPressテーマとして、紹介させていただいていますが、国内で一般に利用されるアクセシビリティ評価ツールでは、これまで試験をしたことがありませんでした。
今回、どのような評価結果になるのか実際に試してみました。
**miChekerのダウンロード情報
miCheckerから、入手可能です。
**Raindropsテーマの試験の設定
-テーマオプションのアクセシビリティ設定をデフォルトのnoからyesに設定しました
-テーマオプションのhtml文書型設定を、xhtmlに設定しました
-テスト用の投稿コンテンツは、以下のものを使用しました。
-さらにカスタムフィールド「css」を作成し以下の装飾用スタイルをセットしました
th[scope="col"]{
height:3em;
vertical-align:middle;
}
caption,
.note,
.schedule{
margin:3em 0;
}
-上記と全く同じ投稿を「イベントのご案内」というタイトルで、二つ投稿を作成し評価することとしました
同じ投稿を2つ作った理由は、異なるリンク先を持つ同名のラベルが、正常にユニークなリンクラベルとして動作するかどうかを確認するためでした。
**Raindropsの評価が、ほかのテーマや、実運用中の外部のサイトとどの程度異なるか調べるために以下のサイトやテーマを参考にしました。
- ウェブアクセシビリティ基盤委員会ホームページ
- WordPress Tipsを扱う、tenman.info内のRaindropsチャイルドテーマを使って運営するサイト
- Raindropsテーマの公式サイト
-
WordPressデフォルトテーマ Twenty fourteen
- デフォルトテーマ中唯一のアクセシビリティ対応テーマです
- サイドバーには、カテゴリウィジェット、アーカイブウィジェットをセットしRaindropsのデフォルトの表示と同じにセットしました。
**ツールでの評価結果
| 項目 | Theme Raindrops | Theme Twenty Fourteen | Raindrops homepage | Site tenman.info/labo/snip (1) | Site tenman.info/labo/snip (2) | Site waic.jp |
|---|---|---|---|---|---|---|
| 概要レポート | ||||||
| 知覚可能 | 82 | 86 | 80 | 0 | 74 | 82 |
| 操作可能 | 98 | 86 | 98 | 12 | 92 | 98 |
| 理解可能 | 100 | 100 | 95 | 98 | 100 | 100 |
| 頑健性 | 100 | 95 | 100 | 100 | 100 | 100 |
| 詳細レポート | ||||||
| 問題あり | 0 | 3 | 1 | 216 | 0 | 0 |
| 問題の可能性大 | 10 | 9 | 11 | 18 | 17 | 10 |
| 要判断箇所 | 111 | 87 | 55 | 267 | 282 | 16 |
| 手動確認 | 45 | 46 | 47 | 45 | 45 | 43 |
| ロービジョンシュミレーション | ||||||
| 問題あり | 203 | 104 | 12 | 215 | 22 | 0 |
| 問題可能性大 | 0 | 8 | 16 | 0 | 10 | 0 |
| 要判断箇所 | 6 | 0 | 13 | 6 | 1 | 24 |
| 手動確認 | 0 | 0 | 0 | 0 | 0 | 0 |
注）Site tenman.info/labo/snip、Raindropsテーマの公式サイトは、Raindropsのチャイルドテーマを利用しています
**テストの結果と課題
Raindropsテーマは、元々、YUI-2 grid CSSをベースにして、CSSハックの書き換えなどを行いながら、レスポンシブレイアウトや、サイドバーの位置や幅を60パターン、3種類の固定ページ幅設定、自動配色機能の実装などを行ってきました。
この過程で、marginやpadding等のCSSに固定サイズを必要としていたり、最近の更新では、サーバサイドでのベースフォントサイズの変更に耐えうるために、フォームボタンなどで、固定サイズのフォントを指定するようになりました。
Raindropsテーマは、「試行錯誤可能な、WordPressのテーマ」という基本コンセプトのもとに、WEBサイトのライフサイクルの中でできるだけ柔軟な対応が可能なテーマを目指してきました。
そういったテーマ制作の中で、アクセシビリティは、ひっそりとテーマと共に維持されてほしいという願いを持っていました。
アクセシビリティだけだったら、いろいろもっと何とかなるところもあるんだけどな、などとボヤキながら テストをすすめました。
テスト結果に、www.tenman.info/labo/snip 1 と、www.tenman.info/labo/snip 2 というのがありますが、
1は、実際の運用状態の結果で、2は、若干の修正を施した結果です。
何がこんなに結果を悪くしていたのか、
その1 プラグインのCSSの影響 （ プラグインが固定フォントサイズを使っている という問題 ）
その2 カテゴリウィジェットが、スペースだけの title属性を出力していた。
カテゴリリンクは、カテゴリの概要文がある場合に、リンクにタイトルをつけることになっていますが、何らかの影響で空白のタイトル要素を出力していました。
これについては、概要文を追加しました。
その3 タグクラウドウィジェットをサイトで使っていましたが、このウィジェットは、リンクの中にインラインで、ptでフォントのサイズ指定が行われるのがWordPressの通常の動作です。
これについては、%サイズで出力するように変更を行いました。
変更の結果、miChekerの評価は、かなり変更になりました。「Site tenman.info/labo/snip (2)」
（タグクラウドを相対フォントで相対フォントサイズへの変更方法については、「タグクラウドのインラインスタイルを相対フォントサイズに変更する」をご覧ください。ほんの数行のカスタマイズで、変更できることが確認していただけると思います。）
投稿エディタ（TINYMCE)のフォントサイズについては、TinyMCE エディタでフォントサイズを em % rem 等のサイズで変更可能にする – WordPress Snippet等カスタマイズが可能です
アクセシビリティのためのWEBサイトのチューニングは、とても手間がかかり、CMSを使っている場合、手を出しにくい分野だというばくせんとした印象がありましたが、
むしろ、フィルタワークなどで、必要な部分全体の変更が一括して可能であることを体験すると、CMSを使っているからこそ、組織的な改善がうまくいくという事もある、という思いもよぎりました。
と同時に、実際のサイトに即してアクセシビリティチューニングを行っていただくことが重要だという事が明確になりました。
WordPressのレビューガイドラインは、現在試験運用中で、アクセシビリティリーディタグの利用が許可されているテーマは、11/2611(2014/7/9)と非常に限られたテーマしか対応していません
WEBを表示するデバイスが爆発的に増加する中で、障碍者対応といった限定的な意味からではなく、WEBがUniversalなメディアとして生き残っていくために、より広範に、様々な観点から検討されていってほしいと願っています。
実情、WordPress界隈では、アクセシビリティに関する情報はとても少なく、Raindropsテーマも手探りの状態で、アクセシビリティ対応を進めています。
Raindropsテーマは、アクセシビリティに関する皆様からのアドバイスを求めています。アドバイスをいただける場合はコメント欄に投稿いただけますようお願いします。
ロービジョンフィルターについて
ロービジョンフィルタの結果は、実際の表示と検査結果に大きな隔たりがありました。
Raindropsテーマは、背景にCSSグラデーションを使っていたりするためか、または、CSSのスタイルプロパティでの背景色と前景色の両方の設定が行われていないためか、計算されて表示された値と現実の表示気化は異なることが多いようです。
手動で確認すると、コントラストは保持されているようなので、実際にご確認いただくことをお勧めします。
コントラストの測定には、他のサービスもあります