miChecker_アクセシビリティを考慮したWEBサイトの作成を支援するツール

はじめに

今回職場のイントラの一部のページの作成を任され、始めてイチからHTMLとCSSを書きました。半年前にドットインストールとProgateで初級編を学んだ時の印象が、入れ子めっちゃ見辛い,<>が全部同じに見える,行数が多くて全体が把握できない → 面倒くさいだったのですが、実際作ってみるとめちゃくちゃ簡単で楽しくて感動しました。
完成したイントラを職場内に公開する前に何か抜けていることはないかな〜と調べていたら、総務省のHPにアクセシビリティに対応したWEBサイトを作るための支援ツールmiCheckerというものがありました。すごく便利なツールで感動したので、この感動を忘れぬよう本記事を記したいと思います。

miCheckerとは

総務省|情報バリアフリー環境の整備|みんなのアクセシビリティ評価ツール:miChecker (エムアイチェッカー)Ver.2.0

アクセリビリティを考慮したWEBサイトの作成を支援するツールです
DLして実行ファイルを起動したら、アドレスバーに作成したHTMLのURLを貼り付けて当該URLに移動。検証ボタンを押すことでアクセシビリティに反している部分を教えてくれます。

アクセシビリティとは

高齢者や体の不自由な方でも容易に利用可能なことを指します
(例:拡大表示ができる,大きなボタン,音声読み上げに対応,わかりやすい名前,などなど... )
又、アクセシビリティについての決め事として、JIS X 8341-3というものがあります

JIS X 8341-3とは

幅広い人々が容易に情報を取得することができるように、アクセシビリティを考慮したコンテンツを作成することとした決め事。主に公的機関がHPを作成する際の決まり事だそうです。
miChekerはこのJIS X 8341-3を遵守したWEBサイトの作成を支援するためのツールのようです。

使ってみた

今回職場で作成したHTMLで当該チェッカーを使ってみました。
検証可能な対象は2つあります。
1.音声ユーザビリティ
2.ロービジョン

1.音声ユーザビリティ

テキストを音声で読み上げられるか否か等を検証します
検証結果は4種類あります
1.指摘箇所に問題がある項目
2.指摘箇所に問題が存在する可能性が高い項目
3.問題があるかどうかは人が判断する項目
4.ツールでは指摘できない項目

今回は1.2.の該当がありませんでした
3.についてはいくつかメッセージが出ましたが、確認した結果特に問題なさそうです
よかったよかった

2.ロービジョン

視覚的に見辛い箇所を検証します
本検証では2種類の項目を評価します
1.色に関する問題点
2.視力(フォントの大きさ)に関する問題点

今回どちらも指摘されていまいました。
私の作成したHTMLには職員が利用するシステムへのアクセスを促すボタンがあるのですが、 検証結果によると「ボタンのサイズが固定されている」「ボタンの背景色と文字色の彩度の差が少ない」とのことです。
当該ボタンはCSSfont-sizepxで指定していましたが、%にすることで解決、
文字色は"#FFFFFF"で背景色は"#33CC99"でしたが、背景色を"#006633"にすることで解決しました。

所感

趣味であれば自分の好きなように作っておしまいなので、アクセシビリティを意識することは少ないと思います。又、"誰もが使い易いと感じるコンテンツ"を意識して作るのは難易度が高い。しかしサービスをネット上に公開しようと思えば色々な人に使ってほしいのも事実。miChekcerを使えばアクセシビリティの知識がなくても、検証結果の問題箇所を改善するだけで、手軽に利便性を高めることができると感じました。行政のみならず一個人にとっても、コンテンツをより多くの人に使ってもらえるチャンスが増える便利なツールなのではと思います。