E-mail List Archives

Search E-mail List Archives for

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

From: Dolenko, Kristen
Date: Fri, May 26 2023 7:05AM
Subject: Table cells with subheadings
No previous message | Next message →

Good morning.,
I have been working with my colleagues to avoid using tables to format text for ages. Yet, when I run into something like this, which technically validates, I am lacking the technical vocabulary to explain why it would be better to use CSS:
https://cbsa-asfc.gc.ca/agency-agence/actreg-loireg/delegation/irpa-lipr-2019-06-1-eng.html

Is it possible for screen readers to understand multiple sub-headings inside a single cell?


Kristen Dolenko
Senior Web Strategist / Conseilleure principale en stratégie Web
E-Communications, Strategic Policy / DG politique stratégique
Canada Border Services Agency / Agence des services frontaliers du Canada

mobile: 1-343-551-2896
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

From: Patrick H. Lauke
Date: Fri, May 26 2023 7:49AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

> Is it possible for screen readers to understand multiple sub-headings inside a single cell?

Why not try it out for yourself? The majority of screen readers out
there are either free or come pre-available as part of the OS...

And in answer to your question yes - as long as you use actual
<h1>...<h6> proper headings and not, like in that page, <p class="h4...">.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: glen walker
Date: Fri, May 26 2023 7:59AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

The example page seems pretty straight forward. It's almost coded
correctly, in my opinion. There are multiple tables on the page with each
table preceded by an H3 heading, kind of like a <caption>, so it's easy to
find each table along with it's description.

Inside of the cells, there visually appears to be headings but they are
just paragraph tags, <p>, with a classname of "h4" or "h5". Someone went to
the trouble of naming the CSS classes as if they were heading elements but
didn't actually use heading elements. Real <h4> and <h5> should be used.

Once you have real headings in the cells, if you navigate by heading ('H'
key with NVDA/JAWS or using the rotor on iOS), it's difficult to tell when
you hear a heading in a new cell. However, if you navigate the table cell
by cell (ctrl+alt+arrowkey), you hear the column header and then all the
cell contents, including each heading (which is sometimes a lot).

So it's possible to navigate and hear the structure in the cell, if you use
real headings in the cells. Is it easy to understand? That's a difficult
question to answer without real usability tests.

From: Dolenko, Kristen
Date: Fri, May 26 2023 8:19AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

Thank you Patrick and Glen -
I'm hearing that it's technically valid (almost) but that the better approach, to make it more understandable, would be to use CSS.

Kristen Dolenko
mobile: 1-343-551-2896

From: Patrick H. Lauke
Date: Fri, May 26 2023 8:22AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

On 26/05/2023 15:19, Dolenko, Kristen wrote:
> ...but that the better approach, to make it more understandable, would be
to use CSS.

Nope, nothing to do with using CSS. Both Glen and I pointed out that
*instead* of using CSS to make paragraphs of text *look* like headings,
actual heading markup should be used instead.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Dolenko, Kristen
Date: Fri, May 26 2023 8:31AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

In the table yes...but if we pulled the info out of the table and structured it using CSS, better, no?

Kristen Dolenko
mobile: 1-343-551-2896

From: Patrick H. Lauke
Date: Fri, May 26 2023 8:39AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

On 26/05/2023 15:31, Dolenko, Kristen wrote:
> In the table yes...but if we pulled the info out of the table and structured it using CSS, better, no?

Better ... why? The information there is tabular in nature, so why are
you keen on removing that clear structure and, presumably, just
mimicking the look of a table with CSS?

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Dolenko, Kristen
Date: Fri, May 26 2023 8:55AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

Wouldn't CSS be more accessible on mobile devices? And easier to scan using a screen reader?

Kristen Dolenko
mobile: 1-343-551-2896

From: glen walker
Date: Fri, May 26 2023 8:59AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

I'm not following the CSS angle. The majority of accessibility comes from
semantic HTML elements. *Some* accessibility comes from CSS, such as color
choices or the "display" property.

What makes you think CSS is more accessible than HTML? That's not a
facetious question. I'm genuinely curious what you've heard and from where.


On Fri, May 26, 2023 at 8:55 AM Dolenko, Kristen <
= EMAIL ADDRESS REMOVED = > wrote:

> Wouldn't CSS be more accessible on mobile devices? And easier to scan
> using a screen reader?
>
>
>

From: Dolenko, Kristen
Date: Fri, May 26 2023 9:07AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

Again - "lacking the technical vocabulary"

Thought headings (semantic structure) were a part of CSS...crawling under a rock now

From: Philip Kiff
Date: Fri, May 26 2023 9:19AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

One thing to note about this specific page is that the table structure
is defined in the text of the actual signed authorization that appears
at the top of the page. The authorization  makes specific reference to
what content you can find in each "column". So you wouldn't want to
change the table format on this specific page.

Also, in terms of tagging strategies, since headings can sometimes get
lost for users within tables (I think?), in this case, it might be
possible instead to use a nested list for the content in column 4. And
you could style the list to remove bullets from the first two levels. So
for example, for item 202 in the second table, you would get something
like:

