Chrome aXe plugin の警告へ対処する 1

Japan Accessibility Conference digital information vol.2 に行ったのをきっかけに、元々なんとなくはあったアクセシビリティへの興味が強くなりました。
Chrome aXe plugin が日本語化されて便利になっているので、サイトに対してチェックを実行して、もう少しアクセシビリティの勉強をしようかと思います。

Chrome aXe plugin とは？

過去に記事を作成していましたので、以下をご確認ください。
aXe Chrome plugin を使ってみる | Monotalk

出力される警告

このブログに対して、Chorme aXe plugin を実行すると以下の警告が出力されました。
チェックの対象のページはブログ | Monotalk になります。

画像のメッセージを以下テキストにしました。

• 要素には十分な色のコントラストがなければなりません。

• フレームにはtitle属性がなければなりません。

• フォーム要素にはラベルがなければなりません。

• ドキュメントにはmainランドマークが1つ含まれていなければなりません。

• ページのすべてのコンテンツはlandmarkに含まれていなければなりません。

• フレームはaxe-coreでテストする必要があります。

警告に対処する。

出力される警告に対処していきます。

要素には十分な色のコントラストがなければなりません。

この警告は、テキストとその背景との間に十分なコントラストがない場合に出力されます。
WCAG 2.0 解説書 に、関連するドキュメントがありました。

• 達成基準 1.4.3 を理解する | WCAG 2.0解説書
• 達成基準 1.4.6 を理解する | WCAG 2.0解説書

コントラストが<wbr>ない<wbr>場合 は Chrome aXe plugin を実行した時、マークアップの状況に依り以下のような分類がされます。

分類

• 問題
  Chrome aXe plugin で明確に問題として検知できた場合、問題としてカテゴライズされます。

• レビューが必要
  Chrome aXe plugin では明確に問題として検知できなかった場合、レビューが必要としてカテゴライズされます。
  具体的に、メッセージを見ると以下のような理由で aXe では判断できていないようです。

  • 背景画像のため、要素の背景色を判定できません。
  • 他の要素と重なっているため、要素の背景色を判定できません。

対処

このブログだと、フッタ部のコピーライト表記、ヘッダ部が折りたたまれた際の表記が明確に問題だと検知されていて、その他の幾つかレビューが必要と検知されていましたので、明確に問題として検知されている部分のコントラスト調整を行おうかと思いましたが、 どれくらいのコントラストにすべきか悩み始めたため、対応を見送りました。

コントラスト比の確認には以下のツールを使いました。
Juicy Studio: Luminosity Colour Contrast Ratio Analyser

コントラストの調整はサイトのイメージが変わる可能性があり、全て対応するのは難しいのかなと思いました。

フレームにはtitle属性がなければなりません

これは AdSense の広告枠で出力されていました。広告タグ側の動作なので、こちらでの対応が難しいところです。
AdSense の Help に、以下のような質問が投稿されていますが、特にまだ対応される雰囲気はなさそうです。
Adsense-generated frames need titles - AdSense Help

フォーム要素にはラベルがなければなりません。

画面の検索ボックス、プルダウンに label タグがないため出力されていました。
ラベルを付与するスペースがないのと、現在 placeholder をラベル代わりに使っているため、aria-label を付与することで対応しました。

• 参考
  • ARIA6: オブジェクトのラベルを提供するために aria-label を使用する | WCAG 2.0 達成方法集
  • - HTML: HyperText Markup Language | MDN

ドキュメントにはmainランドマークが1つ含まれていなければなりません。

チェック対象のHTMLドキュメントには、role="main" を付与したタグがなく、この警告が出力されていました。
メインドキュメントに当たるタグにrole="main"を付与しました。

• - HTML: HyperText Markup Language | MDN
• レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-riverstyle Vanguard

ページのすべてのコンテンツはlandmarkに含まれていなければなりません。

ドキュメントには<wbr>mainランドマークが<wbr>1つ<wbr>含まれていなければなりません。<wbr> について対応したところ、警告が表示されなくなりました。

フレームはaxe-coreでテストする必要があります。

Frames must be tested with axe-core Axe Rules | Deque University | Deque Systems に以下のように記載されています。

axe-core スクリプトがない場合、ツールは複数のレベルでネストされた iframe の問題のチェックを実行できません。

こちらもAdsense のフレームで出力されていたので、無視しました。

参考

• Axe Rules | Deque University | Deque Systems
  aXe のルール一覧です。
  aXe Chrome plugin で警告の説明文の もっと<wbr>詳しく<wbr>知る<wbr> からルール一覧からリンクされているルールの説明ページにたどり着けます。
  ルールページには、言語切り替えボタンがあり、日本語にするとほとんど説明文が日本語化されているようでしたので、切り替えて確認するとわかりやすいかと思います。

以上です。