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.
Plugin Author
scribu
(@scribu)
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>
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?
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.
Plugin Author
scribu
(@scribu)
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/
Plugin Author
scribu
(@scribu)
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.
Thanks for following-up on this!
