Webアクセシビリティ・ツール「miChecker」

ちょっと古いですが、ウェブアクセシビリティ対応の取組みを支援するために、総務省が開発したアクセシビリティのチェックツール「miChecker」を紹介します。
このツールを利用すると各達成基準ごとの実装方法が示されるので、アクセスビリティの向上に繋げられます。
Webアクセシビリティ・ツール「miChecker」

「miChecker」を実際に使ってみる みんなのアクセシビリティ評価ツール: miChecker (エムアイチェッカー) ダウンロードページのページからダウンロードします。
miChecker.exeを実行した状態が下記です。
Webアクセシビリティ・ツール「miChecker」 左の画面に利用ガイドが表示されるので、おおよそわかると思いますが、説明していきます。
まず対象のページURLをアドレスバーに入力します。
※今回はYahoo(http://www.yahoo.co.jp/)を入れました。
Webアクセシビリティ・ツール「miChecker」 ロービジョンモード 今度は右側のペインのメガネマークを選択してみます。
Webアクセシビリティ・ツール「miChecker」
そうすると結果が表示されます。
Webアクセシビリティ・ツール「miChecker」 なお、ロービジョンと呼ばれるこのモードは「視力」「色覚異常」「水晶体透過率」を基にシミュレーション表示が可能になっています。

ここでは、大きく4つ「固定フォント」「小さい文字」「テキストの色」「画像の色」の問題に対する問題点が提示されます。
詳細については下のレポートから確認することができ、問題ありが赤で表示されます。
今回のYahooトップでは、25個「問題あり」が検出されました。
多くがコントラスト比での指摘です。
なお、概要レポートではどのあたりに問題があるのかざっと見ることが可能です。
Webアクセシビリティ・ツール「miChecker」
音声ユーザビリティモード 音声ユーザビリティでは「到達時間」「ページ内リンク」「冗長なテキストの情報」「不適切なalt属性」「テーブルに関連する問題」などを検証します。
タブを変えて、実行します。
Webアクセシビリティ・ツール「miChecker」
概要レポートから見てみるとaltのない画像の指摘を受けています。
また、全体として「非常に悪い」とされ、特に知覚可能のレベルが低いことが伺えます。
Webアクセシビリティ・ツール「miChecker」
この「音声ユーザビリティ」でよく見かけるのが、同一テキストの繰り返しです。
■例
<li class="commerceMainItemLarge">
<p class="commerceMainImgWrap">
<a href="http://rdsig.yahoo.co.jp/_ylt=A3xTkOrC4nBV.CEAQcCJBtF7/RV=1/RE=1433547842/RH=cmRzaWcueWFob28uY28uanA-/RB=/RU=aHR0cDovL3Nob3BwaW5nLnlhaG9vLmNvLmpwL2V2ZW50L2ZhdGhlcnNfZGF5L3N1cnZleS8_c2NfZT15dGVjX2NvbW1fcGN0b3BfYSNhbmNob3Itc3VydmV5LTItMA--/RS=^ADA.jo2lX_GFQ2QXhgPE.tth0TF8Js-" class="commerceMainLink">
<img src="http://k.yimg.jp/images/top/sp2/ec/2015/0605_r_1a.jpg" alt="娘息子アンケート 予算は?" width="93" height="124" class="commerceMainImg">
</a>
</p>
<p class="commerceMainLinktext">
<a href="http://rdsig.yahoo.co.jp/_ylt=A3xTkOrC4nBV.CEAQsCJBtF7/RV=1/RE=1433547842/RH=cmRzaWcueWFob28uY28uanA-/RB=/RU=aHR0cDovL3Nob3BwaW5nLnlhaG9vLmNvLmpwL2V2ZW50L2ZhdGhlcnNfZGF5L3N1cnZleS8_c2NfZT15dGVjX2NvbW1fcGN0b3BfYSNhbmNob3Itc3VydmV5LTItMA--/RS=^ADA.jo2lX_GFQ2QXhgPE.tth0TF8Js-" class="commerceMainLink">娘息子アンケート 予算は?</a>
</p>
</li>
このような場合、縦に2個同じものが並んでしまう状態になります。
Webアクセシビリティ・ツール「miChecker」
指摘をうけた部分で右クリックをすると、達成基準や実装方法が提示されます。
Webアクセシビリティ・ツール「miChecker」
「7.1.1.1 非テキストコンテンツに関する達成基準」で、実装方法が「H2」となっていますので、7.1.1.1 非テキストコンテンツに関する達成基準の実装チェックリスト例を見て、マークアップを変更する必要がありそうです。
隣り合う画像とテキストのリンクが同一のhref属性値を持つ場合、画像とテキストを1つのa要素でマークアップする

最終的にはバランスによって取捨選択することになると思いますが、現状を正しく理解して対応することが求められそうです。

sponsors

「Webアクセシビリティ・ツール「miChecker」」をシェアする

記事作成:
記事URL:

TOP > > > Webアクセシビリティ・ツール「miChecker」