WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: David Engebretson Jr.
Date: Oct 26, 2021 10:58PM

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 REMOVED> > On Behalf Of glen walker
Sent: Tuesday, October 26, 2021 6:33 PM
To: WebAIM Discussion List < <EMAIL 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.