WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#21897 closed defect (bug) (fixed)

Required mark in comment form is outside label element

Reported by: peterkz Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.0
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:

Description

In the rendering of a label in the comment form the star (*) that marks a field as required is outside the label element. For users with assistive tech this information may be missed when entering data into the form.

The asterisk (*) indicating a required field should be inside the label element for the corresponding field. See WCAG 2.0 H90: http://www.w3.org/TR/WCAG20-TECHS/H90

Attachments (6)

21897.diff (1.5 KB) - added by nacin 2 years ago.
no-req.png (12.3 KB) - added by MikeHansenMe 2 years ago.
21897.2.diff (1.8 KB) - added by MikeHansenMe 2 years ago.
updated styles for TwentyEleven. TwentyTwelve and TwentyTen look good as is.
21897.3.diff (2.4 KB) - added by MikeHansenMe 2 years ago.
removed rule from TwentyTwelve
21897.4.diff (2.3 KB) - added by MikeHansenMe 2 years ago.
21897.5.diff (2.5 KB) - added by MikeHansenMe 2 years ago.
couple additional lines of css to move the asterisk (*) to the left of the label while being inside the label for screen readers

Download all attachments as: .zip

Change History (20)

@nacin2 years ago

comment:1 @nacin2 years ago

  • Milestone changed from Awaiting Review to 3.5
  • Version changed from 3.4.2 to 3.0

This causes styling issues with both Twenty Ten and Twenty Eleven, so those will need to be adjusted.

comment:2 @nacin2 years ago

Twenty Twelve appears to be broken out of the box, with the asterisks not visible (without the patch).

@MikeHansenMe2 years ago

comment:3 @MikeHansenMe2 years ago

In Twenty Twelve, I do not see any asterisks. I can see they are there in the code but not visible to users. See screen shot.

comment:4 @lancewillett2 years ago

  • Keywords has-patch added; needs-patch removed

I can help with style fixes for all three themes — Twenty Twelve *was* working correctly until probably recently, if this patch goes into core it'll take care of it with an accompanying style tweak.

@MikeHansenMe2 years ago

updated styles for TwentyEleven. TwentyTwelve and TwentyTen look good as is.

comment:5 @lancewillett2 years ago

In r21918 Twenty Twelve is working again. Once the span element is inside the label, the following CSS lines should be removed from the theme:

label ~ span.required {
	display: block;
	float: left;
	margin: -18px 0 0 -16px;
	margin: -1.285714286rem 0 0 -1.142857143rem;
}

@MikeHansenMe2 years ago

removed rule from TwentyTwelve

comment:6 @MikeHansenMe2 years ago

  • Cc mdhansen@… added

comment:7 @lancewillett2 years ago

@MikeHansenMe The pedant Lance notes that defaul theme names have a space in between the "Twenty" and the next word. Twenty Twelve. :)

Thanks for the patches, I think in 21897.3.diff just before "=Front page template" comment block you removed one too many newlines.

Version 0, edited 2 years ago by lancewillett (next)

comment:8 @MikeHansenMe2 years ago

@lancewillet thanks for the clarification. Here is another patch without the newline removed.

@MikeHansenMe2 years ago

comment:9 follow-ups: @MikeHansenMe2 years ago

  • Component changed from Accessibility to Bundled Theme

Going to move this to bundled theme to see if it can get some attention there.

@MikeHansenMe2 years ago

couple additional lines of css to move the asterisk (*) to the left of the label while being inside the label for screen readers

comment:10 in reply to: ↑ 9 @lancewillett2 years ago

Replying to MikeHansenMe:

Going to move this to bundled theme to see if it can get some attention there.

Probably "Comments" or "Accessibility" is the better component. Not "Bundled Theme" since this is not a theme change.

comment:11 @nacin2 years ago

Note that 21897.5.diff does indeed patch some of the default themes to make sure they don't break, style-wise.

comment:12 in reply to: ↑ 9 @lancewillett2 years ago

  • Keywords commit added

Replying to MikeHansenMe:

couple additional lines of css to move the asterisk (*) to the left of the label while being inside the label for screen readers

MikeHansenMe, I think having it inline (after the label) is fine, doesn't need to be aligned to the left. Note that your .5 patch broke the "Required fields are marked *" text because it styled that asterisk, too.

Let's go with 21897.4.diff change, looks good in both Twenty Twelve and Twenty Eleven.

comment:13 @MikeHansenMe2 years ago

Works for me. Thanks for reviewing it.

comment:14 @ryan2 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.