WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form to be used to collect A11y feedback

for

From: Birkir R. Gunnarsson
Date: Dec 8, 2022 11:44AM

If I really really wanted to fill those fields out I would've counted
the labels and matched up the numbers with the inputs. This means I
probably would get it right eventually but almost certainly after
trying to submit a couple of times with errors.
(in other words I would give up before then)
No idea what the buttons do, I figured I could after pressing them and
exploring the form after to see the difference, but I didn't check
them.
With the labels, you can fix both content order and screen reader
announcement by adding an aria-owns to the for attribute for the
label, the value of both is the id of the input.
So
<label for="ip1" aria-owns="ip1">First name</label>
<label for="ip2" aria-owns="ip2">Last name</label>
<input type="text" id="ip1">
<input type="text" id="ip2">

would be exposed to a screen reader as First name label, first name
input, last name label, last name input.
This is one of the couple of hacks where aria-owns can come in handy.
Of course the solution is to change the source order but sometimes you
got to be creative.

On 12/8/22, Steve Green < <EMAIL REMOVED> > wrote:
> Birkir, were you able to make sense of the sections of the form containing
> consecutive unlabelled textboxes? Did you understand what the buttons after
> those textboxes are for? NVDA announces them as "button plus" and "button",
> so their purpose may be ambiguous.
>
> Steve
>
>
>