WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Labelling a "fill in the blank" form field

for

Number of posts in this thread: 20 (In chronological order)

From: Isabel Holdsworth
Date: Wed, Apr 25 2018 7:34AM
Subject: Labelling a "fill in the blank" form field
No previous message | Next message →

Hi guys, I'd really appreciate your thoughts on yet another WCAG
issue, but from more of a functional angle this time.

If an HTML form has a "fill in the blank" type question, how should it
be labelled?

An example might be:

John had 90p and spent 55p on an apple. He now has ____p left.

Ideally we'd rewrite the question so that all of the text comes before
the input field, but we're not able to do that.

What's the best way of labelling this textbox up so that both parts of
the surrounding question are spoken in a way that makes sense?

Would something like this work?

<span id="part1">John had 90p and spent 55p on an apple. He now has</span>
<span id="placeholder" class="screenreader">[fill in the blank]</span>
<input type="text" aria-label="part1 placeholder part2" ... />
<span id="part2">p left.</span>

Thanks as always.

From: Isabel Holdsworth
Date: Wed, Apr 25 2018 8:03AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Oops, I meant to type "aria-labeledby", not "aria-label".

On 25/04/2018, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> Hi guys, I'd really appreciate your thoughts on yet another WCAG
> issue, but from more of a functional angle this time.
>
> If an HTML form has a "fill in the blank" type question, how should it
> be labelled?
>
> An example might be:
>
> John had 90p and spent 55p on an apple. He now has ____p left.
>
> Ideally we'd rewrite the question so that all of the text comes before
> the input field, but we're not able to do that.
>
> What's the best way of labelling this textbox up so that both parts of
> the surrounding question are spoken in a way that makes sense?
>
> Would something like this work?
>
> <span id="part1">John had 90p and spent 55p on an apple. He now has</span>
> <span id="placeholder" class="screenreader">[fill in the blank]</span>
> <input type="text" aria-label="part1 placeholder part2" ... />
> <span id="part2">p left.</span>
>
> Thanks as always.
>

From: Tim Harshbarger
Date: Wed, Apr 25 2018 8:26AM
Subject: Re: [EXTERNAL]Labelling a "fill in the blank" form field
← Previous message | Next message →

The easiest solution might be to provide instructions before the fill-in-the-blank questions to ensure the users are in the right frame of mind for interpreting the labels. Then you might be able to use a label such as "fill-in-the-blank" or "fill-in-the-blank for question 2". You could also try wrapping the whole question (along with the textbox) inside a label element.

When trying to figure out if a label or alt text description is adequate, it is a good rule of thumb to look at the context of the content. How someone interprets a label depends heavily on what frame of mind they are in and that is heavily influenced by the context of the content.

If the user knows that the textfields are all part of a sentence or paragraph because the questions are fill-in-the-blank your label doesn't necessarily need to convey as much.

If the user doesn't know what kind of questions will be asked, you probably need a label that provides a lot more detail.

Thanks,
Tim



From: glen walker
Date: Wed, Apr 25 2018 8:38AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Even if visually you can't rewrite the question, you could still rewrite it
for the label, couldn't you? You can aria-hide the text that's on the
screen and have the rewritten question visually hidden and used as the
label. That's a bit simpler than trying to piece together the label.
Something like:

<span aria-hidden="true">John had 90p and spent 55p on an apple. He now
has</span>
<input type="text" aria-labelledby="placeholder" ... />
<span aria-hidden="true">p left.</span>

<span id="placeholder" class="screenreader">John had 90p and spent 55p
on an apple. How many pence does he have left?</span>




On Wed, Apr 25, 2018 at 8:03 AM, Isabel Holdsworth <
= EMAIL ADDRESS REMOVED = > wrote:

> Oops, I meant to type "aria-labeledby", not "aria-label".
>
> On 25/04/2018, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi guys, I'd really appreciate your thoughts on yet another WCAG
> > issue, but from more of a functional angle this time.
> >
> > If an HTML form has a "fill in the blank" type question, how should it
> > be labelled?
> >
> > An example might be:
> >
> > John had 90p and spent 55p on an apple. He now has ____p left.
> >
> > Ideally we'd rewrite the question so that all of the text comes before
> > the input field, but we're not able to do that.
> >
> > What's the best way of labelling this textbox up so that both parts of
> > the surrounding question are spoken in a way that makes sense?
> >
> > Would something like this work?
> >
> > <span id="part1">John had 90p and spent 55p on an apple. He now
> has</span>
> > <span id="placeholder" class="screenreader">[fill in the blank]</span>
> > <input type="text" aria-label="part1 placeholder part2" ... />
> > <span id="part2">p left.</span>
> >
> > Thanks as always.
> >
> > > > >

From: Birkir R. Gunnarsson
Date: Wed, Apr 25 2018 2:19PM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Tim makes good suggestions.
I'd try wrapping the whole question in a <label> element, then add
aria-label="answer" to the <input> field.
See how that is interpreted by a screen reader.

