Community Forums › Forums › Archived Forums › Design Tips and Tricks › HTML 5 FORM and section 508 accessility compliance
- This topic has 5 replies, 2 voices, and was last updated 8 years, 7 months ago by selkin.
-
AuthorPosts
-
July 1, 2015 at 11:55 am #158071selkinMember
Good Day,
I'm trying to get a new Genesis site as compliant with section 508 accessibility as possible. I am using the standard Genesis search widget (html5) and it triggers a compliance error.
I would like to retain label "inside" the search box. With this setting, screen readers do not see the form field label. But there are other methods to make the search form compliant (see 3 methods described below). So what I would like to do is add the form field title element to the standard search form (this will make it compliant). But how to do so in Genesis?
Thanks
-
Invisible Labels
There are times when a text label for a form control does not make sense visually. The most common example is the "Search" field. Its location within the page, in conjunction with the Search button, makes its purpose clear to sighted users. Adding a visual text label would be overkill and could negatively impact the site design.
One of the following three techniques should be used when a visible label is not available:
Hidden <label>
Hide the <label> element off-screen using CSS. The label will not appear visually, but will still be read by a screen reader.
Search Terms Search
Here is the HTML for the label and form control:
<label class="hidden" for="s">Search Terms</label>
<input type="text" id="s" name="s">
The CSS that is used to hide the label, and additional information about this technique, is outlined in our article on invisible content for screen readers.
title attribute
If a form field has a title attribute, but no <label>, the screen reader will read the title as if it were a label.
Search
Here is the HTML for the form control:
<input id="s" type="text" name="s" title="Search Terms">
This technique will also cause a tooltip to appear when the user hovers over the field with a mouse, which could be distracting for some users.
aria-label
The aria-label attribute can also be used when there is no text label on the page.
Search
<input id="s" type="text" name="s" aria-label="Search Terms">
Unlike aria-labelledby which must reference another element, aria-label contains the label text directly. As with aria-labelledby, aria-label will override any associated <label> elements.July 1, 2015 at 8:51 pm #158103ChristophMemberHi,
the next version of Genesis will have many improvements to accessibility.
In the meantime, did you install
https://wordpress.org/plugins/wp-accessibility/
or
https://wordpress.org/plugins/genesis-accessible/ ?
July 2, 2015 at 8:42 am #158155selkinMemberThank you Christoph.
I did not install the first plugin and it looks like the second requires a specific child theme.
Genesis does a pretty good job with being accessible. Most of the non-compliance items have to do with color choices and things that can be addressed by CSS, which I am working on now. But I wish to remove ERROR level compliance issues first. I also would rather not install another plugin for this one thing I wish to address. I am in contact with Ninja Forms regarding the same issue, but I cannot help but think there is way to address the Genesis Search box issue. How might I assign a form "title" to this?
Thanks again.
SE
July 2, 2015 at 10:36 pm #158252ChristophMemberThe Genesis Accessible plugin works with all Genesis Themes. I cannot recommend it highly enough.
I have taken the following code from the plugin.
It should work outside of the plugin but I have not tested it.
You can add the code to your functions.php and see if it solves the error:/** forms.php * Description: Adds label and id to the search forms * Author: Rian Rietveld * Plugin URI: http://genesis-accessible.org/ * License: GPLv2 or later */ //* Replace the search form, function adds a real label and an id for the search input field //* Based on the genesis_search_form with Genesis 2.0.2, keeps the filters add_filter( 'get_search_form', 'wpaccgen_get_search_form_uniqueid', 20 ); /** * Replace the default search form with a Genesis-specific accessible form. * * The exact output depends on whether the child theme supports HTML5 or not. * * Applies the <code>genesis_search_text</code>, <code>genesis_search_button_text</code>, <code>genesis_search_form_label</code> and * <code>genesis_search_form</code> filters. * * @since 0.2.0 * * @uses genesis_html5() Check for HTML5 support. * * @return string HTML markup. */ function wpaccgen_get_search_form_uniqueid() { $search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) . '…' ); $button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'genesis' ) ); $onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}"; $onblur = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}"; //* Generate ramdom id for the search field (n case there are more than one search form on the page) $form_id = uniqid( 'searchform-' ); //* Empty label, by default. Filterable. $label = apply_filters( 'genesis_search_form_label', '' ); if ( '' == $label ) { $label = apply_filters( 'genesis_search_text', __( 'Search this website', 'genesis' ) ); } $value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value'; if ( genesis_html5() ) { if ( function_exists( 'genesis_a11y' ) ) { $form = sprintf( '<form %s>', genesis_attr( 'search-form' ) ); } else { $form = sprintf( '<form method="get" class="search-form" action="%s" role="search">', home_url( '/' ) ); } $form .= sprintf( '<meta itemprop="target" content="%s"/><label for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" /><input type="submit" value="%s" /></form>', home_url( '/?s={s}' ), esc_attr( $form_id ), esc_html( $label ), esc_attr( $form_id ), $value_or_placeholder, esc_attr( $search_text ), esc_attr( $button_text ) ); } else { $form = sprintf( '<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" id="%s" class="s search-input" onfocus="%s" onblur="%s" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>', home_url( '/' ), $label, $id, esc_attr( $search_text ), esc_attr( $onfocus ), esc_attr( $onblur ), esc_attr( $button_text ) ); } return apply_filters( 'genesis_search_form', $form, $search_text, $button_text, $label ); }
July 8, 2015 at 12:32 pm #158822selkinMemberMuch thanks Christoph, I will troubleshoot further.
selkin
August 28, 2015 at 5:56 am #163865selkinMemberCaught up on a couple of others issues, but will return to this soon.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.