E-mail List Archives

Search E-mail List Archives for

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

From: Brandon Keith Biggs
Date: Tue, Jan 10 2017 1:47AM
Subject: Using labels or table headers on nested editable elements inside data cells?
No previous message | Next message →

Hello,
I am wondering what should be done in this situation.
If one has a table that is properly using the <th> tags at the top, then
all cells below will inherit the heading. This means edit boxes and whatnot
don't need any label because the header already is the label.
This is how I mostly program tables because it is the easiest and NVDA
likes it the most. But it fails accessibility tests because the edit boxes
don't have a label.

If one adds a label to the field then NVDA announces the title of the field
twice and the edit fields don't pass because they are not unique. (This
functionality is not just NVDA either).

So what should one do in this situation? For me as an NVDA user, I really
like edit boxes without labels if tables have their headers correct. But
the WCAG guidelines don't agree with me.
What should be done?
Thanks,

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

From: Srinivasu Chakravarthula
Date: Tue, Jan 10 2017 2:05AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Hello,
Do you have an example that I can look at?
Thanks,
Vasu

Regards,

Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Lead Accessibility Consultant, Informatica
Hon. Joint Secretary, The National Association for the Blind, Karnataka
Branch

On Tue, Jan 10, 2017 at 2:17 PM, Brandon Keith Biggs <
= EMAIL ADDRESS REMOVED = > wrote:

> Hello,
> I am wondering what should be done in this situation.
> If one has a table that is properly using the <th> tags at the top, then
> all cells below will inherit the heading. This means edit boxes and whatnot
> don't need any label because the header already is the label.
> This is how I mostly program tables because it is the easiest and NVDA
> likes it the most. But it fails accessibility tests because the edit boxes
> don't have a label.
>
> If one adds a label to the field then NVDA announces the title of the field
> twice and the edit fields don't pass because they are not unique. (This
> functionality is not just NVDA either).
>
> So what should one do in this situation? For me as an NVDA user, I really
> like edit boxes without labels if tables have their headers correct. But
> the WCAG guidelines don't agree with me.
> What should be done?
> Thanks,
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> > > > >

From: JP Jamous
Date: Tue, Jan 10 2017 2:17AM
Subject: Re: Using labels or table headers on nested editable elementsinside data cells?
← Previous message | Next message →

Brandon,

I understand why you like liquid tables. I used to love them because you know the browser will adjust everything automatically and no need to be concerned with CSS or cross-browser compatibility. However, I do not recommend you use table headings in layout tables. Use table headings only in data tables.

So you can construct your table without the TH and assign a label to each form element. You would pass WCAG, "Label all form elements", and ensure proper readability with screen readers.

It's that simple. Layout tables should never contain table headings. Just remember that. Problem solved.

From: Birkir R. Gunnarsson
Date: Tue, Jan 10 2017 4:57AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

You can combine a table with aria-labelledby.
See section 5 (5th h2 heading) of
http://mars.dequecloud.com/demo/form-markup.htm
For visually impaired users it is good practice to keep the label
close to the form fieled (because else it floats off the screen in
large magnification)


On 1/10/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Brandon,
>
> I understand why you like liquid tables. I used to love them because you
> know the browser will adjust everything automatically and no need to be
> concerned with CSS or cross-browser compatibility. However, I do not
> recommend you use table headings in layout tables. Use table headings only
> in data tables.
>
> So you can construct your table without the TH and assign a label to each
> form element. You would pass WCAG, "Label all form elements", and ensure
> proper readability with screen readers.
>
> It's that simple. Layout tables should never contain table headings. Just
> remember that. Problem solved.
>
>

From: Brandon Keith Biggs
Date: Tue, Jan 10 2017 6:10AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Hello,
I didn't explain what I meant well.
These are not layout tables, they are data tables. Here is an example of a
table that looks awesome to a screen reader, but does not pass WCAG:

<table>
<theader>
<tr>
<th>name</th>
<th>age</th>
</tr>
</theader>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="number"></td>
</tr>

<tr>
<td><input type="text"></td>
<td><input type="age"></td>
</tr>
</tbody>
</table>


In order to make it pass WCAG, one needs to add labels to each edit box
which would then make the title of the edit box read twice, reducing the
user experience for me as the screen reader user.


<table>
<theader>
<tr>
<th>name</th>
<th>age</th>
</tr>
</theader>
<tbody>
<tr>
<td><label for="n1">Name</label><input id="n1" type="text"></td>
<td><label for="a1">Age</label><input id="a1" type="number"></td>
</tr>

<tr>
<td><label for="n2">Name</label><input id="n2" type="text"></td>
<td><label for="a2">Age</label><input id="a2" type="age"></td>
</tr>
</tbody>
</table>

Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Tue, Jan 10, 2017 at 1:17 AM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:

