WebアクセシビリティのガイドラインWCAG 「達成基準3.1.2 一部分の言語」のチェックを一部自動化

2025.03.04 TECH: WebアクセシビリティのガイドラインWCAG 「達成基準3.1.2 一部分の言語」のチェックを一部自動化

こんにちは、普段は自治体のWebサイト制作をしながらアクセシビリティに取り組んでいるtaichiです！

WCAG（Webアクセシビリティのガイドライン）の達成基準「3.1.2 一部分の言語」を知っていますか？

この基準では、例えば日本語のページの中に英語が混ざっている場合は、英語の箇所にlang属性の値をenで設定し、この要素は英語で書かれているよ！ということを伝えることが求められています。

実装した後にlang属性の設定漏れがないか確認するようにしていますが、日本語ではないテキストがどこにあるのかを探すのが大変だし、見逃してしまうかもしれないし、本当にちゃんと見れたか不安になってしまいます。

そこでチェック工程の一部だけでも自動化できないか考えました。

自動化するために生成AIにお願いした

今回は、確認すべき要素を見つける工程の自動化を目指しました。基準を達成しているかの判定や、達成していない場合の修正は含めません。

現在の案件では、lang属性が必要な箇所があるとすれば基本的には英語なので、英語を見つけたいです。英語はアルファベットで構成されているので、アルファベットを見つければいいと考えました。

生成AIには以下の指示を順番に出しました。

Webページの中からアルファベットが含まれる文字列を持つ要素を取得するJavaScriptを書いてください。
テキストノードを持つ親要素だけを抽出したいです。例えば、 button > span > TEXT_NODE という構造の場合はspan要素を取得し、button要素は取得しなくていいです。
style要素とscript要素は除外したいです。
取得した要素からlang="en"が付与されているものは除外してください
テキストノード版はこれで良さそうですさらにalt版の処理も追加してください altにアルファベットが含まれていてlang="en"が指定されていない要素も配列に混ぜてほしいです
全行に解説コメントを加えてください処理が難しいところについては、別途丁寧で優しい解説をしてください

いくつかの調整をし、最終的に出来上がった処理が以下です。

// アルファベット（A-Z, a-z）を見つけるためのパターンを作成
const alphabetRegex = /[a-zA-Z]/;

// 見つかった要素を入れるための空の配列を用意
const elementsWithDirectTextOrAlt = [];

// ページ内のすべての要素（タグ）を取得
const allElements = document.querySelectorAll("*");

// 取得したすべての要素に対して、一つずつ処理を行う
allElements.forEach(element => {
    // style要素とscript要素は処理対象から除外する（これらは表示されないため）
    if (element.tagName === "STYLE" || element.tagName === "SCRIPT") {
        return;
    }

    // アルファベットを含むテキストが見つかったかどうかを記録するフラグ
    let hasDirectTextWithAlphabet = false;

    // 要素の直接の子ノード（テキストや他の要素）をすべてチェック
    element.childNodes.forEach(child => {
        // もし子ノードがテキストノードなら
        if (child.nodeType === Node.TEXT_NODE) {
            // テキストの前後の空白を削除
            const text = child.textContent.trim();
            // テキストの中にアルファベットが含まれているかチェック
            if (alphabetRegex.test(text)) {
                // アルファベットが見つかったらフラグを立てる
                hasDirectTextWithAlphabet = true;
            }
        }
    });

    // 要素のalt属性（画像の説明テキスト）を取得
    const altText = element.getAttribute("alt");
    // alt属性が存在し、かつその中にアルファベットが含まれているかチェック
    const hasAltWithAlphabet = altText && alphabetRegex.test(altText);

    // テキストノードまたはalt属性にアルファベットが見つかった場合
    if (hasDirectTextWithAlphabet || hasAltWithAlphabet) {
        // その要素を結果の配列に追加
        elementsWithDirectTextOrAlt.push(element);
    }
});

// 見つかったすべての要素をコンソールに表示
console.log(elementsWithDirectTextOrAlt);