Site icon WP Smith

Web Accessibility: Making Genesis Accessible

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