WordPress.org

Ready to get started?Download WordPress

Forums

Tough Question About 508 Compliance and a "label" (15 posts)

  1. rankbeginner
    Member
    Posted 9 years ago #

    Hello and, as usual, thanks in advance.

    I am trying to get my site, ( http://www.youthtopia.com )
    compliant with section 508. "I was pretty close" (said the circus knifethrower), but I can't crack one violation. It involves adding a "label" to forms. I have no "forms" on my WP home page, but three form-like items: a search box, a drop-down box for archives, and a drop-down box for categories.

    I fixed the search and archives boxes so they passed -- by adding this snipet to Search (and a similar one to Archives):
    '
    <h2 class="sidebar-title"><label for="search">Search</label></h2>
    '
    In those two cases that worked, the "forms" had id values ... this one above had id="search". ...

    Categories isn't falling into place like the other two. It has no "id", so I had to guess when I put in the value for
    '
    <lable for="cat">
    '
    ... I put in the "name" value (cat) and that failed.

    Categories has no id, and doesn't fit the pattern of the other two.

    The site is at http://www.youthtopia.com ... and the source (of course) can be viewed.

    The trouble-ing area begins [page source code] at
    '
    <!-- <h2 class="sidebar-title">Categories</h2> -->

    <form action="" method="get">
    <h2 class="sidebar-title"><label for="cat">Categories</label></h2>

    <p style="padding: 0px; margin: 0px;"><select name='cat' class='postform'>
    <option value='all'>All</option>
    <option value="1">Uncategorized</option>
    '

    The correstponding source code in my wordpress template looks a bit different, and you can see my failed attempt to add the label:

    '
    <!-- <h2 class="sidebar-title">Categories</h2> -->

    <form action="<?php echo $PHP_SELF ?>" method="get">
    <h2 class="sidebar-title">
    <label for="cat">Categories</label></h2>
    <p style="padding: 0px; margin: 0px;"><?php dropdown_cats(); ?>
    <input type="submit" name="submit" value="GO" />
    </form>

    '

    Thanks for any possible advice on this. After working so much on this site, it would be great to get that 508 compliance.

    Rank Beginner

  2. moshu
    Member
    Posted 9 years ago #

  3. Lorelle
    Member
    Posted 9 years ago #

    First, let me tell you how proud I am of you taking on the extra task of making your WordPress site accessible. I, and others, would also appreciate it if you could explain a little more about what you did to get to at least this point.

    I ran your website through a variety of validation tests for accessibility and found only "recommendations" or a checklist that you need to do manually in order to pass, which it looks like you've done. In other words, these features are beyond the capability of the validator and they have to "trust you" to make sure you have done these things. They look like errors, but they aren't. Just expectations.

    One of the very hardest tests to pass was Bobby from Watchfire, and the new WebXACT from Watchfire is also very difficult to pass, and other than "recommendations" on the manual checklist, it looks like you've passed for the most part. Run the site through the test and check each of the tabs across the top of the report to see for yourself.

    I wish more people would take on this responsibility, and that Theme Authors would also make their Themes more accessible, so anything you can share to help us all learn about what you did, like with the search form, would be appreciated.

    Thanks again, from everyone who "sees" or "listens" to websites.

  4. Root
    Member
    Posted 9 years ago #

    I am just wondering to what extent theme authors should have any type of implied obligation to make their themes more accessible than the Wp standard of the default?

  5. rankbeginner
    Member
    Posted 9 years ago #

    Hi Everyone,

    Thanks for the comments -- all interesting and helpful.

    Here's the site where I failed the test:

    http://webxact.watchfire.com/ScanForm.aspx

    If you go to this page, and then type in my URI

    http://www.youthtopia.com

    ... you will see that I fail -- they call it an "error", not a warning -- and I can't get 508 certified.

    Let me know what you think.

    BTW, Lorelle, I am working on a paper "Beginner's Guide to 508 and WAI", and I will send a link here as soon as it's complete. The theme I'm using (Minima Plus 1.0) came in very good shape, very close to passing the CSS and the 508.

    Thanks again ... RB

  6. Lorelle
    Member
    Posted 9 years ago #

    rankbeginner: you'll have to be more specific about the error. When I ran your page, it didn't report any errors, only advisements. And good for you writing this up. I look foward to it.

    We are also seeking similar documentation in the WordPress Codex at http://codex.wordpress.org/

    HINT!

  7. rankbeginner
    Member
    Posted 9 years ago #

    Here, Lorelle, is the more specific. I ran my page here:
    http://webxact.watchfire.com/ScanForm.aspx

    and then I took a screen capture of the errors, and you can see that here:

    http://photos10.flickr.com/11399184_7e1d502dea_o.jpg

    Thanks ... RB

  8. Randy
    Member
    Posted 9 years ago #

    You can do this: <label> Categories <select>...</select></label>. That will take care of error #1.

    For error number 2, do you have Flash, PDFs, or other documents web browsers can't natively display? If so, provide a link to where a viewer can be downloaded.

  9. rankbeginner
    Member
    Posted 9 years ago #

    Hello Randy ...

    Can you give me a little more detail about your suggestion? ... the <label> tag requires a "for" attribute:

    '
    <label for="same_as_id"> Categories ... </label>
    '

    What would you use inside that "for" attribute, where I have "same_as_id" ?

    Thanks ... RB

  10. Randy
    Member
    Posted 9 years ago #

    good question :) File a bug report. But at least that will get you by because most browsers will recognize that. Your page won't validate but it's a quick and dirty hack until the WP code is improved.

  11. tbaxter
    Member
    Posted 9 years ago #

    The validators aren't looking for a label on every form, they want a label on every form element. Search boxes and dropdown lists absolutely count as form elements.

    Give the form element an id... usually I just make it the same thing as the name, and that's fine... it'll look something like:

    '<input type="text" name="blah" id="blah" />'

    Then add the label, referencing the ID.

    '<label for="blah">This is blah</label>'

    That's it.

  12. rankbeginner
    Member
    Posted 9 years ago #

    Hi tbaxter, and thanks for your input.

    I had that same notion, but I was confused because this is an "input button" with the name "submit". So I made the id="categs" and a matching label -- but that failed.

    Here's the code I tried:

    '
    <!-- <h2 class="sidebar-title">Categories</h2> -->

    <form action="<?php echo $PHP_SELF ?>" method="get">
    <h2 class="sidebar-title"><label for="categs">Categories</label></h2>
    <p style="padding: 0px; margin: 0px;"><?php dropdown_cats(); ?>
    <input type="submit" id="categs" name="submit" title="submit" value="GO" />
    </form>
    '

    Can I try something else?

    Thanks again ... RB

  13. rankbeginner
    Member
    Posted 9 years ago #

    I solved the "label" problem by just changing the Categories from a drop-down box to a list. The list is better for me, I think, since there are a fixed number of my categories -- for Archives Months, that keep growing, I prefer a drop-down box.

    That doesn't answer the question about how to make that Categories drop-down box complaint with 508, but that riddle can be answered another day.

    The last bit that remains for my 508 compliance (which is different from WAI compliance) is to solve the mystery of the vanishing plug-ins. The 508 validator flunks me because it says that I need a link to plug-ins. But no plug-in is needed to read this page, or anything linked to this page.

    I will work on this problem, and then report back here with news.

    Earlier I mentioned writing a paper about WordPress and 508 compliance: I will happy to make that available to anyone who is interested, including the WordPress files on Wiki. I'll post here as soon as that is complete.

    Thanks again, all! ... RB

  14. Randy
    Member
    Posted 9 years ago #

    The problem is that the select element created by dropdown_cats() needs to have an id attribute too. Ideally, it would be something like this:

    <form action="" method="">

    <label for="cats">Categories:</label><select id="cats">...</select>
    <label for="catsub">Go to selected category:</label><input id="catsub" type="submit" value="Go" />

    </form>

  15. rankbeginner
    Member
    Posted 9 years ago #

    Thanks very much, Randy. I will try that and let you know if it works.

    But look at the code in my sidebar.php ... (see below), and you'll see that I can't get into that "Go to selected category" that you've listed above. ... But let me give it a try and then get back to you.

    '
    <form action="<?php echo $PHP_SELF ?>" method="get">
    <h2 class="sidebar-title"><label for="categs">Categories</label></h2>
    <p style="padding: 0px; margin: 0px;"><?php dropdown_cats(); ?>
    <input type="submit" id="categs" name="submit" title="submit" value="GO" />
    </form>
    '

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.