The problem of using aria-labelledby or rewriting the question for
screen reader users is that you introduce a lot of complexity and
chance for misunderstanding or bad phrasing.
If the screen reader user sees the same question re-interpreted by
someone, there is the chance that the person didn't interpret it
correctly, made it confusing or even wrong.
aria-labelledby also requires that each part of each question has a
unique id attribute, something that your average server-side
development team is going to be less-than-happy about.



On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Even if visually you can't rewrite the question, you could still rewrite it
> for the label, couldn't you? You can aria-hide the text that's on the
> screen and have the rewritten question visually hidden and used as the
> label. That's a bit simpler than trying to piece together the label.
> Something like:
>
> <span aria-hidden="true">John had 90p and spent 55p on an apple. He now
> has</span>
> <input type="text" aria-labelledby="placeholder" ... />
> <span aria-hidden="true">p left.</span>
>
> <span id="placeholder" class="screenreader">John had 90p and spent 55p
> on an apple. How many pence does he have left?</span>
>
>
>
>
> On Wed, Apr 25, 2018 at 8:03 AM, Isabel Holdsworth <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Oops, I meant to type "aria-labeledby", not "aria-label".
>>
>> On 25/04/2018, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
>> > Hi guys, I'd really appreciate your thoughts on yet another WCAG
>> > issue, but from more of a functional angle this time.
>> >
>> > If an HTML form has a "fill in the blank" type question, how should it
>> > be labelled?
>> >
>> > An example might be:
>> >
>> > John had 90p and spent 55p on an apple. He now has ____p left.
>> >
>> > Ideally we'd rewrite the question so that all of the text comes before
>> > the input field, but we're not able to do that.
>> >
>> > What's the best way of labelling this textbox up so that both parts of
>> > the surrounding question are spoken in a way that makes sense?
>> >
>> > Would something like this work?
>> >
>> > <span id="part1">John had 90p and spent 55p on an apple. He now
>> has</span>
>> > <span id="placeholder" class="screenreader">[fill in the blank]</span>
>> > <input type="text" aria-label="part1 placeholder part2" ... />
>> > <span id="part2">p left.</span>
>> >
>> > Thanks as always.
>> >
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, Apr 25 2018 4:50PM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Birkir, wouldn't that be conflicting information? You'd have a <label> for
the <input> field *and* have an aria-label for the <input> field? Which
one should win?


On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Tim makes good suggestions.
> I'd try wrapping the whole question in a <label> element, then add
> aria-label="answer" to the <input> field.
> See how that is interpreted by a screen reader.
>
> The problem of using aria-labelledby or rewriting the question for
> screen reader users is that you introduce a lot of complexity and
> chance for misunderstanding or bad phrasing.
> If the screen reader user sees the same question re-interpreted by
> someone, there is the chance that the person didn't interpret it
> correctly, made it confusing or even wrong.
> aria-labelledby also requires that each part of each question has a
> unique id attribute, something that your average server-side
> development team is going to be less-than-happy about.
>
>
>
> On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> > Even if visually you can't rewrite the question, you could still rewrite
> it
> > for the label, couldn't you? You can aria-hide the text that's on the
> > screen and have the rewritten question visually hidden and used as the
> > label. That's a bit simpler than trying to piece together the label.
> > Something like:
> >
> > <span aria-hidden="true">John had 90p and spent 55p on an apple. He now
> > has</span>
> > <input type="text" aria-labelledby="placeholder" ... />
> > <span aria-hidden="true">p left.</span>
> >
> > <span id="placeholder" class="screenreader">John had 90p and spent 55p
> > on an apple. How many pence does he have left?</span>
> >
> >
> >
> >
> > On Wed, Apr 25, 2018 at 8:03 AM, Isabel Holdsworth <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Oops, I meant to type "aria-labeledby", not "aria-label".
> >>
> >> On 25/04/2018, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> >> > Hi guys, I'd really appreciate your thoughts on yet another WCAG
> >> > issue, but from more of a functional angle this time.
> >> >
> >> > If an HTML form has a "fill in the blank" type question, how should it
> >> > be labelled?
> >> >
> >> > An example might be:
> >> >
> >> > John had 90p and spent 55p on an apple. He now has ____p left.
> >> >
> >> > Ideally we'd rewrite the question so that all of the text comes before
> >> > the input field, but we're not able to do that.
> >> >
> >> > What's the best way of labelling this textbox up so that both parts of
> >> > the surrounding question are spoken in a way that makes sense?
> >> >
> >> > Would something like this work?
> >> >
> >> > <span id="part1">John had 90p and spent 55p on an apple. He now
> >> has</span>
> >> > <span id="placeholder" class="screenreader">[fill in the blank]</span>
> >> > <input type="text" aria-label="part1 placeholder part2" ... />
> >> > <span id="part2">p left.</span>
> >> >
> >> > Thanks as always.
> >> >
> >> > >> > >> > >> > >>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: glen walker
Date: Wed, Apr 25 2018 4:58PM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

I could have taken an extra 2 min to test it before posting my question.
The accessible name generation is pretty clear on the precedence.

https://www.w3.org/TR/accname-1.1/#step2

2c is before 2d.
2c gets the accessible name from the aria-label attribute
2d gets the accessible name from the label element

