WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: label for checkbox in a dynamic complex application Question

for

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

From: Nancy Johnson
Date: Mon, Jul 31 2017 11:41AM
Subject: label for checkbox in a dynamic complex application Question
No previous message | Next message →

I am working on a table of content for a small application that displays a
complex legal document. Not yet live.

A user can login and create a favorites of the sections that are important
to that user.

The TOC has sections and two levels of subsections.

Among other things each line has a link to each section with a fairly long
title and a check box The label is hidden from visual users.

Question: what text should be in the label?

I cannot wrap the label around the link as it breaks the application. I
could add the same title as the link but the screen reader user would have
to listen to the text twice. Suggestions? This is all in a loop and
dynamic.

Thanks

Nancy

From: Birkir R. Gunnarsson
Date: Mon, Jul 31 2017 7:57PM
Subject: Re: label for checkbox in a dynamic complex application Question
← Previous message | No next message

Why do you need the checkbox with visually hidden text? Keyboard only
users can get to them and will not be able to see where the focus is,
which can be a problem (if you want to force it under WCAG it would be
2.4.3).
In terms of labeling, you could just use aria-label="favorite this"
and aria-describedby pointing to the long text in the link.
<input type="checkbox" aria-label="favorite this" aria-describedby="d1">
<a href="#" id="d1">Link to section 1</a>

How do you "regular" users favorite an article?


On 7/31/17, Nancy Johnson < = EMAIL ADDRESS REMOVED = > wrote:
> I am working on a table of content for a small application that displays a
> complex legal document. Not yet live.
>
> A user can login and create a favorites of the sections that are important
> to that user.
>
> The TOC has sections and two levels of subsections.
>
> Among other things each line has a link to each section with a fairly long
> title and a check box The label is hidden from visual users.
>
> Question: what text should be in the label?
>
> I cannot wrap the label around the link as it breaks the application. I
> could add the same title as the link but the screen reader user would have
> to listen to the text twice. Suggestions? This is all in a loop and
> dynamic.
>
> Thanks
>
> Nancy
> > > > >


--
Work hard. Have fun. Make history.