WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form elements

for

From: Mallory
Date: Mar 21, 2019 7:19AM

Some fill-in-the-blanks I played with years ago. As mentioned earlier, the wrapping of labels wasn't nice.
The rest aria-describedby which has the issues described earlier (they're not names).:
https://stommepoes.nl/work/k-12/fill_in_the_blank.html

Probably what I should test is the order of this:
<label id="go2">Last year I <strong>(go)</strong></label>
<input type="text" id="go3" aria-labelledby="go2 go3 rest5">
<span id="rest5">to England on holiday.</span>

The live regions have issues as well: they're competing with the text of the newly focussed bit. The requirement was to show the finished sentence separate from just the filled-in question and some ideas were to not make that a live region but move focus to it (but then you're focussing on a non-interactive element), or giving each sentence it's own dedicated "submit" button and then keeping the live region (and remove the blur listener).

Looks like something to do on the weekend.

cheers,
_mallory


On Thu, Mar 21, 2019, at 1:20 PM, Birkir R. Gunnarsson wrote:
> These are a bit tricky, especially #1.
> You could do something like
> <p>
> <span>The </span>
> <input aria-label="answer" aria-describedby="sp2">
> <span id="sp2">has black and whit stripes.</span>
> For #2 I'd just put the question text in a <label> element and
> associate it with the input.
>
> There is an earlier discussion on a very similar topic that may be of
> interest: https://webaim.org/discussion/mail_thread?thread†93
>
> Thanks
> -Birkir
>
> On 3/21/19, Fischer, Johannes < <EMAIL REMOVED> > wrote:
> > Hi,
> >
> > I would also say that aria-describedby is not a label as the term "label" is
> > not inside the attribute name like in aria-label or aria-labelledby. Instead
> > it gives a description additionally to a label. Success criterion 3.3.2
> > would fail. But I think, criterion 4.1.2 would not fail as aria-describedby
> > is considered in the accessible name computation (no. 2, no. 2, second
> > bullet for example): https://www.w3.org/TR/accname/#terminology
> >
> >
> > Khoa, for your scenario 1 my thoughts for a solution would be:
> >
> > A.
> > <label>
> > The <input type="text value="___" /> has black and white stripes.
> > </label>
> >
> > B.
> > <span id="text1">The</span> <input id="gap" type="text value="___"
> > aria-labelledby="text1 gap text2" /> <span id="text2">has black and white
> > stripes.</span>
> >
> > Johannes
> >
> > -----Ursprüngliche Nachricht-----
> > Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag
> > von Mohith BP
> > Gesendet: Donnerstag, 21. März 2019 05:39
> > An: WebAIM Discussion List
> > Betreff: Re: [WebAIM] Form elements
> >
> > Hi,
> >
> > No, aria-describedby cannot be the substitute for the accessible label
> > as mentioned by Birkir. However, using title attribute will not give
> > same experience across the assistive technologies on all platform. It
> > is recommended that the title alone cannot be considered as accessible
> > label.
> >
> > Thanks & Regards,
> > Mohith B. P.
> >
> > On 3/21/19, Khoa Pham < <EMAIL REMOVED> > wrote:
> >> In scenarios where an input text field is embedded in the question
> >> sentence,
> >> such as fill in the blank, or is at the end of a question. What would be
> >> recommended as a label for the first embedded scenario and the scenario
> >> where an answer required after a question, examples below.
> >>
> >> Scenario 1:
> >> The ___ has black and white stripes.
> >>
> >> Scenario 2:
> >> What color is a turtle? ____
> >>
> >> How would you recommend these be label and which html or aria element
> >> would
> >> be best for them?
> >>
> >>