サポート » テーマ » 検索ボックスに新しい属性と属性値を追記する方法

  • 解決済 echizenya

    (@echizenya)


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

    【質問の主旨】

    ブログサイトのサイドバーに表示させている検索ボックスに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 検索ボックス フック”で検索をしてみましたが、今回の質問と課題に関わるようなブログ記事などを見つけることはできませんでした。

    以上、ご確認よろしくお願い申し上げます。

    • このトピックは2週、 4日前にechizenyaが編集しました。理由: 誤字・脱字があったため編集

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    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)

    @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件中)
  • このトピックに返信するにはログインが必要です。