WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 7 years 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:
PR Number:

Description

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 9 years ago.

Download all attachments as: .zip

Change History (10)

#1 @wpsmith
9 years ago

  • Keywords has-patch added

#2 @nacin
9 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.

#3 @Elpie
8 years ago

  • Cc Elpie added

#4 @dd32
8 years ago

  • Component changed from General to Template

#6 @karlgroves
8 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.

#7 @dd32
8 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,
.screen-reader-text span {
	position: absolute;
	left: -1000em;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

#8 @SergeyBiryukov
7 years ago

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

#9 @SergeyBiryukov
7 years 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.