Recently, in the StudioPress forums, there was a conversation regarding Web Accessibility. Spiking my interest, I wondered how accessible Genesis was. If you were to run Genesis through the WAVE Web Accessibility Evaluation Tool as I did to StudioPress's Demo of Genesis (report here). There are three accessibility errors, and all three have to do with a missing label: search form (Genesis), enews and updates form (Genesis), and categories form (dropdown) (WordPress Core). While I am not sure if StudioPress will incorporate these label fixes into their core, they can be easily fixed.
Search Form
To fix the search form label, open search.php in your genesis > lib > structure folder. At line 18, change $form from
[php]$form = '
<form method="get" class="searchform" action="' . get_option('home') . '/" >
<input type="text" value="'. $search_text .'" name="s" class="s"'. $onfocus . $onblur .' />
<input type="submit" class="searchsubmit" value="'. $button_text .'" />
</form>
'; [/php]
to the following:
[php]$form = '
<form method="get" class="searchform" action="' . get_option('home') . '/" >
<label for="s" style="display:none;">Search</label>
<input type="text" value="'. $search_text .'" name="s" id="s" class="s"'. $onfocus . $onblur .' />
<input type="submit" class="searchsubmit" value="'. $button_text .'" />
</form>
'; //added <label for="s" style="display:none;">Search</label> to $form & id="s" [/php]
eNews and Updates Form
To fix the enews and updates form label, open enews-widget.php in your genesis > lib > widgets folder. At line 36, change the <form> from:
[php]<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_js( $instance['id'] ); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" value="<?php echo esc_attr( $instance['input_text'] ); ?>" id="subbox" onfocus="if (this.value == '<?php echo esc_js( $instance['input_text'] ); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo esc_js( $instance['input_text'] ); ?>';}" name="email"/><input type="hidden" value="<?php echo esc_attr( $instance['id'] ); ?>" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="<?php echo esc_attr( $instance['button_text'] ); ?>" id="subbutton" /></form>
<?php } [/php]
to the following:
[php]<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_js( $instance['id'] ); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><label for="subbox" style="display:none;">enews</label><input type="text" value="<?php echo esc_attr( $instance['input_text'] ); ?>" id="subbox" onfocus="if (this.value == '<?php echo esc_js( $instance['input_text'] ); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo esc_js( $instance['input_text'] ); ?>';}" name="email"/><input type="hidden" value="<?php echo esc_attr( $instance['id'] ); ?>" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="<?php echo esc_attr( $instance['button_text'] ); ?>" id="subbutton" /></form>
<?php } //added <label for="subbox" style="display:none;">enews</label>[/php]
Dropdown Categories
The last error is actually a WordPress core accessibility "error" and has nothing to do with Genesis. First, this is a WordPress core file and edit this at your own risk and as always backup everything before you edit. If you open category-template.php in your wp-includes folder. So you want to edit line 334 as follows:
ORIGINAL:
[php]$output = "<label for='$id' style='display:none;'>$name</label><select name='$name' id='$id' class='$class' $tab_index_attribute>n"; //added <label for='$id' style='display:none;'>$name</label>[/php]
MODIFIED for Accessibility:
[php]$output = "<label for='$id' style='display:none;'>$name</label><select name='$name' id='$id' class='$class' $tab_index_attribute>n"; //added <label for='$id' style='display:none;'>$name</label>[/php]
Now, I need to suggest this at WordPress trac. Oh dear! DONE: Trac Ticket: http://core.trac.wordpress.org/ticket/16527
Brooke says
I googled genesis accessibility and found this post. This post is almost a year old. I was wondering if this is still an issue with genesis. Could you fill me in or add any updates?
Rian says
Hi Travis,
Some screen readers also hide (don’t read out load) a style=”display:none;”
Maybe adding a class like .assistive-text is a better solution?
.assistive-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
Kind regards,
Rian