“[id]属性が有効でフォーカス可能な要素のIDが一意ではありません”がPSIで出た時の対処法。

PSI：“[id]属性が有効でフォーカス可能な要素のIDが一意ではありません”の対処法

数カ月前にGoogleが提供するサイト診断ツール「PageSpeed Insights」の仕様が変更され、ユーザー補助という項目に出る改善案が多くなりました。

ユーザー補助と題されているだけあり、検索やコメントなどでも使用されるフォーム要素（入力フォーム）のユーザビリティ関連でよく怒られます…。

今回はその指摘の１つである、

[id]属性が有効でフォーカス可能な要素のIDが一意ではありません

というのに対処した時の内容を記事にします。

PageSpeed Insightsで当サイトの記事ページを診断した結果

新しくなったPSIの診断では、当サイトの「サイト内検索」のフォーム部分がボコボコに怒られており、これまで対処を重ねてきました。

今回の内容は「ARIA IDが一意ではありません」という指摘とほとんど同じ内容です。
１つの記事にしても良かったのですが、備忘録でもあるのでこちらに分けました。

では早速見ていきましょう・ｗ・

原因はフォーカス可能な要素内のid名の重複

まず“[id]属性が有効でフォーカス可能な要素のIDが一意ではありません”が出る原因ですが、これは１ページ内に重複するidが存在していることにあります。

本来は一意であるはずのid（id名）が１ページ内に複数あり、スクリーンリーダーを使った時や、要素のフォーカス時にややこしいではないか！という内容です。

さらに詳しい内容は以下のサイトで解説されているので、参考になるかと思います。

ここで改めて「PageSpeed Insights」を確認してみると、

id=”searchsubmit”が２つあり、id名が重複している

２つの<input>要素内に「id=”searchsubmit”」と書いてあり、同じid名が指定されていることが分かりますが、今回はこれを被らないようにする必要があります。

当サイトの場合は、フォーム要素であるサイト内検索のボタン部分で怒られました。

静的サイトなら該当するid名を異なるものに変更するだけでOKなのですが、当サイトはWordPressということで少し面倒なことになりました。

WordPressでは「検索」を２つ使うとダメ？

WordPressには簡単にサイト内検索を実装できるウィジェットで「検索」というのがありますが、これを２つ使うとidが被ります。

WordPressのサイト内検索ウィジェット

使用中のWordPressのテーマにもよりますが、この「検索」ウィジェットを当サイトのようにパソコン用・モバイル用と２つ使用しているとidが被ります。

WordPressのサイト内検索には基本的に「searchform.php」というファイルが使われますが、これが２回読み込まれるので同じidが２つ出力されるわけですね～。

ということで、WordPressで“[id]属性が有効でフォーカス可能な要素のIDが一意ではありません”が出た時の対処方法は以下２つになります。

今回は２つめの方法で、異なるidのサイト内検索を実装することで対処します。

対処法：要素内のidを重複しないようにする

当サイトの場合は「searchform.php」内に以下のような記述があり、これが先ほどの検索ウィジェットを使った時に読み込まれます。

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label class="hidden" for="s">
        <?php __( '', 'default' ); ?>
    </label>
    <input type="text" placeholder="<?php echo esc_attr( st_get_search_form_placeholder() ); ?>" value="<?php the_search_query(); ?>" name="s" id="s" />
    <input type="submit" value="&#xf002;" class="fa" id="searchsubmit" />
</form>

なのでこのコードを参考に、id名だけ「searchsubmit」から別のものに変更したものを、サイドバーのサイト内検索（パソコン用）で出力するように自前で用意します。

モバイル用のサイト内検索は検索ウィジェットでid="searchsubmit"を出力。
パソコン用にコードを直書きした別のidのサイト内検索を出力する感じですね。

「sidebar.php」にサイト内検索のコードを直書きする

WordPressの場合はサイドバーの出力には基本的に「sidebar.php」というファイルが使われるので、今回はこれにサイト内検索のコードを直書きします。

「sidebar.php」を開いて該当する箇所にサイト内検索のコードを書きます。

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label class="hidden" for="s">
        <?php __( '', 'default' ); ?>
    </label>
    <input type="text" placeholder="<?php echo esc_attr( st_get_search_form_placeholder() ); ?>" value="<?php the_search_query(); ?>" name="s" id="s" />
    <input type="submit" value="&#xf002;" class="fa" id="pc-searchsubmit" />
</form>

ほとんど同じコードですが、id=”xxx”の部分を「pc-searchsubmit」に変更して検索ウィジェットが出力する「searchsubmit」というid名と重複しないようにしました。

id名が変更され、重複していないか確認する

作業を終えたら早速idを確認しましょう！
まずはChromeのデベロッパーツールを使ってidを確認します。

同じようなサイト内検索ですが、id名は別々のものが付与されています。
続いて肝心の「PageSpeed Insights」の方でもチェックしてみます。

[id] 属性が有効でフォーカス可能な要素の ID はすべて一意です

OKですね！

まとめ

以上、PageSpeed Insightsで“[id]属性が有効でフォーカス可能な要素のIDが一意ではありません”が出た時の対処法でした。

内容自体は簡単でid名を重複しないように変更すればOKなのですが、WordPressだとその部分が自動出力なので結構面倒です。

ある程度の専門知識が必要になるので、分からない方は「検索」ウィジェットを１つに絞って対応する感じになるかと思います…。
PageSpeed Insightsの改善必須項目ではないので無視するのもアリかもです。

Copyright © 2024 ソロ学 All Rights Reserved.