ページ内で使用されているWAI-ARIA(Web Accessibility Initiative-Accessible Rich Internet Applications)のRoles, States and Propertiesを可視化する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-hogeのhoge部分を配列で定義して、@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でやれってことなんですけどね。はい。でもまあ勢いで公開します。