So the aria-label should win (and it does when I try NVDA on firefox and
JAWS on Internet Explorer)

So, Birkir, did I read your suggestion incorrectly? Did you say to use
both a <label> element and the aria-label attribute?

Glen

On Wed, Apr 25, 2018 at 4:50 PM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Birkir, wouldn't that be conflicting information? You'd have a <label>
> for the <input> field *and* have an aria-label for the <input> field?
> Which one should win?
>
>
> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Tim makes good suggestions.
>> I'd try wrapping the whole question in a <label> element, then add
>> aria-label="answer" to the <input> field.
>> See how that is interpreted by a screen reader.
>>
>>

From: Birkir R. Gunnarsson
Date: Wed, Apr 25 2018 7:36PM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Yes, I suggested that.
The <label> elemet to provide the larger click target for people with
mobility impairments.
The aria-label atribute to assign an accessible name to he input field
for the benefits of screen reader users.

You could force a screen reader to read all 3 by combining aria-label
and aria-labelledby

<label>
<span id="q1a">If you have $1400, and get an unexpected dentis bill of </span>
<input aria-label="enter amount" id="sr1" aria-labelledby="q1a sr1 q1b">
<span id="q1b"> then you have exactly 20 dollars left</span>
</label>


On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I could have taken an extra 2 min to test it before posting my question.
> The accessible name generation is pretty clear on the precedence.
>
> https://www.w3.org/TR/accname-1.1/#step2
>
> 2c is before 2d.
> 2c gets the accessible name from the aria-label attribute
> 2d gets the accessible name from the label element
>
> So the aria-label should win (and it does when I try NVDA on firefox and
> JAWS on Internet Explorer)
>
> So, Birkir, did I read your suggestion incorrectly? Did you say to use
> both a <label> element and the aria-label attribute?
>
> Glen
>
> On Wed, Apr 25, 2018 at 4:50 PM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Birkir, wouldn't that be conflicting information? You'd have a <label>
>> for the <input> field *and* have an aria-label for the <input> field?
>> Which one should win?
>>
>>
>> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> Tim makes good suggestions.
>>> I'd try wrapping the whole question in a <label> element, then add
>>> aria-label="answer" to the <input> field.
>>> See how that is interpreted by a screen reader.
>>>
>>>
> > > > >


--
Work hard. Have fun. Make history.

From: Isabel Holdsworth
Date: Fri, Apr 27 2018 2:30AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Thanks guys - I might need to stick with my original suggestion on
this one. The question authoring is out of our control - all we can do
is provide accessible interfaces and wrappers. I'd like to use more
context-sensitive labels such as "how many", "how much", "how heavy",
etc., but we don't have that luxury. So "fill in the blank" is
probably the closest we can get. Using aria-labeledby seems to provide
the most comprehensive and sensible label, so I think this is the way
to go.

I find these discussions really helpful. Cheers.

On 26/04/2018, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Yes, I suggested that.
> The <label> elemet to provide the larger click target for people with
> mobility impairments.
> The aria-label atribute to assign an accessible name to he input field
> for the benefits of screen reader users.
>
> You could force a screen reader to read all 3 by combining aria-label
> and aria-labelledby
>
> <label>
> <span id="q1a">If you have $1400, and get an unexpected dentis bill of
> </span>
> <input aria-label="enter amount" id="sr1" aria-labelledby="q1a sr1 q1b">
> <span id="q1b"> then you have exactly 20 dollars left</span>
> </label>
>
>
> On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>> I could have taken an extra 2 min to test it before posting my question.
>> The accessible name generation is pretty clear on the precedence.
>>
>> https://www.w3.org/TR/accname-1.1/#step2
>>
>> 2c is before 2d.
>> 2c gets the accessible name from the aria-label attribute
>> 2d gets the accessible name from the label element
>>
>> So the aria-label should win (and it does when I try NVDA on firefox and
>> JAWS on Internet Explorer)
>>
>> So, Birkir, did I read your suggestion incorrectly? Did you say to use
>> both a <label> element and the aria-label attribute?
>>
>> Glen
>>
>> On Wed, Apr 25, 2018 at 4:50 PM, glen walker < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Birkir, wouldn't that be conflicting information? You'd have a <label>
>>> for the <input> field *and* have an aria-label for the <input> field?
>>> Which one should win?
>>>
>>>
>>> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
>>> = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>>> Tim makes good suggestions.
>>>> I'd try wrapping the whole question in a <label> element, then add
>>>> aria-label="answer" to the <input> field.
>>>> See how that is interpreted by a screen reader.
>>>>
>>>>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: Mallory
Date: Fri, Apr 27 2018 4:12AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

We used this at my previous employer:
http://www.stommepoes.nl/work/k-12/fill_in_the_blank.html
(test 2 was used: if a user is browsing, they hear the sentence in order, but if they are tabbing, same thing, they hear the sentence in order. The test 3 was, for fib that is putting together a sentence, hearing the completed one may or may not be useful. The test has the problem of using blur() which, if the student is tabbing, gets mucked up with the next sentence reading out as well. So test2 is the suggestion from me.)

