Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
Today’s dai11y is a Steve Faulkner special, as I’ve had two of his blog posts bookmarked for some time!
- re-upped: placeholder – the piss-take label
- Steve confirms that use of the
placeholder
attribute alone, in absence of alabel
, fails Success Criterion 3.3.2: Labels or Instructions. The problems withplaceholder
are summarised nicely in one paragraph:
- “While the hint given by the controls label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.”
- This bonus article from HTMHell adds that translation tools such as Google Translate may not translate attribute values, placeholder text gets cut off beyond the size of the field, and “if browsers auto-fill fields, users have to cut-and-paste auto-filled values to check if browsers filled in fields correctly”.
- Steve confirms that use of the
- aria-description: By Public Demand and to Thunderous Applause
- The new
aria-description
attribute coming to WAI-ARIA 1.3 is similar toaria-label
(takes a string of text associated with an element), but is intended for more verbose information. Steve sees it as replacingaria-describedby
in those cases where the linked element is visually hidden, i.e.<a href="#" aria-describedby="help">Help</a><div id="help" class="visually-hidden">This description is for screen reader users only</div>
. - It’s supported in Chrome, Firefox and Edge already.
- Steve closes with some advice: for
aria-label
, a word or phrase is better than a sentence, and foraria-describedby
oraria-description
, a sentence is better than a paragraph.
- The new
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.