「システム内の jsp にある label 要素の for 属性が正しく設定されているか調査したい」と知り合いに相談されて、ぱっと解決策が浮かばなかった。

別な行だったり離れていたりする場合があり、単純な文字列検索では難しい。ページ単位でアクセシビリティ系のツールで調査できそうだが、システム内に数多くある Web ページを一括で調査するのは大変そう。あと地味に jsp という単純に html としてパースし辛い対象であることも課題。

結局、NodeJS で簡単なツールを書いて渡したので、メモとして残しておきます。

label 要素の for 属性

今回相談されたのは、例えば以下のように間違った html が読み込まれた場合、

<html>
    <body>
        <label for="name1">test label</label>
        <input id="id1" name="name1" />
    </body>
</html>

Chrome ブラウザだと以下のようにエラー表示がされてしまうという状況。

label 要素の for には対象の name でなく、id を渡す必要がある。これ昔はエラーにならなかった、もしかしたら name でも動作してくれたような気さえするのだけれど、今は明確な HTML標準違反になる。

まずは調査対象の一覧を生成してみる

npm とか説明するのは面倒なので、NodeJS 基本ライブラリのみで動作する簡単なツールを作成してみる。まずは File I/O を使って、指定したフォルダ内にあるすべての jsp ファイルのファイル名を表示させてみよう。

const fs = require('fs')

const target = process.argv[2] || '.'
const fmatch = /\.jsp$/

// Search for file names that match the conditions and execute the process
function _process(_fname, _func) {
    const dir = fs.opendirSync(_fname)
    let dirent
    while (dirent = dir.readSync()) {
        const fname = _fname + '/' + dirent.name
        if (dirent.isDirectory()) {
            _process(fname, _func)
        } else {
            if (fmatch.test(fname)) {
                _func(fname)
            }
        }
    }
}

// Main Logic
_process(target, _fname => {
    console.log(_fname)
})

再帰を使って、フォルダ内のファイルを順にみていくだけの、わりと平凡な処理ですね。

for 属性の確認ロジックを書いてみる

Main Loop 部分を書き換えます。

同じファイル内にある label の for 属性値の一覧を作成し、ファイル内にその id を指定した入力要素があるか探し、なければ表示します。対象の入力要素、これで足りているかしらん？

// Main Logic
let count = 0
_process(target, _fname => {
    const html = String(fs.readFileSync(_fname))
    // Generate a list of the for attributes of label elements
    const targets = html.match(/<label\s[^>]*for\s*=\s*"[^"]+"/g)
    const ids = []
    if (targets) {
        targets.forEach(target => {
            const id = target.match(/<label\s[^>]*for\s*=\s*"([^"]+)"/)
            ids.push(id[1])
        })
    }
    // Check if the specified ID exists
    let flag = true
    ids.forEach(id => {
        const reg = '<(?:input|textarea|select|button)\\s[^>]*id\\s*=\\s*"' + id + '"'
        if (!html.match(reg)) {
            console.log(_fname + ',' + id)
            if (flag) {
                count++
                flag = false
            }
        }
    })
})
console.log('Number of files,' + count)

実行結果は以下の感じ。出力を *.csv ファイルにリダイレクトして保存し、EXCEL などで管理する想定です。

というわけで

さっと作成した簡易ツールなので、それほど便利ではないかもしれませんね。

こちらのコードは利用自由の Creative Commons 0 (CC0) ライセンスとしますので、いろいろ拡張して、自由に使ってみてください。

ではでは。