cheers,
_mallory

On Fri, Apr 27, 2018, at 10:30 AM, Isabel Holdsworth wrote:
> Thanks guys - I might need to stick with my original suggestion on
> this one. The question authoring is out of our control - all we can do
> is provide accessible interfaces and wrappers. I'd like to use more
> context-sensitive labels such as "how many", "how much", "how heavy",
> etc., but we don't have that luxury. So "fill in the blank" is
> probably the closest we can get. Using aria-labeledby seems to provide
> the most comprehensive and sensible label, so I think this is the way
> to go.
>
> I find these discussions really helpful. Cheers.
>
> On 26/04/2018, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> > Yes, I suggested that.
> > The <label> elemet to provide the larger click target for people with
> > mobility impairments.
> > The aria-label atribute to assign an accessible name to he input field
> > for the benefits of screen reader users.
> >
> > You could force a screen reader to read all 3 by combining aria-label
> > and aria-labelledby
> >
> > <label>
> > <span id="q1a">If you have $1400, and get an unexpected dentis bill of
> > </span>
> > <input aria-label="enter amount" id="sr1" aria-labelledby="q1a sr1 q1b">
> > <span id="q1b"> then you have exactly 20 dollars left</span>
> > </label>
> >
> >
> > On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> >> I could have taken an extra 2 min to test it before posting my question.
> >> The accessible name generation is pretty clear on the precedence.
> >>
> >> https://www.w3.org/TR/accname-1.1/#step2
> >>
> >> 2c is before 2d.
> >> 2c gets the accessible name from the aria-label attribute
> >> 2d gets the accessible name from the label element
> >>
> >> So the aria-label should win (and it does when I try NVDA on firefox and
> >> JAWS on Internet Explorer)
> >>
> >> So, Birkir, did I read your suggestion incorrectly? Did you say to use
> >> both a <label> element and the aria-label attribute?
> >>
> >> Glen
> >>
> >> On Wed, Apr 25, 2018 at 4:50 PM, glen walker < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >>> Birkir, wouldn't that be conflicting information? You'd have a <label>
> >>> for the <input> field *and* have an aria-label for the <input> field?
> >>> Which one should win?
> >>>
> >>>
> >>> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
> >>> = EMAIL ADDRESS REMOVED = > wrote:
> >>>
> >>>> Tim makes good suggestions.
> >>>> I'd try wrapping the whole question in a <label> element, then add
> >>>> aria-label="answer" to the <input> field.
> >>>> See how that is interpreted by a screen reader.
> >>>>
> >>>>
> >> > >> > >> > >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > > >
> > > >

From: Mallory
Date: Fri, Apr 27 2018 4:15AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Birkir: "Tim makes good suggestions.
I'd try wrapping the whole question in a <label> element, then add
aria-label="answer" to the <input> field.
See how that is interpreted by a screen reader."

