aria-label and g:datePicker

[Jeff Scott Brown]

See https://jira.grails.org/browse/GRAILS-11655.

What is the most reasonable default behavior and what should be configurable?

Thanks for any feedback.



JSB

--
Jeff Scott Brown
jbr...@pivotal.io

Find The Cause ~ Find The Cure
http://www.autismspeaks.org/

[Peter Ledbrook]

> See https://jira.grails.org/browse/GRAILS-11655.
>
> What is the most reasonable default behavior and what should be configurable?

After a quick look at Mozilla Developer Network docs:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

I think each select should at least have an

aria-labelledby="<label ID>"

attribute. Assuming that <g:datePicker> actually creates a <label>
element, that is. If not, then it's the responsibility of the user to
explicitly add aria-label or aria-labelledby attributes. In that case,
the scaffolding should probably add aria-labelledby itself.

The downside to this is that you don't get a different label for each
drop down. I think the most complete solution is to merge
user-provided aria-labelledby attributes with individual values for
each drop down. The resulting HTML would look something like this:

<label id="dob-label" for="...">Date of Birth</label>
<input id="dob-day-label" type="hidden" value="day"/>
<select ... aria-labelledby="dob-day-label dob-label">...</select>
<input id="dob-month-label" type="hidden" value="day"/>
<select ... aria-labelledby="dob-month-label dob-label">...</select>
<input id="dob-year-label" type="hidden" value="day"/>
<select ... aria-labelledby="dob-year-label dob-label">...</select>

The approach adds some extra elements and IDs, which isn't ideal, but
it should result in a sensible label for each drop down.

Suggested approach should be validated by someone with ARIA and
assistive technology experience though!

Peter

--
Peter Ledbrook
t: @pledbrook
w: http://www.cacoethes.co.uk/

[Peter Ledbrook]

> <label id="dob-label" for="...">Date of Birth</label>
> <input id="dob-day-label" type="hidden" value="day"/>
> <select ... aria-labelledby="dob-day-label dob-label">...</select>
> <input id="dob-month-label" type="hidden" value="day"/>
> <select ... aria-labelledby="dob-month-label dob-label">...</select>
> <input id="dob-year-label" type="hidden" value="day"/>
> <select ... aria-labelledby="dob-year-label dob-label">...</select>

The idea with this example is to end up with labels that read:

Date of Birth day
Date of Birth month
Date of Birth year