WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: using role="columnheader" instead of <th>

for

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

From: glen walker
Date: Tue, Oct 26 2021 7:33PM
Subject: using role="columnheader" instead of <th>
No previous message | Next message →

Technically you can make a fully accessible table without using semantic
table elements provided you specify all the appropriate roles.

I have a situation where <table> elements *are* being used but the
structure of the code can't be changed (the element types can't change) but
attributes can be added. In order to add row and column headers to the
table, we are adding role="columnheader" or role="rowheader" on existing
<td> elements.

Now, ignoring the second rule of ARIA (
https://www.w3.org/TR/aria-in-html/#second), although it says "unless you
really have to", do you see any problem with having <td
role="columnheader">? It looks weird but in theory it should behave like a
<th scope="col">. Testing I've done with it seems to work. I didn't
expect it *not* to work but it just looks and feels weird.

From: David Engebretson Jr.
Date: Tue, Oct 26 2021 10:58PM
Subject: Re: using role="columnheader" instead of <th>
← Previous message | Next message →

First, why can't you change the top row to be a TH?

Also, can't you use the scope attribute? (https://www.w3resource.com/html/attributes/html-scope-attribute.php)

Second, do you have a sample you can provide so that us native screen reader users can take a peek?

Thanks!


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Tuesday, October 26, 2021 6:33 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] using role="columnheader" instead of <th>

Technically you can make a fully accessible table without using semantic table elements provided you specify all the appropriate roles.

I have a situation where <table> elements *are* being used but the structure of the code can't be changed (the element types can't change) but attributes can be added. In order to add row and column headers to the table, we are adding role="columnheader" or role="rowheader" on existing <td> elements.

Now, ignoring the second rule of ARIA (
https://www.w3.org/TR/aria-in-html/#second), although it says "unless you really have to", do you see any problem with having <td role="columnheader">? It looks weird but in theory it should behave like a <th scope="col">. Testing I've done with it seems to work. I didn't expect it *not* to work but it just looks and feels weird.

From: glen walker
Date: Tue, Oct 26 2021 11:18PM
Subject: Re: using role="columnheader" instead of <th>
← Previous message | Next message →

As I said originally, we can't change the elements.
Scope attribute is only valid on <th>, not <td>
I've tested it with screen readers so it appears ok. It just feels weird so
I was tossing it out there. I suspect it'll work just fine.

On Tue, Oct 26, 2021 at 10:59 PM David Engebretson Jr. <
= EMAIL ADDRESS REMOVED = > wrote:

> First, why can't you change the top row to be a TH?
>
> Also, can't you use the scope attribute? (
> https://www.w3resource.com/html/attributes/html-scope-attribute.php)
>
> Second, do you have a sample you can provide so that us native screen
> reader users can take a peek?
>
> Thanks!
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: Tuesday, October 26, 2021 6:33 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] using role="columnheader" instead of <th>
>
> Technically you can make a fully accessible table without using semantic
> table elements provided you specify all the appropriate roles.
>
> I have a situation where <table> elements *are* being used but the
> structure of the code can't be changed (the element types can't change) but
> attributes can be added. In order to add row and column headers to the
> table, we are adding role="columnheader" or role="rowheader" on existing
> <td> elements.
>
> Now, ignoring the second rule of ARIA (
> https://www.w3.org/TR/aria-in-html/#second), although it says "unless you
> really have to", do you see any problem with having <td
> role="columnheader">? It looks weird but in theory it should behave like a
> <th scope="col">. Testing I've done with it seems to work. I didn't
> expect it *not* to work but it just looks and feels weird.
> > > at http://webaim.org/discussion/archives
> >
> > > > >

From: David Engebretson Jr.
Date: Tue, Oct 26 2021 11:39PM
Subject: Re: using role="columnheader" instead of <th>
← Previous message | Next message →

So, from your response, I'm assuming you can't share an example?

Peace,
David


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Tuesday, October 26, 2021 10:19 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] using role="columnheader" instead of <th>