We had two issues with the label-wrapping (though we didn't try with aria-label):
Dragon users had to say "press tab" since the label couldn't be used to move focus.
ZoomText users get "Unlabelled control" with labels wrapping (but again maybe with the added aria-label that would be fixed, I'm not sure).

Implicit labels ended up just being something we avoided even though it's all technically legal.

cheers,
_mallory

On Fri, Apr 27, 2018, at 12:12 PM, Mallory wrote:
> We used this at my previous employer:
> http://www.stommepoes.nl/work/k-12/fill_in_the_blank.html
> (test 2 was used: if a user is browsing, they hear the sentence in
> order, but if they are tabbing, same thing, they hear the sentence in
> order. The test 3 was, for fib that is putting together a sentence,
> hearing the completed one may or may not be useful. The test has the
> problem of using blur() which, if the student is tabbing, gets mucked up
> with the next sentence reading out as well. So test2 is the suggestion
> from me.)
>
> cheers,
> _mallory
>
> On Fri, Apr 27, 2018, at 10:30 AM, Isabel Holdsworth wrote:
> > Thanks guys - I might need to stick with my original suggestion on
> > this one. The question authoring is out of our control - all we can do
> > is provide accessible interfaces and wrappers. I'd like to use more
> > context-sensitive labels such as "how many", "how much", "how heavy",
> > etc., but we don't have that luxury. So "fill in the blank" is
> > probably the closest we can get. Using aria-labeledby seems to provide
> > the most comprehensive and sensible label, so I think this is the way
> > to go.
> >
> > I find these discussions really helpful. Cheers.
> >
> > On 26/04/2018, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> > > Yes, I suggested that.
> > > The <label> elemet to provide the larger click target for people with
> > > mobility impairments.
> > > The aria-label atribute to assign an accessible name to he input field
> > > for the benefits of screen reader users.
> > >
> > > You could force a screen reader to read all 3 by combining aria-label
> > > and aria-labelledby
> > >
> > > <label>
> > > <span id="q1a">If you have $1400, and get an unexpected dentis bill of
> > > </span>
> > > <input aria-label="enter amount" id="sr1" aria-labelledby="q1a sr1 q1b">
> > > <span id="q1b"> then you have exactly 20 dollars left</span>
> > > </label>
> > >
> > >
> > > On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> > >> I could have taken an extra 2 min to test it before posting my question.
> > >> The accessible name generation is pretty clear on the precedence.
> > >>
> > >> https://www.w3.org/TR/accname-1.1/#step2
> > >>
> > >> 2c is before 2d.
> > >> 2c gets the accessible name from the aria-label attribute
> > >> 2d gets the accessible name from the label element
> > >>
> > >> So the aria-label should win (and it does when I try NVDA on firefox and
> > >> JAWS on Internet Explorer)
> > >>
> > >> So, Birkir, did I read your suggestion incorrectly? Did you say to use
> > >> both a <label> element and the aria-label attribute?
> > >>
> > >> Glen
> > >>
> > >> On Wed, Apr 25, 2018 at 4:50 PM, glen walker < = EMAIL ADDRESS REMOVED = >
> > >> wrote:
> > >>
> > >>> Birkir, wouldn't that be conflicting information? You'd have a <label>
> > >>> for the <input> field *and* have an aria-label for the <input> field?
> > >>> Which one should win?
> > >>>
> > >>>
> > >>> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
> > >>> = EMAIL ADDRESS REMOVED = > wrote:
> > >>>
> > >>>> Tim makes good suggestions.
> > >>>> I'd try wrapping the whole question in a <label> element, then add
> > >>>> aria-label="answer" to the <input> field.
> > >>>> See how that is interpreted by a screen reader.
> > >>>>
> > >>>>
> > >> > > >> > > >> > > >> > > >>
> > >
> > >
> > > --
> > > Work hard. Have fun. Make history.
> > > > > > > > > > > > > > >
> > > > > > > > > > > >

From: Clayton Silva
Date: Fri, Apr 27 2018 3:18PM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Any thoughts on how to work with fill in the blank when HTML and question rewriting/reordering are not options?



I am specifically thinking about cases where the fill-in part is not necessarily meant to receive an answer, but rather where the whole question is an example and where the technology might be Word or PDF--like either an electronic version of a print publication or a public-facing draft of a print publication.



Some thoughts:



· using a pre-defined symbol placeholder

· using an inline/in-order image of a blank line with "fill in the blank" as alternative text

· using words in brackets like {blank} or {fill in the blank}.



All of these have drawbacks.



Clayton Silva



From: Isabel Holdsworth
Date: Mon, Apr 30 2018 4:59AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Hi Mallory,

Thanks for these great examples.

Unfortunately, using JAWS 2018 with advanced user verbosity, I can't
get the value of aria-describedby on any field. So this solution is
close but not perfect for our needs.

My solution of combining three labels, the middle of which is a hidden
label that says "[fill in the blank]" seems to work well.

Cheers.

On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
> Any thoughts on how to work with fill in the blank when HTML and question
> rewriting/reordering are not options?
>
>
>
> I am specifically thinking about cases where the fill-in part is not
> necessarily meant to receive an answer, but rather where the whole question
> is an example and where the technology might be Word or PDF--like either an
> electronic version of a print publication or a public-facing draft of a
> print publication.
>
>
>
> Some thoughts:
>
>
>
> · using a pre-defined symbol placeholder
>
> · using an inline/in-order image of a blank line with "fill in the
> blank" as alternative text
>
> · using words in brackets like {blank} or {fill in the blank}.
>
>
>
> All of these have drawbacks.
>
>
>
> Clayton Silva
>
>
>
>

From: Mallory
Date: Mon, Apr 30 2018 5:06AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Hi,
is this with Chrome browser?
We were using aria-labelledby on select inputs inside a table and were hooking up the th's to them with aria-labelledby and while it was fine as expected in IE and FF (and someone else claimed it worked in Edge as well), in Chrome/chromium there was nothing to hear unless you did table navigation.
I'd be interested to know if it differs per-browser since JAWS was just barely a majority SR for students using our stuff; not working means it needs to be revisited!

Though very recently Steve Faulkner had tested our test page (with the tables and selects) and it worked with the latest-latest JAWS and could no longer reproduce.

cheers,
_mallory

On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
> Hi Mallory,
>
> Thanks for these great examples.
>
> Unfortunately, using JAWS 2018 with advanced user verbosity, I can't
> get the value of aria-describedby on any field. So this solution is
> close but not perfect for our needs.
>
> My solution of combining three labels, the middle of which is a hidden
> label that says "[fill in the blank]" seems to work well.
>
> Cheers.
>
> On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
> > Any thoughts on how to work with fill in the blank when HTML and question
> > rewriting/reordering are not options?
> >
> >
> >
> > I am specifically thinking about cases where the fill-in part is not
> > necessarily meant to receive an answer, but rather where the whole question
> > is an example and where the technology might be Word or PDF--like either an
> > electronic version of a print publication or a public-facing draft of a
> > print publication.
> >
> >
> >
> > Some thoughts:
> >
> >
> >
> > · using a pre-defined symbol placeholder
> >
> > · using an inline/in-order image of a blank line with "fill in the
> > blank" as alternative text
> >
> > · using words in brackets like {blank} or {fill in the blank}.
> >
> >
> >
> > All of these have drawbacks.
> >
> >
> >
> > Clayton Silva
> >
> >
> >
> >

From: Isabel Holdsworth
Date: Mon, Apr 30 2018 5:57AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Yes, I'm using Jaws 2018 and Chrome 66.0.3359.139, the latest build as
of today. The labels work fine, but the last part of the question
(aria-describedby?) isn't spoken with Jaws.

On 30/04/2018, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> is this with Chrome browser?
> We were using aria-labelledby on select inputs inside a table and were
> hooking up the th's to them with aria-labelledby and while it was fine as
> expected in IE and FF (and someone else claimed it worked in Edge as well),
> in Chrome/chromium there was nothing to hear unless you did table
> navigation.
> I'd be interested to know if it differs per-browser since JAWS was just
> barely a majority SR for students using our stuff; not working means it
> needs to be revisited!
>
> Though very recently Steve Faulkner had tested our test page (with the
> tables and selects) and it worked with the latest-latest JAWS and could no
> longer reproduce.
>
> cheers,
> _mallory
>
> On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
>> Hi Mallory,
>>
>> Thanks for these great examples.
>>
>> Unfortunately, using JAWS 2018 with advanced user verbosity, I can't
>> get the value of aria-describedby on any field. So this solution is
>> close but not perfect for our needs.
>>
>> My solution of combining three labels, the middle of which is a hidden
>> label that says "[fill in the blank]" seems to work well.
>>
>> Cheers.
>>
>> On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
>> > Any thoughts on how to work with fill in the blank when HTML and
>> > question
>> > rewriting/reordering are not options?
>> >
>> >
>> >
>> > I am specifically thinking about cases where the fill-in part is not
>> > necessarily meant to receive an answer, but rather where the whole
>> > question
>> > is an example and where the technology might be Word or PDF--like either
>> > an
>> > electronic version of a print publication or a public-facing draft of a
>> > print publication.
>> >
>> >
>> >
>> > Some thoughts:
>> >
>> >
>> >
>> > · using a pre-defined symbol placeholder
>> >
>> > · using an inline/in-order image of a blank line with "fill in
>> > the
>> > blank" as alternative text
>> >
>> > · using words in brackets like {blank} or {fill in the blank}.
>> >
>> >
>> >
>> > All of these have drawbacks.
>> >
>> >
>> >
>> > Clayton Silva
>> >
>> >
>> >
>> >

From: David Farough
Date: Mon, Apr 30 2018 8:01AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

You are aware that, these individual verbosity levels can be
configured.
Perhaps if you check the control description option within the advanced
verbosity settings you would hear the aria-describedby information.

It could be argued that most people would not be aware that this is
possible, but perhaps those who used this setting might be aware of its'
flexibility.

David Farough

Coordonnateur de l'accessibilité des applications, Services intégrés de
gestion des TI
Commission de la fonction publique du Canada / Gouvernement du Canada
= EMAIL ADDRESS REMOVED = Tél: 819-420-8418 Télécopieur :
819-420-8408

Application Accessibility Co-ordinator, Corporate IT Management
Public Service Commission of Canada / Government of Canada
= EMAIL ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408


>>> Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > 07:57 AM Monday,
April 30, 2018 >>>
Yes, I'm using Jaws 2018 and Chrome 66.0.3359.139, the latest build as
of today. The labels work fine, but the last part of the question
(aria-describedby?) isn't spoken with Jaws.

On 30/04/2018, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> is this with Chrome browser?
> We were using aria-labelledby on select inputs inside a table and
were
> hooking up the th's to them with aria-labelledby and while it was
fine as
> expected in IE and FF (and someone else claimed it worked in Edge as
well),
> in Chrome/chromium there was nothing to hear unless you did table
> navigation.
> I'd be interested to know if it differs per-browser since JAWS was
just
> barely a majority SR for students using our stuff; not working means
it
> needs to be revisited!
>
> Though very recently Steve Faulkner had tested our test page (with
the
> tables and selects) and it worked with the latest-latest JAWS and
could no
> longer reproduce.
>
> cheers,
> _mallory
>
> On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
>> Hi Mallory,
>>
>> Thanks for these great examples.
>>
>> Unfortunately, using JAWS 2018 with advanced user verbosity, I
can't
>> get the value of aria-describedby on any field. So this solution is
>> close but not perfect for our needs.
>>
>> My solution of combining three labels, the middle of which is a
hidden
>> label that says "[fill in the blank]" seems to work well.
>>
>> Cheers.
>>
>> On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
>> > Any thoughts on how to work with fill in the blank when HTML and
>> > question
>> > rewriting/reordering are not options?
>> >
>> >
>> >
>> > I am specifically thinking about cases where the fill-in part is
not
>> > necessarily meant to receive an answer, but rather where the
whole
>> > question
>> > is an example and where the technology might be Word or PDF--like
either
>> > an
>> > electronic version of a print publication or a public-facing draft
of a
>> > print publication.
>> >
>> >
>> >
>> > Some thoughts:
>> >
>> >
>> >
>> > · using a pre-defined symbol placeholder
>> >
>> > · using an inline/in-order image of a blank line with
"fill in
>> > the
>> > blank" as alternative text
>> >
>> > · using words in brackets like {blank} or {fill in the
blank}.
>> >
>> >
>> >
>> > All of these have drawbacks.
>> >
>> >
>> >
>> > Clayton Silva
>> >
>> >
>> >
>> >

From: Isabel Holdsworth
Date: Mon, Apr 30 2018 8:10AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

If the last part of the question is intrinsic to answering it, IMO
using a mechanism that may or may not cause it to be read by
screenreaders is not advisable. I'm sticking with aria-labeledby, even
though that's not a perfect solution either. Cheers.

On 30/04/2018, David Farough < = EMAIL ADDRESS REMOVED = > wrote:
> You are aware that, these individual verbosity levels can be
> configured.
> Perhaps if you check the control description option within the advanced
> verbosity settings you would hear the aria-describedby information.
>
> It could be argued that most people would not be aware that this is
> possible, but perhaps those who used this setting might be aware of its'
> flexibility.
>
> David Farough
>
> Coordonnateur de l'accessibilité des applications, Services intégrés de
> gestion des TI
> Commission de la fonction publique du Canada / Gouvernement du Canada
> = EMAIL ADDRESS REMOVED = Tél: 819-420-8418 Télécopieur :
> 819-420-8408
>
> Application Accessibility Co-ordinator, Corporate IT Management
> Public Service Commission of Canada / Government of Canada
> = EMAIL ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
>
>
>>>> Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > 07:57 AM Monday,
> April 30, 2018 >>>
> Yes, I'm using Jaws 2018 and Chrome 66.0.3359.139, the latest build as
> of today. The labels work fine, but the last part of the question
> (aria-describedby?) isn't spoken with Jaws.
>
> On 30/04/2018, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi,
>> is this with Chrome browser?
>> We were using aria-labelledby on select inputs inside a table and
> were
>> hooking up the th's to them with aria-labelledby and while it was
> fine as
>> expected in IE and FF (and someone else claimed it worked in Edge as
> well),
>> in Chrome/chromium there was nothing to hear unless you did table
>> navigation.
>> I'd be interested to know if it differs per-browser since JAWS was
> just
>> barely a majority SR for students using our stuff; not working means
> it
>> needs to be revisited!
>>
>> Though very recently Steve Faulkner had tested our test page (with
> the
>> tables and selects) and it worked with the latest-latest JAWS and
> could no
>> longer reproduce.
>>
>> cheers,
>> _mallory
>>
>> On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
>>> Hi Mallory,
>>>
>>> Thanks for these great examples.
>>>
>>> Unfortunately, using JAWS 2018 with advanced user verbosity, I
> can't
>>> get the value of aria-describedby on any field. So this solution is
>>> close but not perfect for our needs.
>>>
>>> My solution of combining three labels, the middle of which is a
> hidden
>>> label that says "[fill in the blank]" seems to work well.
>>>
>>> Cheers.
>>>
>>> On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
>>> > Any thoughts on how to work with fill in the blank when HTML and
>>> > question
>>> > rewriting/reordering are not options?
>>> >
>>> >
>>> >
>>> > I am specifically thinking about cases where the fill-in part is
> not
>>> > necessarily meant to receive an answer, but rather where the
> whole
>>> > question
>>> > is an example and where the technology might be Word or PDF--like
> either
>>> > an
>>> > electronic version of a print publication or a public-facing draft
> of a
>>> > print publication.
>>> >
>>> >
>>> >
>>> > Some thoughts:
>>> >
>>> >
>>> >
>>> > · using a pre-defined symbol placeholder
>>> >
>>> > · using an inline/in-order image of a blank line with
> "fill in
>>> > the
>>> > blank" as alternative text
>>> >
>>> > · using words in brackets like {blank} or {fill in the
> blank}.
>>> >
>>> >
>>> >
>>> > All of these have drawbacks.
>>> >
>>> >
>>> >
>>> > Clayton Silva
>>> >
>>> >
>>> >
>>> >

From: Mallory
Date: Mon, Apr 30 2018 10:34AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

That and I've never needed to increase verbosity to get aria-describedby content (we used it always for error messages) to read out (I'll note that of course our Braille-only users don't get that anyway). The only content we've needed to have an explicit instruction stating students may want to increase verbosity settings was for non MathML content with a lot of symbols (and that whole situation we did not recommend).

cheers,
_mallory

> On 30/04/2018, David Farough < = EMAIL ADDRESS REMOVED = > wrote:
> You are aware that, these individual verbosity levels can be
> configured.
> >Perhaps if you check the control description option within the advanced
> verbosity settings you would hear the aria-describedby information.
>
> >It could be argued that most people would not be aware that this is
> possible, but perhaps those who used this setting might be aware of its'
> flexibility.
>
> David Farough

From: Jonathan Cohn
Date: Mon, Apr 30 2018 11:08AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | Next message →

Hello,

The aria-describedby field is only read with JAWS when actual focus (not
virtual focus) is on the field. So, it should be read after the label when
you switch from virtual cursor mode to forms mode either automatically or
by pressing space when the virtual cursor is on the field.



On 30 April 2018 at 07:06, Mallory < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
> is this with Chrome browser?
> We were using aria-labelledby on select inputs inside a table and were
> hooking up the th's to them with aria-labelledby and while it was fine as
> expected in IE and FF (and someone else claimed it worked in Edge as well),
> in Chrome/chromium there was nothing to hear unless you did table
> navigation.
> I'd be interested to know if it differs per-browser since JAWS was just
> barely a majority SR for students using our stuff; not working means it
> needs to be revisited!
>
> Though very recently Steve Faulkner had tested our test page (with the
> tables and selects) and it worked with the latest-latest JAWS and could no
> longer reproduce.
>
> cheers,
> _mallory
>
> On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
> > Hi Mallory,
> >
> > Thanks for these great examples.
> >
> > Unfortunately, using JAWS 2018 with advanced user verbosity, I can't
> > get the value of aria-describedby on any field. So this solution is
> > close but not perfect for our needs.
> >
> > My solution of combining three labels, the middle of which is a hidden
> > label that says "[fill in the blank]" seems to work well.
> >
> > Cheers.
> >
> > On 27/04/2018, Clayton Silva < = EMAIL ADDRESS REMOVED = > wrote:
> > > Any thoughts on how to work with fill in the blank when HTML and
> question
> > > rewriting/reordering are not options?
> > >
> > >
> > >
> > > I am specifically thinking about cases where the fill-in part is not
> > > necessarily meant to receive an answer, but rather where the whole
> question
> > > is an example and where the technology might be Word or PDF--like
> either an
> > > electronic version of a print publication or a public-facing draft of a
> > > print publication.
> > >
> > >
> > >
> > > Some thoughts:
> > >
> > >
> > >
> > > · using a pre-defined symbol placeholder
> > >
> > > · using an inline/in-order image of a blank line with "fill in
> the
> > > blank" as alternative text
> > >
> > > · using words in brackets like {blank} or {fill in the blank}.
> > >
> > >
> > >
> > > All of these have drawbacks.
> > >
> > >
> > >
> > > Clayton Silva
> > >
> > >
> > >
> > >

From: Bryan Garaventa
Date: Tue, May 01 2018 1:41AM
Subject: Re: Labelling a "fill in the blank" form field
← Previous message | No next message

Hi,
In case it's of help, the following resource can be used to test how the naming computation works by building your own markup examples to see if element names and descriptions are being calculated properly, and where browsers and screen readers are not following these algorithms accurately.
https://github.com/whatsock/w3c-alternative-text-computation

In running the below example, the following test results are returned.

accName: "If you have $1400, and get an unexpected dentis bill of enter amount then you have exactly 20 dollars left"

accDesc: ""

(Running AccName Computation Prototype version: 2.11)

<label>
<span id="q1a">If you have $1400, and get an unexpected dentis bill of </span>
<input aria-label="enter amount" id="test" aria-labelledby="q1a test q1b">
<span id="q1b"> then you have exactly 20 dollars left</span>
</label>

Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com

> On 26/04/2018, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> > Yes, I suggested that.
> > The <label> elemet to provide the larger click target for people
> > with mobility impairments.
> > The aria-label atribute to assign an accessible name to he input
> > field for the benefits of screen reader users.
> >
> > You could force a screen reader to read all 3 by combining
> > aria-label and aria-labelledby
> >
> > <label>
> > <span id="q1a">If you have $1400, and get an unexpected dentis bill
> > of </span> <input aria-label="enter amount" id="sr1"
> > aria-labelledby="q1a sr1 q1b"> <span id="q1b"> then you have exactly
> > 20 dollars left</span> </label>
> >
> >
> > On 4/25/18, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> >> I could have taken an extra 2 min to test it before posting my question.
> >> The accessible name generation is pretty clear on the precedence.
> >>
> >> https://www.w3.org/TR/accname-1.1/#step2
> >>
> >> 2c is before 2d.
> >> 2c gets the accessible name from the aria-label attribute 2d gets
> >> the accessible name from the label element
> >>
> >> So the aria-label should win (and it does when I try NVDA on
> >> firefox and JAWS on Internet Explorer)
> >>
> >> So, Birkir, did I read your suggestion incorrectly? Did you say to
> >> use both a <label> element and the aria-label attribute?
> >>
> >> Glen
> >>
> >> On Wed, Apr 25, 2018 at 4:50 PM, glen walker
> >> < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >>> Birkir, wouldn't that be conflicting information? You'd have a
> >>> <label> for the <input> field *and* have an aria-label for the <input> field?
> >>> Which one should win?
> >>>
> >>>
> >>> On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
> >>> = EMAIL ADDRESS REMOVED = > wrote:
> >>>
> >>>> Tim makes good suggestions.
> >>>> I'd try wrapping the whole question in a <label> element, then
> >>>> add aria-label="answer" to the <input> field.
> >>>> See how that is interpreted by a screen reader.
> >>>>
> >>>>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > archives at http://webaim.org/discussion/archives
>