WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Feb 10 2011

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

Written by Travis Smith · Categorized: WordPress

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Brooke says

    February 14, 2012 at 10:56 pm

    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?

    Reply
  2. Rian says

    July 25, 2012 at 7:17 am

    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

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in