E-mail List Archives
Thread: table cells, th-mapping
Number of posts in this thread: 6 (In chronological order)
From: Miriam Fukushima
Date: Tue, Mar 16 2021 4:44AM
Subject: table cells, th-mapping
No previous message | Next message →
Hello everyone,
thank you for any help in advance.
I have a table in which every data cell has multiple headers from
columns as well as rows.
The table head from the row contains a heading as well as text.
I can't change anything about the structure itself.
When mapping the headers to the data cells, is it feasible to have the
th-element structured like this:
<th>
<p id="thid"><strong> heading text </strong></p>
<p> paragraph text </p>
</th>
and then have the data cells have the ID only of the first paragraph in
the headers-attribute?
Or any other ideas how I could go about mapping that table header cell
to the data cells without the whole content of the table header cell
being referred to all the time?
Thank you very much for any input.
Kind regards, Miriam.
From: glen walker
Date: Tue, Mar 16 2021 9:21AM
Subject: Re: table cells, th-mapping
← Previous message | Next message →
In theory, yes, but I couldn't get headers to work with NVDA or JAWS. Both
always read the entire header instead of what was in the headers attribute.
I had
<th><span id="foo">first</span>second</th>
then
<td headers="foo">1</td>
NVDA and JAWS (both chrome and firefox) would always say "first second"
when I navigated to the cell using the screen reader table navigation keys
(ctrl+alt+arrow). I only expected to hear "first".
I would *not* recommend setting aria-hidden on "second" because, even
though that would hide the text from the header, it would also make the
text absolutely hidden from the screen reader. If you have text that is
visible, it should be available to all users. Using the headers attribute
should have hidden the extra text from the header but still allowed the
screen reader to navigate to the header cell and read all the text.
From: Jonathan Avila
Date: Tue, Mar 16 2021 9:40AM
Subject: Re: table cells, th-mapping
← Previous message | Next message →
It's my understanding that the spec says the ids must point to TH cells themselves and not something else like a span inside of them.
https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-headers
Jonathan
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Tuesday, March 16, 2021 11:21 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] table cells, th-mapping
CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
In theory, yes, but I couldn't get headers to work with NVDA or JAWS. Both always read the entire header instead of what was in the headers attribute.
I had
<th><span id="foo">first</span>second</th>
then
<td headers="foo">1</td>
NVDA and JAWS (both chrome and firefox) would always say "first second"
when I navigated to the cell using the screen reader table navigation keys (ctrl+alt+arrow). I only expected to hear "first".
I would *not* recommend setting aria-hidden on "second" because, even though that would hide the text from the header, it would also make the text absolutely hidden from the screen reader. If you have text that is visible, it should be available to all users. Using the headers attribute should have hidden the extra text from the header but still allowed the screen reader to navigate to the header cell and read all the text.
From: glen walker
Date: Tue, Mar 16 2021 9:53AM
Subject: Re: table cells, th-mapping
← Previous message | Next message →
Ah, yes, thanks Jonathan.
But there's also the difficult to understand section of the headers spec (
https://www.w3.org/TR/html53/tabular-data.html#element-attrdef-tablecells-headers)
that says
A th <https://www.w3.org/TR/html53/tabular-data.html#elementdef-th> element
A is said to be *targeted* by a th or td
<https://www.w3.org/TR/html53/tabular-data.html#elementdef-td> element B if
either A is *directly targeted* by B or if there exists an element C that
is itself *targeted* by the element B and A is *directly targeted* by C.
I had to read that a dozen times to get it. A td directly targeting a th
via the headers attribute is valid but a td can also target a separate
element (C) if C directly targets the th. I'm not sure how to code that
because even if I could have the td point to the span via headers, I could
not point the span itself to the th via headers because headers is not a
valid attribute for a span.
On Tue, Mar 16, 2021 at 9:40 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> It's my understanding that the spec says the ids must point to TH cells
> themselves and not something else like a span inside of them.
>
> https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-headers
>
> Jonathan
>
>
From: Jonathan Avila
Date: Tue, Mar 16 2021 10:02AM
Subject: Re: table cells, th-mapping
← Previous message | Next message →
Glenn, I think it's say a td could point to another to the id of td or th that then points to another th - sort of chaining of headers without directly referencing them.
Jon
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Tuesday, March 16, 2021 11:54 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] table cells, th-mapping
CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
Ah, yes, thanks Jonathan.
But there's also the difficult to understand section of the headers spec (
https://www.w3.org/TR/html53/tabular-data.html#element-attrdef-tablecells-headers)
that says
A th <https://www.w3.org/TR/html53/tabular-data.html#elementdef-th> element A is said to be *targeted* by a th or td <https://www.w3.org/TR/html53/tabular-data.html#elementdef-td> element B if either A is *directly targeted* by B or if there exists an element C that is itself *targeted* by the element B and A is *directly targeted* by C.
I had to read that a dozen times to get it. A td directly targeting a th via the headers attribute is valid but a td can also target a separate element (C) if C directly targets the th. I'm not sure how to code that because even if I could have the td point to the span via headers, I could not point the span itself to the th via headers because headers is not a valid attribute for a span.
On Tue, Mar 16, 2021 at 9:40 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> It's my understanding that the spec says the ids must point to TH
> cells themselves and not something else like a span inside of them.
>
> https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-headers
>
> Jonathan
>
>
From: Miriam Fukushima
Date: Wed, Mar 17 2021 9:30AM
Subject: Re: table cells, th-mapping
← Previous message | No next message
Thank you everyone for the input. I think i go then with the
abbr-attribute solution.
Kind regards, Miriam
On 16/03/2021 17:02, Jonathan Avila wrote:
> Glenn, I think it's say a td could point to another to the id of td or th that then points to another th - sort of chaining of headers without directly referencing them.
>
> Jon
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
> Sent: Tuesday, March 16, 2021 11:54 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] table cells, th-mapping
>
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>
>
> Ah, yes, thanks Jonathan.
>
> But there's also the difficult to understand section of the headers spec (
> https://www.w3.org/TR/html53/tabular-data.html#element-attrdef-tablecells-headers)
> that says
>
> A th <https://www.w3.org/TR/html53/tabular-data.html#elementdef-th> element A is said to be *targeted* by a th or td <https://www.w3.org/TR/html53/tabular-data.html#elementdef-td> element B if either A is *directly targeted* by B or if there exists an element C that is itself *targeted* by the element B and A is *directly targeted* by C.
>
> I had to read that a dozen times to get it. A td directly targeting a th via the headers attribute is valid but a td can also target a separate element (C) if C directly targets the th. I'm not sure how to code that because even if I could have the td point to the span via headers, I could not point the span itself to the th via headers because headers is not a valid attribute for a span.
>
>
>
> On Tue, Mar 16, 2021 at 9:40 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> It's my understanding that the spec says the ids must point to TH
>> cells themselves and not something else like a span inside of them.
>>
>> https://html.spec.whatwg.org/multipage/tables.html#attr-tdth-headers
>>
>> Jonathan
>>
>>
> > > > > > >