「ARIA ID が一意ではありません」がPageSpeed Insightsで出た時の対処法。

「ARIA ID が一意ではありません」の対処法

2022年末？ごろにGoogleのサイト検証ツールである「PageSpeed Insights」の仕様が変更されたようで、新しい改善案が出ていたので対処しました。

「PageSpeed Insights」で当サイトの記事ページを診断したところ以下のような内容の改善案が出ました。

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

ARIA ID が一意ではありません
他のインスタンスが支援技術によって見落とされることのないように、ARIA IDの値は一意にする必要があります。

内容は、１ページ内に同じid属性が２つあってスクリーンリーダーなどの支援技術に対応できない可能性があるよ～！とのことです。

詳しい内容は割愛しますが、id属性に付ける名前は一意である必要があります。
サイト内のAとBという別々のパーツに対して同じ名前のidは使えない感じですね。

idの重複問題について、詳しい内容は以下のサイトに説明がありました。

指摘されたのは「サイト内検索」ウィジェット

今回当サイトで指摘された原因は、WordPressで使えるウィジェットの１つである「検索」というサイト内検索を実装するウィジェットが出力するid属性でした。

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

このサイト内検索は「get_search_form」という関数を使って「searchform.php」という検索用のテンプレートを呼び出すものです。
このサイト内検索をパソコン用とモバイル用で２つ使っているのが問題でした。

このように２つサイト内検索を使っていると２回「searchform.php」が呼び出されるので、当然同じid属性が２個出力されるという訳ですね～。

原因が分かったところで対処します。

対処方法：id名を変更するか、１つに絞る

改めて「PageSpeed Insights」の診断結果を確認してみます。

"s"というid属性値が重複している

少し分かりにくいですが、パソコン用とモバイル用のサイト内検索のid属性値に同じ「s」という名前が使われていることが分かります。

<input type="text" placeholder="" value="" name="s" id="s" aria-label="サイト内検索"/>

今回問題なのは「id="s"」が２つあるというところです。
ということで“ARIA ID が一意ではありません”の具体的な対処方法は以下２つです。

先述の通り「サイト内検索」ウィジェットを２回使うと同じテンプレートが２回出力されてしまい、そこでid属性が被ってしまいます。

なので簡単に対処するなら「サイト内検索」を１つにすればOKです。
パソコンかモバイルのどちらかの出力を諦めるという事です。

当サイトの場合は、パソコン・モバイルでサイト内検索を出し分けてはいるものの、コード自体は出力されているのでPageSpeed Insightsで怒られました。

う～ん、パソコンでもモバイルでもサイト内検索は表示したい...
諦めきれないので、id属性が被らないように自前で「サイト内検索」を実装することで対処していきます。

id属性を変えたサイト内検索を実装する方法

今回は、モバイル用のサイト内検索ウィジェットはWordPressのダッシュボードから挿入できるウィジェットをそのまま使い、パソコン用のサイト内検索のidを変更して自前で用意します。もちろん逆でもOKです。

WordPressの場合、パソコン用のサイドバーは基本的に「sidebar.php」で出力されています。なのでこれを編集します。

子テーマ内の「sidebar.php」を編集する

親テーマ内の「sidebar.php」を触るとアップデートで消えるので、親テーマから「sidebar.php」を子テーマ内にコピーして、これを編集するようにしましょう。

開いたら、id属性を既存のidと被らない名前に変更します。

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
　<label class="hidden" for="pc-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="pc-s" aria-label="サイト内検索"/>
　<input type="submit" value="&#xf002;" class="fa" id="pc-searchsubmit" />
</form>

<label>内のfor=""の部分と、<input>内のid=""の中に同じ名前を指定します。

当サイトの場合はWordPressの既存のウィジェットが「for="s"」と「id="s"」を出力していたので、「for="pc-s"」と「id="pc-s"」と別のid名に変更しました。

サイト内検索がベタ書きのコードで「sidebar.php」から出力されるようになったら、既存のパソコン用の検索ウィジェットを削除します。

WordPressのテーマにもよると思いますが、サイト内検索は同じテンプレートを使うのがWordPressの仕様なので、今回のPageSpeed Insightsの対処はかなり面倒です。

idが重複していないか確認する

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

スマホのidは今まで通りの「s」

スマホのメニューは今まで通り「検索」ウィジェットをそのまま使ってサイト内検索を表示しているので、id名は変わらず「s」です。これはOK。

パソコン用のidは変更した「pc-s」

id名を変更したパソコン用のサイト内検索を確認すると「pc-s」になっていますね！
これでidが「s」と「pc-s」の２つになり、それぞれが一意になりました！

肝心の「PageSpeed Insights」の方でもチェックしてみましょう。

ARIA ID は一意です

OKですね！

まとめ

以上、PageSpeed Insightsで「ARIA ID が一意ではありません」が出た時の対処方法でした。

HTMLやPHPを直書きしているサイトならid属性をちょんちょんと変更するだけでOKなのですが、WordPressは動的、自動出力なので結構面倒です。

最後にアレですが、初心者の方ならサイト内検索を１つに絞るか、２つ使いたいならPageSpeed Insights方は目を瞑って放置でも良い内容かもしれません...。