Simple WAI (web accessibility) hack

  • Hi,

    I was interested to see that Chris J. Davis has made his site meet all the Web Accessibility Initiative guidelines (designed to help blind or otherwise disabled people surf the net). With two small modifications, the default Kubrick template can meet almost all of the WAI guidelines (and all of the Priority 1 guidelines).

    All modifications should be made to files in wp-contern/themes/default.

    1. In searchform.php, replace this:

      <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />

      with this:

      <label for="s"><span style="display: none;">Search this site </span><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" alt="Search this site" /></label>

    2. In header.php, replace this:

      <html xmlns="https://www.w3.org/1999/xhtml">

      with this (assuming your site is in English):

      <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="eng">

    You can check the accessibility of your site with Cynthia Says at https://www.contentquality.com/.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter typey

    (@typey)

    Oops. That directory path should be:

    wp-content/themes/default

    “style=display:none” is invisible to screen readers. This means that while Chris’ page technically meets the WAI standards it actually does nothing to improve accessibility at all unless viewed with a text-only browser such as Lynx.

    What you can do to make content visible to screen readers, but not show up in your visual design is use the ‘off-left method’.

    For the example above, put the following rules in your stylesheet:

    label span {
    position:absolute;
    left: -10000px;
    }

    Thread Starter typey

    (@typey)

    Well, I should say that “display: none” was my method, not Chris’s; from checking out his site, I’m sure if it was his it would have worked correctly.

    Thanks for the tip.

    Jamie

    Post by Bruce Lawson of the web standards project on hacking wordpress for accessibility https://www.brucelawson.co.uk/index.php/2005/wordpress-accessibility-hacks/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Simple WAI (web accessibility) hack’ is closed to new replies.