Chrome aXe plugin の
ソーシャルコメントや、
出力される
チェックの
画像の
特定の
ARIAロールは 特定の 親に 含まれていなければなりません 使用されている
ARIAロールは 有効な 値に 一致しなければなりません 要素には
十分な 色の コントラストが なければなりません フレームには
title属性が なければなりません 画像には
代替テキストが なければなりません リンクには
認識可能な テキストが なければなりません ズーミングや
拡大縮小は 無効に しては なりません フレームには
一意の title属性が なければなりません ランドマークが
一意である ことを 確認します フレームは
axe-coreで テストする 必要が あります
警告に
出力される
Disqus に
このブログは
Disqusで
使用されている
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
ランドマークが<wbr>一意である<wbr>ことを<wbr>確認しますに対する aXeの 詳細な 説明文です。 ARIA: navigation ロール - アクセシビリティ | MDN
ARIA navigation ロールに対する MDNの 説明文です。
Disqus の
以上です。
コメント