- CBSA
- - Domestic Regions
- - - Border Services Officer
- - - Hearings Advisor
- RCMP
- IRCC
- - Domestic Regions and CPR
- - - C&I

Just a thought.

Phil.

On 2023-05-26 09:59, glen walker wrote:
> The example page seems pretty straight forward. It's almost coded
> correctly, in my opinion. There are multiple tables on the page with each
> table preceded by an H3 heading, kind of like a <caption>, so it's easy to
> find each table along with it's description.
>
> Inside of the cells, there visually appears to be headings but they are
> just paragraph tags, <p>, with a classname of "h4" or "h5". Someone went to
> the trouble of naming the CSS classes as if they were heading elements but
> didn't actually use heading elements. Real <h4> and <h5> should be used.
>
> Once you have real headings in the cells, if you navigate by heading ('H'
> key with NVDA/JAWS or using the rotor on iOS), it's difficult to tell when
> you hear a heading in a new cell. However, if you navigate the table cell
> by cell (ctrl+alt+arrowkey), you hear the column header and then all the
> cell contents, including each heading (which is sometimes a lot).
>
> So it's possible to navigate and hear the structure in the cell, if you use
> real headings in the cells. Is it easy to understand? That's a difficult
> question to answer without real usability tests.
> > > >

From: glen walker
Date: Fri, May 26 2023 11:52AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

No worries, This is a judgement free zone. I was trying to understand where
your point of view was coming from.

Semantic structure is often associated with semantic html elements. That
is, if something looks like a heading, then a real semantic <h2> html
element should be used. If something looks like a list, then a real
semantic <ul> html element should be used. If it looks like a table, etc.

The CSS side is just to make the heading or list or table look pretty. Most
CSS doesn't affect accessibility but there are a few properties that do.
As mentioned earlier, colors are normally defined in CSS so the CSS might
affect color contrast or use of color. Setting display:none will visually
hide an element and will also remove that element from the accessibility
tree, so in that respect, CSS does affect accessibility.

On Fri, May 26, 2023 at 9:07 AM Dolenko, Kristen <
= EMAIL ADDRESS REMOVED = > wrote:

> Again - "lacking the technical vocabulary"
>
> Thought headings (semantic structure) were a part of CSS...crawling under
> a rock now
>
>
>

From: glen walker
Date: Fri, May 26 2023 11:58AM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

That's an interesting idea. It might work. Just be careful if you use CSS
list-style:none. On iOS, Apple decided that if you turn off the bullet
points for a list, then that removes the list semantics of the list and
it's essentially seen as a div or span. You have to specifically add the
list semantics back in with role="list".

<ul style="list-style:none" role="list>

This is another case where CSS (unintentionally) affects accessibility, at
least on a certain platform.

If you have code like this, make sure you comment why you're adding list
role back in because someone unaware might think it's superfluous and
remove it.

On Fri, May 26, 2023 at 9:19 AM Philip Kiff < = EMAIL ADDRESS REMOVED = > wrote:

> in this case, it might be
> possible instead to use a nested list for the content in column 4. And
> you could style the list to remove bullets from the first two levels.
>

From: Laurence Lewis
Date: Fri, May 26 2023 12:32PM
Subject: Re: Table cells with subheadings
← Previous message | Next message →

Hi

I suggest it would be better to use a <caption> and not heading markup. The
caption can be styled the same as a large bold heading.
When a screen reader user navigates by table the caption is announced. If
headings, each table is announced as a table without a meaningful name.

Laurence Lewis
Accessibility Senior Specialist - Telstra, Brisbane Australia

On Sat, 27 May 2023 at 4:00 am, < = EMAIL ADDRESS REMOVED = >
wrote:

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS REMOVED =
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> = EMAIL ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. Re: Emoji list bullets ( = EMAIL ADDRESS REMOVED = )
> 2. Re: Emoji list bullets (glen walker)
> 3. Re: Emoji list bullets (DJ Chase)
> 4. Re: Emoji list bullets ( = EMAIL ADDRESS REMOVED = )
> 5. Table cells with subheadings (Dolenko, Kristen)
> 6. Re: Table cells with subheadings (Patrick H. Lauke)
> 7. Re: Table cells with subheadings (glen walker)
> 8. Re: Table cells with subheadings (Dolenko, Kristen)
> 9. Re: Table cells with subheadings (Patrick H. Lauke)
> 10. Re: Table cells with subheadings (Dolenko, Kristen)
> 11. Re: Table cells with subheadings (Patrick H. Lauke)
> 12. Re: Table cells with subheadings (Dolenko, Kristen)
> 13. Re: Table cells with subheadings (glen walker)
> 14. Re: Table cells with subheadings (Dolenko, Kristen)
> 15. Re: Table cells with subheadings (Philip Kiff)
> 16. Checkbox with text box to specify (Laurie-Anne Gignac)
> 17. Re: [EXTERNAL] - Checkbox with text box to specify
> (Hayman, Douglass)
> 18. Re: [EXTERNAL] - Checkbox with text box to specify (glen walker)
> 19. Re: Table cells with subheadings (glen walker)
> 20. Re: Table cells with subheadings (glen walker)
>
>
>
> ---------- Forwarded message ----------
> From: < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 25 May 2023 23:05:29 +0200
> Subject: Re: [WebAIM] Emoji list bullets
> I agree with Glen that a Unicode symbol would be a clever idea to use:
> 1. You save a lot of work around to provide a text alternative for an
> image or a font awesome icon etc. JAWS and NVDA interpret Unicode symbols
> quite reliable. Just the texting does not always fit perfectly.
> 2. A screen reader provides the interpretation of a Unicode symbol in the
> default language. Helpful for pages in a foreign language beyond any SC.
>
> I’d propose 🗎 (1F5CE) to indicate documents. They are not clipboards,
> although the icon looks alike.
>
> And I am not sure whether CSS is the correct approach. Once I learned that
> CSS should not be used to provide information for SR:
> .folder:before { content: '1f4c1'; }
> <li style="list-style-type: '1f4c1'";'">
> What is State of the Art?
>
>
>

