通っている検査が、狙いと違うものを測っていた9件

静的サイト2つに自動検査を16本書いた10日間で、9件は「書いたつもりの対象」と「実際に測っていた対象」がずれていました。全部が緑のまま守られていなかった事例を、気づいた経緯つきで並べます。

自動検査は、書いた時点では正しく見えます。実行すると緑になり、その緑は「対象が正しい」ことの証拠のように読めます。

静的サイト2つに16本の検査を書いた10日間で、 そのうち9件は、書いたつもりの対象とは別のものを測っていました。

どれも構文の誤りではありません。実行でき、緑になり、それでいて守りたかったものは守られていませんでした。

9件の内訳

セレクタが何にも一致せず、一致数がゼロのまま「問題なし」で終わっていたものです。

検査	実際に測っていたもの
暗い配色の検査	記事ページに存在しない要素。CSSを全部消しても通る
ツールの絞り込み検査	DOMの一致数だけ。`display:none` を入れても通る

「一致がゼロ」を成功として扱っていたのが共通の原因でした。いまはどの検査でも、期待する件数を先に書き、下回ったら落とすようにしています。

検査は動いています。比較の方法のほうが、対象に対して無効でした。

検査	実際に測っていたもの
明暗の差	WCAGのコントラスト比。暗い側では式の 0.05 の項に支配され、差が出ない
文体の重複	末尾80文字。重複していたのは最後の段落で、80文字だと手前が混ざる
配色の測定	`'rgba(0,0,0,0)'` と `'rgba(0, 0, 0, 0)'` の文字列比較。空白の有無で透明の判定が常に外れる
敬体と常体の混在	除外語に「でした」はあり「ました」が無く、丁寧語の過去形を全部ひろっていた

最後のものは、混在率17%と報告したあとで測り直しています。正しく測ると2.6%で、直す必要はありません。 間違った測定にもとづいて、19箇所を書き換える寸前でした。

配色の切替の検査は、透明（rgba(0,0,0,0)）を「暗い」と判定します。

JavaScript が動くか

動くhead の同期スクリプトが data-theme を付ける。CSSは適用済み

動かないスクリプトが消え、CSSの待ちも消える。当たる前の透明を測る

透明を「暗い」と判定した理由

これは手元で一度も再現しません。ローカルのCSSはディスクから即座に返るため、測るころには適用が終わっています。落ちたのはCIだけでした。再現しない失敗を「不安定なテスト」として片付けると、本物の欠陥を見送ることになります。

どちらも検査そのものは正しく動きます。見ている範囲が、守りたい範囲と一致していませんでした。

読み直しでは見つかりません。書いた本人が読むと、書いたつもりの内容が見えるためです。

確実だったのは、守っている対象をわざと壊し、落ちることを確かめるやり方でした。落ちなければ、その検査は最初から何も守っていません。

ただし高くつきます。1通り壊すたびに、再ビルドと実ブラウザの実行が要ります。そのため範囲を狭めました。

16本のうち9件が誤りというのは、書き方が下手だという話にも読めます。実際そのとおりです。ただし比べる相手は「上手な検査」ではなく、「検査を書かなかった場合」になります。

上の9件は、どれも人の目では見つかっていません。気づいたきっかけは、別の作業の途中で結果に違和感を持ったことでした。

検査を足すとき、緑になった時点で終わりにしないと決めました。落ちるところまで見て、そのあと緑へ戻します。