Search widget form not accessible because label is missing

ElisabettaCarrara · January 11, 2023, 1:47pm

While checking my site for accessibility, I got a warning that the search form widget is not accessible because of the label missing in the input field.

I think one thing that can be considered in the future is improving on these aspects of the platform to allow for better accessibility, resulting in a better experience for site visitors with disabilities and site owners with disabilities.

I think this is a simple change in the PHP template of the widget in the core where widgets are registered, in the coming days I will try to make it accessible and submit my solution on GitHub if there is interest in improving that aspect and if changing this isn’t a breaking change.

Reference links:

https://nicolaslule.com/how-to-customize-the-search-form-in-wordpress/ (how to code a custom search form)
https://rianrietveld.com/2014/11/a-placeholder-is-no-label-search-forms-in-wordpress-can-do-better/ (discussion about search forms and accessibility in WP)

viktor · January 11, 2023, 2:09pm

That might be your theme modifying search widget. I just checked all 3 included themes - 2015, 2016, 2017 - and they all have a label text for the search widget. You can see the structure overall is the same, but there are slight differences due to theme’s modifications

So when I check accessability for the form, it has the label and the button text:

I would change themes and check to see if it’s your theme that might be modifying search widget.

I believe the HTML code is generated here:

github.com

ClassicPress/ClassicPress/blob/a5170fb3596e7ad57f4e9f2edfc14c84659583ec/src/wp-includes/general-template.php#L222,L238


      
          		// Build a string containing an aria-label to use for the search form.
          		if ( isset( $args['aria_label'] ) && $args['aria_label'] ) {
          			$aria_label = 'aria-label="' . esc_attr( $args['aria_label'] ) . '" ';
          		} else {
          			/*
          			 * If there's no custom aria-label, we can set a default here. At the
          			 * moment it's empty as there's uncertainty about what the default should be.
          			 */
          			$aria_label = '';
          		}
          		if ( 'html5' === $format ) {
          			$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" />
          				</label>
          				<input type="submit" class="search-submit" value="' . esc_attr_x( 'Search', 'submit button' ) . '" />
          			</form>';
          		} else {
          			$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
          				<div>

ElisabettaCarrara · January 11, 2023, 2:21pm

I am spinning a staging to start working on that. I suspected I had to check the theme also, so thanks for confirming.
If it’s the theme might be good to fork it and make it accessible for CP. It’s the theme frontier for WP (in the WP repo there is Asteroid theme by same author, both are cp compatible and declare so in the readme). Or I can submit my fix to the theme dev on GitHub if it works.

ElisabettaCarrara · January 11, 2023, 3:16pm

Confirmed it is the theme. for reference theme can be downloaded from here (it is a very good theme, and works well with bootstrap 5 loaded in the head section via a plugin so I might as well include bootstrap correctly in it while I am working on accessibility).
Confirmed that the 2016 CP theme category dropdown is not accessible (since while testing with the same tool as before with categories set to dropdown it says no label, while the category list is ok).
With the changes I have in mind, might make sense to start from a child theme and eventually make a new theme out of it if I come up with other ideas (this theme also has code for a forum template to show a topic CPT if registered and templates for the right/left sidebar, two sidebars and the full page no sidebars so it can make a good theme for companies wanting to use a forum to offer support to customers)
by the same author in the wp repo, there is this theme Asteroid, very similar to the frontier. Both declare support for CP in the readme. I tried to contact the dev to ask if they were interested in having it in the cp dir but contact forms in the sites they own do not work and I am wary of reaching out to them about it on the Asteroid theme support forum on wp.org for obvious reasons.