WordPress.org

1. Jay Collier
   Member
   Posted 10 months ago #

   Thank you for this important plug-in. I'm using it for a prototype learning community, and it will be critical to our success.

   http://learnmaine.net/

   One question. The WAVE validator indicates the label tags are malformed.

   http://wave.webaim.org/report?url=http%3A%2F%2Flearnmaine.net%2F&js=2

   The current structure is this:

   <label>Learning levels:</label>
   <select name="learning-levels">

   I believe it should be thus:

   <label for="learning-levels">Learning levels:</label>
   <select name="learning-levels" id="learning-levels">

   Will you consider making this change in an upcoming update?

   In any case, thank you again!

2. Jay Collier
   Member
   Posted 10 months ago #

   Found the issue.

   In order to validate at <http://wave.webaim.org/>, the following change needs to be made in dropdowns.html

   Change ...

   <label>{{title}}:</label>
   <select name="{{name}}">

   ... to ...

   <label for="{{name}}">{{title}}:</label>
   <select name="{{name}}" id="{{name}}">

   This changes the widget dropdown code from ...

   <label>Learning levels:</label>
   <select name="learning-levels">

   ... to ...

   <label for="learning-levels">Learning levels:</label>
   <select name="learning-levels" id="learning-levels">

   I tested and it validates fine.

   In all other ways, a 5* plugin.

3. scribu
   Member
   Posted 10 months ago #

   Thanks for bringing this up, but I'm concerned about setting id attributes, since they might collide with other elements on the page.

   Could you test if putting the select element inside the label validates?

   <label>{{title}}:
     <select name="{{name}}">
     ...
     </select>
   </label>

4. Jay Collier
   Member
   Posted 10 months ago #

   Yes, I understand, and agree. However, I believe the HTML/XHTML standard requires the ID:

   http://www.w3schools.com/tags/tag_label.asp

   If I were to add an obscure prefix to for/id, is that better?

   <label for="qmtlabel-{{name}}">{{title}}:</label>
   <select name="{{name}}" id="qmtlabel-{{name}}">

   Still validates. Less likely to collide?

5. esmi
   Theme Diva & Forum Moderator
   Posted 10 months ago #

   The for attribute is essential for screen reader users. Without it, forms are impossible to use. I've found that something along the lines of <?php echo $name;?>_<?php esc_attr_e( $option['value'] ); ?>"> for both the label's for attribute and the associated input tends to work well across the board. And if the whole form has it's own unique id, any rare CSS collisions can be easily dealt with.

6. scribu
   Member
   Posted 10 months ago #

   Yeah, adding a prefix would fix this.

   However, putting the select into the label seems to also be valid.

   Ran this markup through http://wave.webaim.org/

7. scribu
   Member
   Posted 10 months ago #

   And the W3C agrees:

   To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

   http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

   So I'm going to go with that:

   https://github.com/scribu/wp-query-multiple-taxonomies/commit/f3c5f0acb90c37fe18ec0d86a9b9b7173340a6d7

   That change will be present in the development version (1.6-alpha) shortly.

8. Jay Collier
   Member
   Posted 10 months ago #

   Thanks for following-up on this!

Reply

You must log in to post.