Make WordPress Core

Opened 3 years ago

Closed 14 months ago

#16527 closed enhancement (duplicate)

Accessibility Improvement to category-template.php

Reported by: wpsmith Owned by: wpsmith
Milestone: Priority: normal
Severity: normal Version: 3.0
Component: Accessibility Keywords:
Focuses: Cc:


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.

Attachments (1)

16527.patch (587 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 wpsmith3 years ago

  • Keywords has-patch added

SergeyBiryukov3 years ago

comment:2 nacin3 years ago

  • Type changed from defect (bug) to enhancement
  • Version changed from 3.1 to 3.0

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

comment:3 Elpie3 years ago

  • Cc Elpie added

comment:4 dd323 years ago

  • Component changed from General to Template

comment:6 karlgroves2 years ago

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.

comment:7 dd322 years ago

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 span {
	position: absolute;
	left: -1000em;
	height: 1px;
	width: 1px;
	overflow: hidden;

comment:8 SergeyBiryukov16 months ago

  • Component changed from Template to Accessibility
  • Keywords has-patch removed

comment:9 SergeyBiryukov14 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #18650.

Note: See TracTickets for help on using tickets.