Open 1Copenut opened 6 years ago
Thanks, this is great information!
To make it a bit more general, the problem is that we have a DateWidget with a <legend>
describing the specific purpose of the data, then some rather generic <label>
s that describe the individual components of the date (Month, Day, Year) but not its purpose.
If we go with the legend as the aria-describedby
is it still clear enough which date component is which? Or would it be important to have it read the two concatenated together, "Service start date Year" for example?
By referencing the <legend>
with the aria-describedby
, the individual labels will be read out when the input receives focus, and then the legend text will be read out after a short pause. I have documented some research about current screen reader behavior v. the code change I proposed. I'll add a link to that research next week, so it can be easily referenced.
@1Copenut Echoing Dave's comments -- this is a great report and suggestion. Looking forward to more discussion. Thanks again!
Issue
The Service Start and End Date month combo boxes do not read the "Service Start || End Date" labels out to screenreaders. Non-sighted users hear Month Combo Box, but do not know other than a month, day, or year what they should be entering. Screenshot attached below.
Acceptance Criteria
As a screenreader user, I want to hear Month, Day, Year, and the Service Start || End Date information read aloud.
Environment
Possible Fix
After doing some more research with various screenreader and browser combos, I determined adding an
aria-describedby
attribute to the<select>
and<input>
felt like the best approach.This approach does cause the
<legend>
to be read twice in IE11 + JAWS if users don't navigate into the first input usingTAB
orDOWN_ARROW
, but that verbosity is offset by increased context.