> Brandon,
>
> I understand why you like liquid tables. I used to love them because you
> know the browser will adjust everything automatically and no need to be
> concerned with CSS or cross-browser compatibility. However, I do not
> recommend you use table headings in layout tables. Use table headings only
> in data tables.
>
> So you can construct your table without the TH and assign a label to each
> form element. You would pass WCAG, "Label all form elements", and ensure
> proper readability with screen readers.
>
> It's that simple. Layout tables should never contain table headings. Just
> remember that. Problem solved.
>
>

From: JP Jamous
Date: Tue, Jan 10 2017 6:16AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Brandon,

I agree with Birkir on this one. ARIA will override HTML as far as screen readers are concerned.

From: Birkir R. Gunnarsson
Date: Tue, Jan 10 2017 6:29AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Hi
Table association is not a valid source of a form field's accessible
name, per the accessible name calculation algorithm.
NVDA decides to be smart and guess it, and it guesses it correctly,
but it is not reliable enough to pass WCAG 4.1.2.
You can fix this by:
1. Adding unique id attributes to the th cells.
2. Referncing those ids using aria-labelledby from the <input> elements:

<table>
<theader>
<tr>
<th id="name1">name</th>
<th id="age1">age</th>
</tr>
</theader>
<tbody>
<tr>
<td><input type="text"> aria-labelledby="name1"</td>
<td><input type="number" aria-labelledby="age1"></td>
</tr>

<tr>
<td><input type="text" aria-labelledby="name1"></td>
<td><input type="age" aria-labelledby="age1"></td>
</tr>
</tbody>
</table>
If the table has a common group label, you can even associate it by
making the table into a group and using aria-labelledby to assign a
common name to it.
<h2 id="teamInfo">Please enter the names and ages of people in your team</h2>

<table role="group" aria-labelledby="teamInfo">
<theader>
<tr>
<th id="name1">name</th>
<th id="age1">age</th>
</tr>
</theader>
<tbody>
<tr>
<td><input type="text"> aria-labelledby="name1"</td>
<td><input type="number" aria-labelledby="age1"></td>
</tr>

<tr>
<td><input type="text" aria-labelledby="name1"></td>
<td><input type="age" aria-labelledby="age1"></td>
</tr>
</tbody>




On 1/10/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Brandon,
>
> I agree with Birkir on this one. ARIA will override HTML as far as screen
> readers are concerned.
>
>
>
>

From: Brandon Keith Biggs
Date: Tue, Jan 10 2017 6:51AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Hello,
Thank you for this! I will use aria-labeledby from now on!
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Tue, Jan 10, 2017 at 5:29 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi
> Table association is not a valid source of a form field's accessible
> name, per the accessible name calculation algorithm.
> NVDA decides to be smart and guess it, and it guesses it correctly,
> but it is not reliable enough to pass WCAG 4.1.2.
> You can fix this by:
> 1. Adding unique id attributes to the th cells.
> 2. Referncing those ids using aria-labelledby from the <input> elements:
>
> <table>
> <theader>
> <tr>
> <th id="name1">name</th>
> <th id="age1">age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><input type="text"> aria-labelledby="name1"</td>
> <td><input type="number" aria-labelledby="age1"></td>
> </tr>
>
> <tr>
> <td><input type="text" aria-labelledby="name1"></td>
> <td><input type="age" aria-labelledby="age1"></td>
> </tr>
> </tbody>
> </table>
> If the table has a common group label, you can even associate it by
> making the table into a group and using aria-labelledby to assign a
> common name to it.
> <h2 id="teamInfo">Please enter the names and ages of people in your
> team</h2>
>
> <table role="group" aria-labelledby="teamInfo">
> <theader>
> <tr>
> <th id="name1">name</th>
> <th id="age1">age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><input type="text"> aria-labelledby="name1"</td>
> <td><input type="number" aria-labelledby="age1"></td>
> </tr>
>
> <tr>
> <td><input type="text" aria-labelledby="name1"></td>
> <td><input type="age" aria-labelledby="age1"></td>
> </tr>
> </tbody>
>
>
>
>
> On 1/10/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> > Brandon,
> >
> > I agree with Birkir on this one. ARIA will override HTML as far as screen
> > readers are concerned.
> >
> >
> >
> >

From: Birkir R. Gunnarsson
Date: Tue, Jan 10 2017 7:22AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

You're always welcome.


