Accessibility Improvement to category-template.php

[wpsmith]

When I was testing my site (​http://travisthoughts.com, running WordPress 3.1 RC4) for accessibility at ​http://wave.webaim.org/, I noticed that the categories widget was not displaying a <label> tag. So upon investigation, I discovered that category-template.php wasn't issuing a <label> tag on line 334 in the function wp_dropdown_categories(). So I propose the following edit.

$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>

Once I made this change, my site passed web accessibility.

[nacin]

We would use something like screen-reader-text, probably.

[SergeyBiryukov]

Related: #18650

[karlgroves]

The use of display:none style declaration would effectively hide that label from everyone, including users of assistive technologies. Such a declaration should only be used in cases where you absolutely want to hide something from every single visitor.

To provide "hidden" content for users of assistive technologies, position the content offscreen.

[dd32]

To provide "hidden" content for users of assistive technologies, position the content offscreen.

For the record, that's what Nacin was referring to above. The class 'screen-reader-text' positions the element off screen so that it's still readable by screen readers.

/* Hide visually but not from screen readers */
.screen-reader-text,
.screen-reader-text span {
	position: absolute;
	left: -1000em;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

[SergeyBiryukov]

Duplicate of #18650.