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

PageSpeed Insightsで“[id] 属性が有効でフォーカス可能な要素の ID が一意ではありません”という改善案が出た時の対処法です。

これはフォーカス可能な要素（入力フォームなど）の中に重複したIDを指定しているページを検証した時に出る改善案です。

WordPressを使っている当サイトでは「サイト内検索」のボタン部分にこの指摘が出ていましたので対処しました。その時の内容です。

対処方法は簡単で、既存のid名を重複しないように変更すればOKです。

この記事の目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考

「フォーカス可能な要素」とは、簡単に言えばパソコンのTabキーで飛べる部分です。クリックできるリンク部分や、入力フォームもこれに当たります。

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

外部リンク

【参考】
アクティブID属性値は一意である必要があります | Axe Rules | Deque University | Deque Systems

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

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

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

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

: サイト内検索１（PC用）

: サイト内検索２（モバイル用）

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

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

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

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

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

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のサイト内検索を出力する感じですね。

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

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

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

ポイント

親テーマ内にある「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名を変更しているので、場合によってはCSSを当て直す必要があります。