「フォームの要素にラベルが関連付けられていません」がPageSpeed Insightsで出る時の対処法。

2023-03-03

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_eyecatch

Googleのサイト診断ツール「PageSpeed Insights」で“フォームの要素にラベルが関連付けられていません”が出た時の対処法です。

当サイトはWordPressで運営しており、コメント欄のコメント入力フォーム部分と、サイト内検索のフォーム部分にこの指摘が出ました。

解決するには、フォーム要素にaria-label属性を使ってラベルを指定する必要があります。WordPressの場合はフォーム部分を自動出力するので苦労しました。

当記事の対処法はWordPress以外の方にも参考にしていただける内容です。

「フォームの要素にラベルが関連付けられていません」がPSIで出る時の対処法

2022年末ごろ?に仕様変更された「PageSpeed Insights」では“ユーザー補助”という項目に以前よりも細かい改善案が表示されるようになりました。

新しいPSIで当サイトをチェックしてみたところ、新しい改善案が表示されました。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_001

PageSpeed Insightsで当サイトを検証した結果

フォームの要素にラベルが関連付けられていません
ラベルを使用すると、フォームの各コントロールが支援技術(スクリーン リーダーなど)によって正しく読み上げられるようになります。

とあります。

今回指摘された内容はスクリーンリーダー(画面読み上げ)を使った時に読み上げるテキスト(ラベル)がサイトのフォーム部分にないよ!という内容です。

実は少し前に「リンクに識別可能な名前が指定されていません」という改善案も表示されたのですが、今回の内容はこの時の作業に似ています。

「フォームの要素にラベルが関連付けられていません」についてもaria-labelという属性を使い、スクリーンリーダで読み上げ可能なラベルを指定すれば解決できます。
詳しい内容は関連記事に書いたので当記事では割愛します。

では早速対処していきましょう・w・

問題箇所はコメントフォームとサイト内検索

今回はどうやらコメント欄の入力フォームに問題がある様子なので確認します。
(サイト内検索にも同じ問題がありましたが、後から気づいたので後述します。)

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_002

問題を指摘されたのはコメントの入力フォーム部分

問題があるフォーム部分のコードは以下のようになっています。

<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea>

確かに「aria-label="コメントフィールド"」のようなラベルは入っていませんね...。
一応Chromeのデベロッパーツールも使って確認してみます。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_003

Nameのところ(ラベル)が空になっている

デベロッパーツールで該当のフィールドにマウスオンした時に、ACCESSIBILITYのNameのところに何も表示されていなければラベルは未設定ということになります。

スポンサーリンク

対処法:aria-labelで要素にラベルを指定する

「フォームの要素にラベルが関連付けられていません」を解決する方法はシンプルで、該当のフォーム部分にaria-label属性を追加してラベルを設定すればOKです。

例えばフォーム部分が以下のようなコードなら、

<-- (例)フォーム要素にaria-label=""が無いコード -->
<textarea id="comment" name="comment" cols="45" rows="8"></textarea>

ここに「aria-label="説明テキスト"」を追加します。

<-- (例)フォーム要素にaria-labelを追加したコード -->
<textarea id="comment" name="comment" cols="45" rows="8" aria-label="コメントフィールド"></textarea>

こんな感じです。
aria-label="xxx"にはそれが何なのかの説明を入れておきましょう。

これでスクリーンリーダーでフォーム部分を読み上げた時に“コメントフィールド”と読み上げられるようになります。ラベルの設定はこれだけなので簡単です。

対処方法は簡単なのですが、今回はWordPressサイトということで工夫が必要です。
というのもWordPressの場合は上記のコメントフィールドのコード自体が自動で出力されるので、aria-label属性を入れるにもある程度の知識が必要になるのです。

WordPressのコメントフォームにaria-labelを追加する方法

WordPressでコメント機能を有効にしている場合、コメントフィールドは基本的に「comments.php」というファイルを使って自動的に出力されます。

なので、comments.phpを編集してフォーム要素にaria-label属性を追加します。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_004

親テーマ内の「comments.php」を編集してしまうと、テーマをアップデートした時に編集内容が元に戻ってしまうので、子テーマに「comments.php」を用意します。

つまり、

/wp-content/themes/親テーマ名/comments.php

内にある「comments.php」をコピーして

/wp-content/themes/子テーマ

の中に同じファイルをもう1つ作る感じです。これでオーバーライドできます。

comment_form関数で出力を変更する

子テーマ内に「comments.php」が用意できたらこれを編集します。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_005

「/wp-content/themes/子テーマ名/comments.php」を編集する

WordPressでは「comments.php」内の、<?php comment_form(); ?>という関数でコメントフォームを出力していますが、関数に引数を指定すればコメントフォームをカスタムすることが出来ます。(comment_form関数の仕様については割愛します。)

