WAI-ARIAを​可視化する​ display-wai-aria.css と​いう​ツールを​作りました

公開

更新

display WAI-ARIA.CSS

ページ内で使用されているWAI-ARIA(Web Accessibility Initiative-Accessible Rich Internet Applications)のRoles, States and Propertiesを可視化するCSSのツールを作成しました。

display-wai-aria.css

動きのあるフォームを実装する必要があったのでイベントで買った「コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション」を参考にしながらWAI-ARIAを取り入れて実装してたのですが、不可視なHTMLの属性なので Developer toolsを常時起動しているとは言え、確認がとても面倒だったのでパッと確認できるツールが欲しいなあと思ったのがきっかけです。

使い方

Bookmarkletで読み込むのが一番簡単です。下記のリンクをブックマークして任意のサイト上で実行してください。

javascript:(function(){dwa=document.createElement('link');dwa.href="https://rawgit.com/masuP9/display-wai-aria.css/master/display-wai-aria.css";dwa.rel="stylesheet";dwa.media="all";document.head.appendChild(dwa);})();">display WAI-ARIA

実装

擬似要素でrole属性とaria-*で始まる属性の値を出力してるだけです。

[role]::after {
  content: "role: " attr(role);
}

aria-*はたくさんありますので、CSSプリプロセッサーを使って、aria-hogehoge部分を配列で定義して、@eachを使ってごそっと出力しています(下の例はSass)。ステートとプロパティで色を分けたかったので、別々に出力しています。

$aria-state: busy,checked,disabled,expanded,grabbed,hidden,invalid,pressed,selected;
@each $state in $aria-state {
  [aria-#{$state}]::after {
    content: "aria-#{$state}: " attr(aria-#{$state});
  }
}

コンパイルすると

[aria-busy]::after {
  content: "aria-busy: " attr(aria-busy);
}
...

問題

作っている途中で気がついていたんですが、解決が難しい下記の問題があります。

  • 属性値を複数があっても、CSSだと上書きしてしまい一つしか出力できない
  • 置換要素は擬似要素を挿入出来ないので、imgなどの要素に設定されたものが出力できない。(Chrome, Safariはinput[type=checkbox], input[type=radio]は挿入してくれます。)

気づいてんならjsでやれってことなんですけどね。はい。でもまあ勢いで公開します。