739590 - Make contributor tshirt ordering page properly accessible by adding labels to the text inputs

Status: NEW

(Websites :: donate.mozilla.org, defect)

Description

[Marco Zehe (:MarcoZ)]

The page for ordering a t-shirt as a contributor does not contain any labels for the text input fields. These labels are provided via the value attribute, which is inappropriate according to the web content accessibility guidelines (WCAG) 2.0 by the W3C. Instead, proper label tags with the @for attribute pointing at the ID for the associated text input must be used to label these. The used value attribute is not supported as a labeling mechanism for assistive technologies.

Comment 1

[Isac Lagerblad (:icaaq)]

Also if javascript is disabled, the color on the label-element is way to dark. foreground: #484848
background: #74736F

Result from http://snook.ca/technical/colour_contrast/colour.html

Brightness Difference (>= 125): 42.843
Colour Difference (>= 500): 126
Are colours compliant: NO
Contrast Ratio: 1.93
WCAG 2 AA Compliant: NO 
WCAG 2 AA Compliant (18pt+): NO
WCAG 2 AAA Compliant: NO
WCAG 2 AAA Compliant (18pt+): NO

Comment 2

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1527381