From: Birkir R. Gunnarsson
Date: Fri, May 26 2023 2:37PM
Subject: Re: Table cells with subheadings
← Previous message | No next message

You can place a heading right above a table and connect the two with
aria-labelledby, that way you get the best of both worlds.

<h3 id="q3p">Third quarter profits</h3>

<table aria-labelledby="q3p">
...
</table>

If a table reads logically from left to right I sometimes recommend
making the content of the row header cells into headings so uers can
read the table without table navigation commands, if they so choose.
..
<tr>
<th><h4>John</h4</th>
<td>555-1212</td>
<td> = EMAIL ADDRESS REMOVED = </td>
</tr>


On 5/26/23, Laurence Lewis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi
>
> I suggest it would be better to use a <caption> and not heading markup. The
> caption can be styled the same as a large bold heading.
> When a screen reader user navigates by table the caption is announced. If
> headings, each table is announced as a table without a meaningful name.
>
> Laurence Lewis
> Accessibility Senior Specialist - Telstra, Brisbane Australia
>
> On Sat, 27 May 2023 at 4:00 am, < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Send WebAIM-Forum mailing list submissions to
>> = EMAIL ADDRESS REMOVED =
>>
>> To subscribe or unsubscribe via the World Wide Web, visit
>> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
>> or, via email, send a message with subject or body 'help' to
>> = EMAIL ADDRESS REMOVED =
>>
>> You can reach the person managing the list at
>> = EMAIL ADDRESS REMOVED =
>>
>> When replying, please edit your Subject line so it is more specific
>> than "Re: Contents of WebAIM-Forum digest..."
>> Today's Topics:
>>
>> 1. Re: Emoji list bullets ( = EMAIL ADDRESS REMOVED = )
>> 2. Re: Emoji list bullets (glen walker)
>> 3. Re: Emoji list bullets (DJ Chase)
>> 4. Re: Emoji list bullets ( = EMAIL ADDRESS REMOVED = )
>> 5. Table cells with subheadings (Dolenko, Kristen)
>> 6. Re: Table cells with subheadings (Patrick H. Lauke)
>> 7. Re: Table cells with subheadings (glen walker)
>> 8. Re: Table cells with subheadings (Dolenko, Kristen)
>> 9. Re: Table cells with subheadings (Patrick H. Lauke)
>> 10. Re: Table cells with subheadings (Dolenko, Kristen)
>> 11. Re: Table cells with subheadings (Patrick H. Lauke)
>> 12. Re: Table cells with subheadings (Dolenko, Kristen)
>> 13. Re: Table cells with subheadings (glen walker)
>> 14. Re: Table cells with subheadings (Dolenko, Kristen)
>> 15. Re: Table cells with subheadings (Philip Kiff)
>> 16. Checkbox with text box to specify (Laurie-Anne Gignac)
>> 17. Re: [EXTERNAL] - Checkbox with text box to specify
>> (Hayman, Douglass)
>> 18. Re: [EXTERNAL] - Checkbox with text box to specify (glen walker)
>> 19. Re: Table cells with subheadings (glen walker)
>> 20. Re: Table cells with subheadings (glen walker)
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: < = EMAIL ADDRESS REMOVED = >
>> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>> Cc:
>> Bcc:
>> Date: Thu, 25 May 2023 23:05:29 +0200
>> Subject: Re: [WebAIM] Emoji list bullets
>> I agree with Glen that a Unicode symbol would be a clever idea to use:
>> 1. You save a lot of work around to provide a text alternative for an
>> image or a font awesome icon etc. JAWS and NVDA interpret Unicode symbols
>> quite reliable. Just the texting does not always fit perfectly.
>> 2. A screen reader provides the interpretation of a Unicode symbol in the
>> default language. Helpful for pages in a foreign language beyond any SC.
>>
>> I’d propose 🗎 (1F5CE) to indicate documents. They are not clipboards,
>> although the icon looks alike.
>>
>> And I am not sure whether CSS is the correct approach. Once I learned that
>> CSS should not be used to provide information for SR:
>> .folder:before { content: '1f4c1'; }
>> <li style="list-style-type: '1f4c1'";'">
>> What is State of the Art?
>>
>>
>>