Chrome aXe plugin の警告へ対処する 1 | Monotalk でブログのトップページに対して、Chrome aXe plugin を実行し、警告を除去しました。トップページ以外のページに対して実行したところ別の問題が出ていたので、引き続き ツールを実行して出力される警告に対処していきます。
ソーシャルコメントや、広告など由来の警告も多く殆ど修正できませんでしたが、一通り結果を記載します。
出力される警告
チェックの対象のページはSQuaRE の ウェブサイトの目的説明率 を Google Analytics のデータを元に計算する | Monotalk になります。 このページに対して、Chorme aXe plugin を実行すると以下の警告が出力されました。
画像のメッセージを以下テキストにしました。
-
特定のARIAロールは特定の親に含まれていなければなりません
-
使用されているARIAロールは有効な値に一致しなければなりません
-
要素には十分な色のコントラストがなければなりません
-
フレームにはtitle属性がなければなりません
-
画像には代替テキストがなければなりません
-
リンクには認識可能なテキストがなければなりません
-
ズーミングや拡大縮小は無効にしてはなりません
-
フレームには一意のtitle属性がなければなりません
-
ランドマークが一意であることを確認します
-
フレームはaxe-coreでテストする必要があります
警告に対処する。
出力される警告に対処していきます。
Disqus に関するアクセシビリティの問題
このブログは Disqus を使ってますが、Disqusのコメント欄で、Chrome aXe plugin の警告が出力されます。
Disqusで生成しているマークアップになるので、対応できなかったのですが、数が多かったので別出しにします。
-
特定のARIAロールは特定の親に含まれていなければなりません
ARIAロールの幾つかは、特定の親roleを持つ必要があり、それが実現できていないため出力されていました。
Chrome aXe plugin の警告説明で、どこが駄目で、どの親roleが必要かまで表示してくれます。
対象箇所が Disqusのコメントのマークアップ部分のため対応できませんでした。
Disqus関連で他にも警告がそれなりに出ていて、報告しようかと思いましたが、以下ページがあるので、何からの対策は実施している途中なのかもしれません。
Accessibility on Disqus | Disqus
警告に対する詳細な説明は以下に記載されています。
Certain ARIA roles must be contained by particular parent elements Axe Rules | Deque University | Deque Systems -
使用されているARIAロールは有効な値に一致しなければなりません
postbox-alert"というrole が、有効な値ではないという警告でした。
WAI-ARIAで使用できる role 属性は以下の記事が参考になりました。
WAI-ARIAのrole属性一覧 - Qiita
これもDisqus のコメントのマークアップ部分で出力されており、修正が難しいため無視しました。 -
画像には代替テキストがなければなりません
Disqus のイメージ画像の一部に、代替テキストがないため出力されていました。 -
リンクには認識可能なテキストがなければなりません
これも Disqus のリンクで出力されていました。
こちらではどうしようもないですが、aria-label属性 の付与で解消されます。 -
ズーミングや拡大縮小は無効にしてはなりません
meta タグ viewport にuser-scalableという属性があり、use-scalable=noとすると、モバイルデバイスでの拡大が無効になります。
user-scalableの設定については以下の記事が参考になりました。
スマホのブラウザの拡大・縮小を無効にする「user-scalable=no」は、使うべきか否か | nuconeco
viewport設定について理解を深める | RECOOORD
これも、Disqus のコメント欄のマークアップで出力されていました。
Disqus以外のアクセシビリティ警告
-
ランドマークが一意であることを確認します
これは画面上の以下のタグで出力されていました。
警告文には以下のような記述があり、<div class="navbar navbar-default navbar-custom navbar-fixed-top is-fixed" role="navigation">aria-labelを付与し、対応しました。ランドマークを識別可能にするため、ランドマークには一意の aria-label、aria-labelledby、または title がなければなりません。
-
要素には十分な色のコントラストがなければなりません
引用文の文字と背景色のコントラクトが足りないため出力されていました。
色についてはトップページと同様ですが、サイトの雰囲気に影響するので、一旦修正はせずに放置します。 -
フレームにはtitle属性がなければなりません
Adsense の広告タグで出力されていました。外部サービスのため修正は難しく無視します。
参考
-
Landmarks must have a unique role or role/label/title (i.e. accessible name) combination Axe Rules | Deque University | Deque Systems
ランドマークが一意であることを確認しますに対するaXeの詳細な説明文です。 -
ARIA: navigation ロール - アクセシビリティ | MDN
ARIA navigation ロールに対するMDNの説明文です。
Disqus のアクセシビリティ警告が予想以上に多く、外そうかなとも思うレベルでした。
以上です。
コメント