Search form Accessibility error

  • Resolved pbatson

    (@pbatson)


    3 years, 9 months ago

    Love wp bootstrap starter! I’ve found the searchform.php uses a form that throws an accessibility error (Empty form label) when using the web accessibility evaluation tool https://wave.webaim.org/

    This fixes it:

    <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="search" class="d-none"><?php echo esc_attr( _ex( 'Search for:', 'label', 'wp-bootstrap-starter' ) ); ?>" </label>
	<input type="search" class="search-field form-control" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wp-bootstrap-starter' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr( _ex( 'Search for:', 'label', 'wp-bootstrap-starter' ) ); ?>" aria-label="Search">
	<input type="submit" class="search-submit btn btn-default" value="<?php echo esc_attr_x( 'Search', 'submit button', 'wp-bootstrap-starter' ); ?>">
</form>
Viewing 1 replies (of 1 total)
  • Thread Starter pbatson

    (@pbatson)

    Actually, …

    <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="s" class="d-none"><?php echo esc_attr( _ex( 'Search for:', 'label', 'wp-bootstrap-starter' ) ); ?></label>
	<input type="search" class="search-field form-control" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wp-bootstrap-starter' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" id="s" title="<?php echo esc_attr( _ex( 'Search for:', 'label', 'wp-bootstrap-starter' ) ); ?>" aria-label="Search">
	<input type="submit" name="search_submit_btn" id="search_submit_btn" class="search-submit btn btn-default" value="<?php echo esc_attr_x( 'Search', 'submit button', 'wp-bootstrap-starter' ); ?>">
	<label for="search_submit_btn" class="d-none"><?php echo esc_attr_x( 'Search', 'submit button', 'wp-bootstrap-starter' ); ?></label>
</form>
Viewing 1 replies (of 1 total)
  • The topic ‘Search form Accessibility error’ is closed to new replies.