Required mark in comment form is outside label element

[peterkz]

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

[nacin]

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

[nacin]

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

[MikeHansenMe]

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.

[lancewillett]

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.

[MikeHansenMe]

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

[lancewillett]

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;
}

[MikeHansenMe]

removed rule from TwentyTwelve

[lancewillett]

@MikeHansenMe The pedant Lance notes that default 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.

[MikeHansenMe]

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

[MikeHansenMe]

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

[MikeHansenMe]

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

[lancewillett]

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.

[nacin]

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

[lancewillett]

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.

[MikeHansenMe]

Works for me. Thanks for reviewing it.

[ryan]

[22123]