調べれば色々出てきますが、今回は「aria-label="xxx"」をコメントフィールドに追加したいだけなのでcomment_fieldパラメータを使って出力するコードをデフォルトのものから少し変更します。

<?php
$comments_args = array(
// オリジナルの textarea (コメント本文入力欄) を再定義
    'comment_field' =>  '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" aria-label="コメントフィールド">' .
    '</textarea></p>',
);
comment_form($comments_args);
?>

こんな感じです。

テーマの方でコメントフィールドのtextarea部分の出力タグが変更されていることもあると思いますが、既存のコードに「aria-label="xxx"」を追加すればOKです。

functions.phpを使う方法もあるが要注意

ここまでは「commnets.php」を編集する方法を紹介しましたが、functions.phpでもcomment_form_defaultsフィルターフックを使えば一応対応できるはずです。

その場合は以下のようなコードをfunctions.phpに追記すれば動くはずです。

function my_comment_form_custom( $args ){
//コメントにaria-label属性を追加する
    $args['fields']['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"  aria-label="コメントフィールド">' .
    '</textarea></p>';
    return $args;
}
add_filter('comment_form_defaults', 'my_comment_form_custom');

ただし、テーマによっては意図しないコメントフォームが出力されてしまう可能性があるので、個人的には「commnets.php」を直接編集する方法が良いと思います。

functions.phpを使う場合は自己責任でお願いします。

フォームにラベルが付いたか確認する

作業が済んだらコメントフォームにラベルが付いているか確認しましょう。
まずはChromeのデベロッパーツールで確認します。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_006

空だったNameがコメントフィールドになった

aria-label属性の追加により、空だったNameに“コメントフィールド”が入りました。
続いて、PageSpeed Insightsの方も確認してみましょう。

フォームの要素にラベルが関連付けられていません-PageSpeed Insights_007

フォームの要素にラベルが関連付けられています

OKですね!

WordPressのサイト内検索にaria-labelを追加する方法

サイト内検索にも同じ問題があったので、追記です。

記事の執筆後にPageSpeed Insightsでもう一度確認すると、サイト内検索のフォーム部分にも“フォームの要素にラベルが関連付けられていません”という指摘が出ていることに気が付きました。

フォームの要素にラベルが関連付けられていません-PageSpeed-Insights_008

サイト内検索にもラベルが無かった...

(これ、PSIで「デスクトップ版」の検証結果を確認するのを忘れていました...。)

サイト内検索のフォームにもラベルが無いという事ですが、対処法は簡単です。
作業手順は先ほどの「commnets.php」を編集した時と同じ感じになります。

WordPressのサイト内検索には基本「searchform.php」というテンプレートが使用されるので、これを編集してaria-label属性でラベルを付与してあげます。

フォームの要素にラベルが関連付けられていません-PageSpeed-Insights_009

親テーマから子テーマ内に「searchform.php」をコピーする

まず親テーマ内にある「searchform.php」をコピーし、子テーマ内に設定します。
その後、子テーマ内の「searchform.php」を編集しましょう。

<input type="text" placeholder="<?php echo esc_attr( st_get_search_form_placeholder() ); ?>" value="<?php the_search_query(); ?>" name="s" id="s"/>

のような記述があるので、これに「aria-label="xxx"」を追記すればOKです。

<input type="text" placeholder="<?php echo esc_attr( st_get_search_form_placeholder() ); ?>" value="<?php the_search_query(); ?>" name="s" id="s" aria-label="サイト内検索"/>

こんな感じです。コメントフォームの時と同じです。
inputタグの中に「aria-label="サイト内検索"」と入れてやればOKです。

スマホのサイドメニューに設置してあるサイト内検索は怒られず、デスクトップ版でサイドバーに表示しているサイト内検索だけ怒られました。

もしかしたら初めから表示されていない要素は引っ掛からないのかも...。
基本はどちらのサイト内検索も「searchform.php」を使っているはずですので、この対処で全てのサイト内検索にラベルが付与されるはずです。



まとめ

以上、PageSpeed Insightsで“フォームの要素にラベルが関連付けられていません”が出た時の対処法でした。

解決できましたでしょうか?
対処方法は簡単なのですが、意図したところ(コメントフォーム)にaria-label属性をピンポイントで付与するのが意外と難しい感じでした。

WordPressで対処する方法まで書いたので意外と長くなりましたね~。
ではではこのへんで・w・

-サイト構築
-,

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。
  • この記事を書いた人
ザキ

ザキ

X:@sologaku

プログラミングに興味があり情報系の大学を卒業。

新卒で社会人になるも数年で退職し今はフリーランスとして生きています。

少しでも誰かの役に立てれば...と思い、当サイトでIT関係のハウツーを発信しています。


ソロ学運営者:ザキの自己紹介

© 2020 sologaku