検索ボックスに新しい属性と属性値を追記する方法

解決済 echizenya
(@echizenya)

3年、 6ヶ月前
いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

ブログサイトのサイドバーに表示させている検索ボックスにaria-labelの属性と属性値を追記する方法を教えてください。

【質問の補足】

1. “Buttons do not have an accessible name”

現在、GoogleのLighthouseで計測できるAccessibilityについて見直しを行っています。
ヘルプが必要なページについて改善を求められる項目のうち、WordPressのウイジェットで使える検索ボックスについて、”Buttons do not have an accessible name(ボタンにアクセス可能な名前がありません)”があります。

2. aria-label属性について

こちらのブログ記事によると、Lighthouseからの指摘を修正するためには検索ボックスとして使っているinputタグにaria-labelの属性と属性値を追記する必要があると思われます。
```
// 追記前
<input type="search" id="search-form-5f7e72a0dcd94" class="search-field" placeholder="検索" value="" name="s">

// 追記後
<input type="search" id="search-form-5f7e7110a7095" class="search-field" placeholder="検索" value name="s" aria-label="search-box">
```
3. aria-label属性を追記するフック

functions.phpで何らかのフックを記述すれば、検索ボックスとして使っているinputタグにaria-labelの属性と属性値を追記できると思います。そこでGoogle検索で、”WordPress 検索ボックスフック”で検索をしてみましたが、今回の質問と課題に関わるようなブログ記事などを見つけることはできませんでした。

以上、ご確認よろしくお願い申し上げます。
- このトピックは3年、 6ヶ月前にechizenyaが編集しました。理由: 誤字・脱字があったため編集
ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)

(@ishitaka)

こんにちは

get_search_form フィルターフック辺りで出力された HTML を置換するのはどうでしょうか？

function my_search_form( $form ) {
	$form = str_replace( 'name="s"', 'name="s" aria-label="search-box"', $form );
	return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

または、

function my_search_form( $form, $args ) {
	$aria_label = ( isset( $args['aria_label'] ) && $args['aria_label'] ) ?  'aria-label="' . esc_attr( $args['aria_label'] ) . '" ' : '';

	$form = '<form role="search" ' . $aria_label . 'method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
		<label>
			<span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
			<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" aria-label="search-box" />
		</label>
		<input type="submit" class="search-submit" value="' . esc_attr_x( 'Search', 'submit button' ) . '" />
	</form>';

	return $form;
}
add_filter( 'get_search_form', 'my_search_form', 10, 2 );

トピック投稿者

echizenya

(@echizenya)

3年、 6ヶ月前

@ishitaka さん。
いつもコメントありがとうございます。
教えていただいた下記のコードでaria-label属性を追記することができました。

function my_search_form( $form ) {
	$form = str_replace( 'name="s"', 'name="s" aria-label="search-box"', $form );
	return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

今後ともどうぞよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「検索ボックスに新しい属性と属性値を追記する方法」には新たに返信することはできません。

トピックタグ

表示