一部の要素にラベル要素が関連付けられていません。PageSpeed Insights対応

概要説明

PageSpeed Insightsにて一部の要素にラベル要素が関連付けられていませんの対応を行った時のカスタマイズ。aria-label属性を追加で対応しています。

一部の要素にラベル要素が関連付けられていません。PageSpeed Insights対応

入力フィールドや、セレクトボックスに aria-label=”項目説明” をつけることで解決できることを確認

検索フォーム用のsearchform.phpにて解説

searchform.php
<!-- こちらは警告の対象となる -->
<input type="text" name="s" id="s" placeholder="サイト内検索" value="<?php the_search_query(); ?>" />

<!-- aria-labelをつけると警告が消える -->
<input aria-label="サイト内検索" type="text" name="s" id="s" placeholder="サイト内検索" value="<?php the_search_query(); ?>" />

wp_dropdown_categoriesにてセレクトボックス表示を行っている場合

searchform.php
ob_start();
wp_dropdown_categories('orderby=id&hide_empty=-&show_option_all=カテゴリー選択&exclude=7&selected='.$selected);
$dropdown_categories = ob_get_contents();
ob_end_clean();
echo str_replace('<select ', '<select aria-label="カテゴリー選択" ', $dropdown_categories);

セレクトボックス用のhtmlを一旦取得して、置換してやることでaria-label属性を加えることができます。この対応でPageSpeed Insightsでの警告は消えたので問題ないのだと思います。

ob_start()、ob_get_contents()を使えば他の処理でも同様の対応が行なえます

WordPress Developer Resources

関連機能

  1. Fatal error: Uncaught Error: Call to undefined function create_function()の対応

  2. ACFのバージョンアップ (6.2.7) によりhtmlがエスケープされるように変更。scriptタグなども非表示になってしまったので以前の内容を表示できるように対応

  3. WordPressページで404 not foundの場合にトップページにリダイレクトを行う

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

運命さんね
オレそいつ 嫌いなんだわ

ブラッククローバー
by ヤミ・スケヒロ

Profile

PAGE TOP
Amazon プライム対象