WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Anchor inside label?

for

From: Birkir R. Gunnarsson
Date: Apr 12, 2018 8:14AM

This one is tricky.
By including the link in the label you are making it easier for users
to navigate to and review the terms and conditions.
Screen readers handle this situation pretty well.

But you are also reducing the clickable target size of the label for
people who need to interact with the checkbox.

If the aria-flowto attribute was supported anywhere outside of Jaws
with Firefox (if that combo still supports it) this would be an ideal
case for use of that attribute.
<input type="checkbox" id="ch1">
<label for="ch1">I gree to the
<span aria-flowto="tac">terms and conditions</span>
</label>

....
<div id="tac">
<h4>terms and conditions</h4>
...
</div>

If you navigate to the phrase "terms and conditions" with Jaws (and
Firefox, at lesat older versions) it should tell you an alternative
flow is available and that you can navigate to it by pressing "=", you
can get back from there to the label by pressing shift-But sadly, as great as the idea behind this attribute was, lack of
support has basically forcedme to take it off my recommendations list,
though I wonder whether we should either try to push for better
support or remove it from the ARIA spec.



On 4/12/18, Steve Faulkner < <EMAIL REMOVED> > wrote:
> Hi Lynne, I added some advice and code examples
> <https://www.w3.org/TR/html/sec-forms.html#example-42c5e0c5> around this to
> the HTML spec a while back which may be helpful
>
> The ability to click or press a label to trigger an event on a control
>> provides usability and accessibility benefits by increasing the *hit area*
>> of a control, making it easier for a user to operate. These benefits may
>> be
>> lost or reduced, if the label element contains an element with its own
>> activation behavior, such as a link:
>>
>>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
>
> On 12 April 2018 at 14:33, Isabel Holdsworth < <EMAIL REMOVED> >
> wrote:
>
>> Hi all,
>>
>> We're putting together a prototype that has a checkbox whose label
>> contains an anchor (<a>) to a footnote further down in the page.
>>
>> This doesn't cause any validation errors, but I'm wondering if it's
>> likely to throw up any accessibility issues?
>>
>> I'd appreciate your thoughts.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.