As I said originally, we can't change the elements.
Scope attribute is only valid on <th>, not <td> I've tested it with screen readers so it appears ok. It just feels weird so I was tossing it out there. I suspect it'll work just fine.

On Tue, Oct 26, 2021 at 10:59 PM David Engebretson Jr. < = EMAIL ADDRESS REMOVED = > wrote:

> First, why can't you change the top row to be a TH?
>
> Also, can't you use the scope attribute? (
> https://www.w3resource.com/html/attributes/html-scope-attribute.php)
>
> Second, do you have a sample you can provide so that us native screen
> reader users can take a peek?
>
> Thanks!
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: Tuesday, October 26, 2021 6:33 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] using role="columnheader" instead of <th>
>
> Technically you can make a fully accessible table without using
> semantic table elements provided you specify all the appropriate roles.
>
> I have a situation where <table> elements *are* being used but the
> structure of the code can't be changed (the element types can't
> change) but attributes can be added. In order to add row and column
> headers to the table, we are adding role="columnheader" or
> role="rowheader" on existing <td> elements.
>
> Now, ignoring the second rule of ARIA (
> https://www.w3.org/TR/aria-in-html/#second), although it says "unless
> you really have to", do you see any problem with having <td
> role="columnheader">? It looks weird but in theory it should behave
> like a <th scope="col">. Testing I've done with it seems to work. I
> didn't expect it *not* to work but it just looks and feels weird.
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >

From: Birkir R. Gunnarsson
Date: Wed, Oct 27 2021 10:47AM
Subject: Re: using role="columnheader" instead of <th>
← Previous message | No next message

I built a table entirely from ARIA roles and did some testing, worked
pretty well across multiple browsers/screen readers:
https://codepen.io/Wildebrew/pen/gBKdVb
I've used the rowheader role to repair tables without row headers for
years and it works very well, don't see why the columnheader role
wouldn't work just as well.
It may not be ideal, but sometimes we got to accept making the best
possible outcome, at least in the short-term.


On 10/27/21, David Engebretson Jr. < = EMAIL ADDRESS REMOVED = > wrote:
> So, from your response, I'm assuming you can't share an example?
>
> Peace,
> David
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen
> walker
> Sent: Tuesday, October 26, 2021 10:19 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] using role="columnheader" instead of <th>
>
> As I said originally, we can't change the elements.
> Scope attribute is only valid on <th>, not <td> I've tested it with screen
> readers so it appears ok. It just feels weird so I was tossing it out there.
> I suspect it'll work just fine.
>
> On Tue, Oct 26, 2021 at 10:59 PM David Engebretson Jr. <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> First, why can't you change the top row to be a TH?
>>
>> Also, can't you use the scope attribute? (
>> https://www.w3resource.com/html/attributes/html-scope-attribute.php)
>>
>> Second, do you have a sample you can provide so that us native screen
>> reader users can take a peek?
>>
>> Thanks!
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: Tuesday, October 26, 2021 6:33 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: [WebAIM] using role="columnheader" instead of <th>
>>
>> Technically you can make a fully accessible table without using
>> semantic table elements provided you specify all the appropriate roles.
>>
>> I have a situation where <table> elements *are* being used but the
>> structure of the code can't be changed (the element types can't
>> change) but attributes can be added. In order to add row and column
>> headers to the table, we are adding role="columnheader" or
>> role="rowheader" on existing <td> elements.
>>
>> Now, ignoring the second rule of ARIA (
>> https://www.w3.org/TR/aria-in-html/#second), although it says "unless
>> you really have to", do you see any problem with having <td
>> role="columnheader">? It looks weird but in theory it should behave
>> like a <th scope="col">. Testing I've done with it seems to work. I
>> didn't expect it *not* to work but it just looks and feels weird.
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.