概要説明
PageSpeed Insightsにて一部の要素にラベル要素が関連付けられていませんの対応を行った時のカスタマイズ。aria-label属性を追加で対応しています。
～ 目次 ～
検索フォームを設置する場合は要注意
入力フィールドや、セレクトボックスに 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()を使えば他の処理でも同様の対応が行なえます