On 1/10/17, Brandon Keith Biggs < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> Thank you for this! I will use aria-labeledby from now on!
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Tue, Jan 10, 2017 at 5:29 AM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi
>> Table association is not a valid source of a form field's accessible
>> name, per the accessible name calculation algorithm.
>> NVDA decides to be smart and guess it, and it guesses it correctly,
>> but it is not reliable enough to pass WCAG 4.1.2.
>> You can fix this by:
>> 1. Adding unique id attributes to the th cells.
>> 2. Referncing those ids using aria-labelledby from the <input> elements:
>>
>> <table>
>> <theader>
>> <tr>
>> <th id="name1">name</th>
>> <th id="age1">age</th>
>> </tr>
>> </theader>
>> <tbody>
>> <tr>
>> <td><input type="text"> aria-labelledby="name1"</td>
>> <td><input type="number" aria-labelledby="age1"></td>
>> </tr>
>>
>> <tr>
>> <td><input type="text" aria-labelledby="name1"></td>
>> <td><input type="age" aria-labelledby="age1"></td>
>> </tr>
>> </tbody>
>> </table>
>> If the table has a common group label, you can even associate it by
>> making the table into a group and using aria-labelledby to assign a
>> common name to it.
>> <h2 id="teamInfo">Please enter the names and ages of people in your
>> team</h2>
>>
>> <table role="group" aria-labelledby="teamInfo">
>> <theader>
>> <tr>
>> <th id="name1">name</th>
>> <th id="age1">age</th>
>> </tr>
>> </theader>
>> <tbody>
>> <tr>
>> <td><input type="text"> aria-labelledby="name1"</td>
>> <td><input type="number" aria-labelledby="age1"></td>
>> </tr>
>>
>> <tr>
>> <td><input type="text" aria-labelledby="name1"></td>
>> <td><input type="age" aria-labelledby="age1"></td>
>> </tr>
>> </tbody>
>>
>>
>>
>>
>> On 1/10/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>> > Brandon,
>> >
>> > I agree with Birkir on this one. ARIA will override HTML as far as
>> > screen
>> > readers are concerned.
>> >
>> >
>> >
>> >

From: Graham Armfield
Date: Tue, Jan 10 2017 8:15AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

I know the code provided was just an example, but what is it that
differentiates the various rows of inputs in this table setup? Surely you'd
also need some way of tying the age/number field with the name field
otherwise the prompt is ambiguous.

In the corresponding form not laid out in a table I'd be using fieldset and
legend to link the inputs. But here, could you also have the id of the name
field included in the aria-labelledby? Has anyone tried doing that.

I'd want to test this in mobile situations with Voiceover and Talkback too.

Regards
Graham Armfield

From: Lucy Greco
Date: Tue, Jan 10 2017 11:18AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

this has been coming up a lot lately here. in this example the table is
actualy data. but it it is reely just a lay out table should the role of
presentation be used on the table so the table verbosaty is not ther as
well

Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces


On Tue, Jan 10, 2017 at 7:15 AM, Graham Armfield <
= EMAIL ADDRESS REMOVED = > wrote:

> I know the code provided was just an example, but what is it that
> differentiates the various rows of inputs in this table setup? Surely you'd
> also need some way of tying the age/number field with the name field
> otherwise the prompt is ambiguous.
>
> In the corresponding form not laid out in a table I'd be using fieldset and
> legend to link the inputs. But here, could you also have the id of the name
> field included in the aria-labelledby? Has anyone tried doing that.
>
> I'd want to test this in mobile situations with Voiceover and Talkback too.
>
> Regards
> Graham Armfield
> > > > >

From: Lovely, Brian (CONT)
Date: Tue, Jan 10 2017 11:30AM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | Next message →

Yes, the role of presentation is used to strip an element of its semantic meaning. In the case of a table, the semantic meaning is that it contains tabular data. Since the table is to be used for layout purposes only, we strip out the tabular semantics of the element with role="presentation".

From: chaals
Date: Tue, Jan 10 2017 10:02PM
Subject: Re: Using labels or table headers on nested editable elements inside data cells?
← Previous message | No next message

10.01.2017, 16:15, "Graham Armfield" < = EMAIL ADDRESS REMOVED = >:
> I know the code provided was just an example, but what is it that
> differentiates the various rows of inputs in this table setup?

In effect, it's a template, and the distinguishing row header - "key" is a term sometimes used for database tables - is the value of the name input in the first cell of each row.

> Surely you'd
> also need some way of tying the age/number field with the name field
> otherwise the prompt is ambiguous.

That is relying on the basic table property that you move across tables in rows. Which isn't programatically determinable here, but could be if the algorithm were good enough. I'm not sure that it is - anyone who is interested would be welcome to check it in the HTML spec.

> In the corresponding form not laid out in a table I'd be using fieldset and
> legend to link the inputs. But here, could you also have the id of the name
> field included in the aria-labelledby? Has anyone tried doing that.

yeah, should be feasible, or you can use th elements and rely on the algorithm.

From memory you can't wrap the input and use it as a label for another input - but then, there isn't an HTML way outside ARIA to use multiple labels, as I recall.

> I'd want to test this in mobile situations with Voiceover and Talkback too.

Sure.

cheers

-- 
Charles McCathie Nevile - standards - Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com