WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table cells with subheadings

for

From: Birkir R. Gunnarsson
Date: May 26, 2023 2:37PM

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 REMOVED> </td>
</tr>


On 5/26/23, Laurence Lewis < <EMAIL 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 REMOVED> >
> wrote:
>
>> Send WebAIM-Forum mailing list submissions to
>> <EMAIL 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 REMOVED>
>>
>> You can reach the person managing the list at
>> <EMAIL 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 REMOVED> )
>> 2. Re: Emoji list bullets (glen walker)
>> 3. Re: Emoji list bullets (DJ Chase)
>> 4. Re: Emoji list bullets ( <EMAIL 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 REMOVED> >
>> To: "'WebAIM Discussion List'" < <EMAIL 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?
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> glen walker
>> Sent: Thursday, May 25, 2023 5:50 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Emoji list bullets
>>
>> Multilevel lists, in general, are fine assuming you have properly nested
>> <ul>/<li> elements. Most screen readers will tell the user which "level"
>> they're on in the list/sublist.
>>
>> Using an image or emoji for the bullet point is also ok.
>>
>> However, it sounds like the emoji also has meaning. With a
>> folder/document list, it's possible to have both folders and documents at
>> the same level.
>> A sighted user would be able to see two different emojis so that same
>> information needs to be communicated to assistive technology. Depending on
>> how you implement it, you might get the emoji name announced.
>>
>> If you use CSS :before, then the emoji name is announced. I tried it with
>> VoiceOver on iOS, NVDA on firefox, and JAWS on chrome.
>>
>> <style>
>> .folder:before { content: '1f4c1'; }
>> .doc:before { content: '1f4cb'; }
>> </style>
>>
>> <ul style="list-style-type:none">
>> <li class="folder">alpha</li>
>> <li class="folder">beta</li>
>> <li class="doc">gamma</li>
>> <li class="doc">delta</li>
>> </ul>
>>
>> NVDA and JAWS would say "file folder" and "clipboard".
>> VO would say "closed file folder" and "clipboard"
>>
>> (You can play around with different emoji's to hear the name you want
>> announced. "clipboard" was just a quick test because it sort of looked
>> like
>> a document.)
>>
>> Note that I turned off the list style since the emoji is acting as the
>> bullet point but isn't a real bullet point. If you don't turn off the list
>> style, you see both the bullet point and the emoji.
>>
>> When turning off the list style, VoiceOver usually removes the list
>> semantics and you have to add it back in by specifically adding
>> role="list"
>> to the <ul>. However, when using the :before CSS attribute, VO still
>> treats it as a list. I'm not sure if that's new behavior by VO. I used to
>> always have to specify a list role when I turned off the list style.
>>
>> You could potentially implement your bullets using CSS list-style-image,
>> in which case you don't have to turn off the list style, but then you need
>> a way to communicate the type of bullet it is (folder or document),
>> perhaps
>> with sr-only text.
>>
>> There are probably a dozen other ways to do this. Just test it thoroughly
>> with different screen readers and browsers.
>>
>>
>>
>> On Thu, May 25, 2023 at 6:31 AM DJ Chase < <EMAIL REMOVED> > wrote:
>>
>> > Hi All,
>> >
>> > I have a small site which is logically structured and uses breadcrumbs
>> > as the primary navigation, and I’m looking to create an index page to
>> > fulfill SC 2.4.5 Multiple Ways [1]. I’d like it to reflect the
>> > structure of the site, however, so I’m considering using a multi-level
>> > bulleted list where directories have a folder emoji as their bullet
>> > and documents have a document emoji as their bullet.
>> >
>> > Are y’all aware of any potential accessibility problems with that? I’m
>> > aware that nested lists can be complicated with a screen reader, but
>> > I’m also comfortable assuming that my audience can do that because it
>> > is a technical blog. My main concern is with the emojis; I’ve looked
>> > online, but I can’t really find anything about this use case.
>> >
>> > [1]: https://www.w3.org/TR/WCAG21/#multiple-ways
>> >
>> > Cheers,
>> > --
>> > DJ Chase
>> > They, Them, Theirs
>> > {gemini,https}://dj-chase.com/
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Thu, 25 May 2023 15:35:38 -0600
>> Subject: Re: [WebAIM] Emoji list bullets
>> I just tried 1F5CE for the document emoji and its name was *not*
>> announced.
>> As mentioned, whatever emoji is used, test with at least the three main
>> screen readers, JAWS, NVDA, and VoiceOver. Probably Talkback as well.
>>
>> As far as using CSS to provide screen reader text, the spec for the
>> accessible name computation (https://www.w3.org/TR/accname-1.1/#step2)
>> says
>> that CSS :before and :after are to be included as part of the accessible
>> name (step F) so it's a valid thing to do.
>>
>>
>> On Thu, May 25, 2023 at 3:05 PM < <EMAIL REMOVED> >
>> wrote:
>>
>> > 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?
>> >
>> >
>> >
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: DJ Chase < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Thu, 25 May 2023 22:52:20 +0000
>> Subject: Re: [WebAIM] Emoji list bullets
>> Thank you all for your thoughtful responses.
>>
>> On Thu May 25, 2023 at 11:50 AM EDT, glen walker wrote:
>> > However, it sounds like the emoji also has meaning. With a
>> folder/document
>> > list, it's possible to have both folders and documents at the same
>> > level.
>> > A sighted user would be able to see two different emojis so that same
>> > information needs to be communicated to assistive technology.
>>
>> Yeah, I was hoping the › at the end of directory names in combined with
>> the presence of a sublist would be enough.
>>
>> > Depending on
>> > how you implement it, you might get the emoji name announced.
>>
>> That’s good to know. I wouldn’t have considered that but it makes
>> complete sense.
>>
>> > If you use CSS :before, then the emoji name is announced. I tried it
>> > with
>> > VoiceOver on iOS, NVDA on firefox, and JAWS on chrome.
>> >
>> > <style>
>> > .folder:before { content: '1f4c1'; }
>> > .doc:before { content: '1f4cb'; }
>> > </style>
>> >
>> > <ul style="list-style-type:none">
>> > <li class="folder">alpha</li>
>> > <li class="folder">beta</li>
>> > <li class="doc">gamma</li>
>> > <li class="doc">delta</li>
>> > </ul>
>> >
>> > NVDA and JAWS would say "file folder" and "clipboard".
>> > VO would say "closed file folder" and "clipboard"
>> >
>> > (You can play around with different emoji's to hear the name you want
>> > announced. "clipboard" was just a quick test because it sort of looked
>> like
>> > a document.)
>> >
>> > Note that I turned off the list style since the emoji is acting as the
>> > bullet point but isn't a real bullet point. If you don't turn off the
>> list
>> > style, you see both the bullet point and the emoji.
>> >
>>
>> I tried it with `list-style-type: '1f4c1';` and Orca just read it as
>> “bullet”.
>>
>> > When turning off the list style, VoiceOver usually removes the list
>> > semantics and you have to add it back in by specifically adding
>> role="list"
>> > to the <ul>. However, when using the :before CSS attribute, VO still
>> treats
>> > it as a list. I'm not sure if that's new behavior by VO. I used to
>> > always
>> > have to specify a list role when I turned off the list style.
>>
>> That’s good to know. I can’t test with VoiceOver so thank you.
>>
>> Cheers,
>> --
>> DJ Chase
>> They, Them, Theirs
>> {gemini,https}://dj-chase.com/
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: < <EMAIL REMOVED> >
>> To: "'WebAIM Discussion List'" < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 08:36:43 +0200
>> Subject: Re: [WebAIM] Emoji list bullets
>> Hi Glen,
>> Yesterday I tested 1F5CE just with JAWS and that works.
>> Now I tested it with NVDA and surprise: its name was *not* announced, as
>> you noticed!
>>
>> I have a large collection of icons which work with NVDA, in fact all
>> except those for documents ☹.
>> It seems to me as a NVDA bug, but we have to acknowledge that yet the
>> document icons can not be used safely.
>>
>> Thanks for the hint in the accname spec. It is good to know that the usage
>> of these pseudo-elements is defined precisely in a spec.
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> glen walker
>> Sent: Thursday, May 25, 2023 11:36 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Emoji list bullets
>>
>> I just tried 1F5CE for the document emoji and its name was *not*
>> announced.
>> As mentioned, whatever emoji is used, test with at least the three main
>> screen readers, JAWS, NVDA, and VoiceOver. Probably Talkback as well.
>>
>> As far as using CSS to provide screen reader text, the spec for the
>> accessible name computation (https://www.w3.org/TR/accname-1.1/#step2)
>> says that CSS :before and :after are to be included as part of the
>> accessible name (step F) so it's a valid thing to do.
>>
>>
>> On Thu, May 25, 2023 at 3:05 PM < <EMAIL REMOVED> >
>> wrote:
>>
>> > 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?
>> >
>> >
>> >
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Dolenko, Kristen" < <EMAIL REMOVED> >
>> To: " <EMAIL REMOVED> " < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 13:05:02 +0000
>> Subject: [WebAIM] Table cells with subheadings
>> 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 REMOVED> <mailto: <EMAIL REMOVED> >
>>
>>
>>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Patrick H. Lauke" < <EMAIL REMOVED> >
>> To: <EMAIL REMOVED>
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 14:49:57 +0100
>> Subject: Re: [WebAIM] Table cells with subheadings
>> > 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
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 07:59:04 -0600
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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.
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Dolenko, Kristen" < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 14:19:32 +0000
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> glen walker
>> Sent: May 26, 2023 9:59 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>> ***ATTENTION***
>>
>> This email originated from outside of the Government of Canada.
>> Do not click links or open attachments unless you recognize the sender and
>> believe the content is safe.
>> To learn more about suspicious emails and how to report them: Handling
>> SPAM or junk emails<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>> >>
>> Ce courriel provient de l’extérieur du Gouvernement du Canada.
>> Ne cliquez pas sur le lien ni les pièces jointes sauf si vous reconnaissez
>> l’expéditeur et que vous croyez que le contenu est sûr.
>> Pour en savoir plus sur les courriels suspects et comment les signaler:
>> Comment traiter les courriels indésirables<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>>
>> 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.
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Patrick H. Lauke" < <EMAIL REMOVED> >
>> To: <EMAIL REMOVED>
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 15:22:23 +0100
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>>
>> 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
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Dolenko, Kristen" < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 14:31:31 +0000
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Patrick H. Lauke
>> Sent: May 26, 2023 10:22 AM
>> To: <EMAIL REMOVED>
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>> ***ATTENTION***
>>
>> This email originated from outside of the Government of Canada.
>> Do not click links or open attachments unless you recognize the sender and
>> believe the content is safe.
>> To learn more about suspicious emails and how to report them: Handling
>> SPAM or junk emails<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>> >>
>> Ce courriel provient de l’extérieur du Gouvernement du Canada.
>> Ne cliquez pas sur le lien ni les pièces jointes sauf si vous reconnaissez
>> l’expéditeur et que vous croyez que le contenu est sûr.
>> Pour en savoir plus sur les courriels suspects et comment les signaler:
>> Comment traiter les courriels indésirables<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>>
>> 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
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Patrick H. Lauke" < <EMAIL REMOVED> >
>> To: <EMAIL REMOVED>
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 15:39:54 +0100
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>>
>> 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
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Dolenko, Kristen" < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 14:55:28 +0000
>> Subject: Re: [WebAIM] Table cells with subheadings
>> Wouldn't CSS be more accessible on mobile devices? And easier to scan
>> using a screen reader?
>>
>> Kristen Dolenko
>> mobile: 1-343-551-2896
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Patrick H. Lauke
>> Sent: May 26, 2023 10:40 AM
>> To: <EMAIL REMOVED>
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>> ***ATTENTION***
>>
>> This email originated from outside of the Government of Canada.
>> Do not click links or open attachments unless you recognize the sender and
>> believe the content is safe.
>> To learn more about suspicious emails and how to report them: Handling
>> SPAM or junk emails<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>> >>
>> Ce courriel provient de l’extérieur du Gouvernement du Canada.
>> Ne cliquez pas sur le lien ni les pièces jointes sauf si vous reconnaissez
>> l’expéditeur et que vous croyez que le contenu est sûr.
>> Pour en savoir plus sur les courriels suspects et comment les signaler:
>> Comment traiter les courriels indésirables<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>>
>> 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
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 08:59:50 -0600
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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 REMOVED> > wrote:
>>
>> > Wouldn't CSS be more accessible on mobile devices? And easier to scan
>> > using a screen reader?
>> >
>> >
>> >
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Dolenko, Kristen" < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 15:07:43 +0000
>> Subject: Re: [WebAIM] Table cells with subheadings
>> Again - "lacking the technical vocabulary"
>>
>> Thought headings (semantic structure) were a part of CSS...crawling under
>> a rock now
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> glen walker
>> Sent: May 26, 2023 11:00 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Table cells with subheadings
>>
>> ***ATTENTION***
>>
>> This email originated from outside of the Government of Canada.
>> Do not click links or open attachments unless you recognize the sender and
>> believe the content is safe.
>> To learn more about suspicious emails and how to report them: Handling
>> SPAM or junk emails<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>> >>
>> Ce courriel provient de l’extérieur du Gouvernement du Canada.
>> Ne cliquez pas sur le lien ni les pièces jointes sauf si vous reconnaissez
>> l’expéditeur et que vous croyez que le contenu est sûr.
>> Pour en savoir plus sur les courriels suspects et comment les signaler:
>> Comment traiter les courriels indésirables<
>> https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72
>> >.
>>
>>
>> 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 REMOVED> > wrote:
>>
>> > Wouldn't CSS be more accessible on mobile devices? And easier to scan
>> > using a screen reader?
>> >
>> >
>> >
>> >> >> at http://webaim.org/discussion/archives
>> >>
>>
>>
>> ---------- Forwarded message ----------
>> From: Philip Kiff < <EMAIL REMOVED> >
>> To: <EMAIL REMOVED>
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 11:19:34 -0400
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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.
>> > >> > >> > >> > >>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: Laurie-Anne Gignac < <EMAIL REMOVED> >
>> To: " <EMAIL REMOVED> " < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 15:45:34 +0000
>> Subject: [WebAIM] Checkbox with text box to specify
>> Hi!
>> In a form, I have a choice of 2 checkboxes. The second one is labeled
>> "Other, specify," and there is a text box next to it. I'm having trouble
>> finding an example online to make this accessible. Is there a way to
>> indicate that the text box is related to the checkbox? Thank you.
>>
>> [cid:642ee126-0446-4a8a-b689-ee589ec944b9]
>>
>>
>>
>> ---------------------------------------------------------------------------------
>> Laurie-Anne Gignac
>>
>> Bibliothécaire — édimestre
>>
>> Direction des bibliothèques, Université de Montréal
>>
>>
>>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Hayman, Douglass" < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 15:55:38 +0000
>> Subject: Re: [WebAIM] [EXTERNAL] - Checkbox with text box to specify
>> Have you looked at examples offered here:
>>
>> https://dequeuniversity.com/library/
>>
>> And also the webaim site has great information:
>> https://webaim.org/techniques/forms/
>>
>> Seems like some surveys I've taken recently had something similar to what
>> you're looking for but I don't have one handy at the moment.
>>
>> Doug Hayman
>> IT Accessibility Coordinator
>> Information Technology
>> Olympic College
>> <EMAIL REMOVED>
>> (360) 475-7632
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Laurie-Anne Gignac
>> Sent: Friday, May 26, 2023 8:46 AM
>> To: <EMAIL REMOVED>
>> Subject: [EXTERNAL] - [WebAIM] Checkbox with text box to specify
>>
>> CAUTION: This email came from a non-OC system or external source. Beware
>> of phishing and social engineering!
>>
>>
>> Hi!
>> In a form, I have a choice of 2 checkboxes. The second one is labeled
>> "Other, specify," and there is a text box next to it. I'm having trouble
>> finding an example online to make this accessible. Is there a way to
>> indicate that the text box is related to the checkbox? Thank you.
>>
>> [cid:642ee126-0446-4a8a-b689-ee589ec944b9]
>>
>>
>>
>> ---------------------------------------------------------------------------------
>> Laurie-Anne Gignac
>>
>> Bibliothécaire - édimestre
>>
>> Direction des bibliothèques, Université de Montréal
>>
>>
>>
>>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 11:36:29 -0600
>> Subject: Re: [WebAIM] [EXTERNAL] - Checkbox with text box to specify
>> Those are two nice resources but they don't directly address associating
>> input fields with a checkbox, which I think is the original question.
>>
>> Here's another resource that might be closer:
>>
>> https://adrianroselli.com/2021/12/under-engineered-dependency-questions.html
>>
>> It talks about unhiding form elements (text input or other checkboxes)
>> when
>> an "other" radio button is selected. I don't think you are unhiding your
>> input but the concept is similar.
>>
>> I'm guessing your two checkboxes are already grouped together? Either via
>> a fieldset/legend or role="group"?
>>
>> You could have a nested fieldset or group around your checkbox and input
>> field but that might not be necessary. If the checkbox label is "other,
>> specify" and the input field is next in the tab order *and* the input
>> field
>> has an appropriate accessible name (such as "specify other [whatever]"),
>> then you should be ok.
>>
>>
>> On Fri, May 26, 2023 at 9:55 AM Hayman, Douglass < <EMAIL REMOVED> >
>> wrote:
>>
>> > Have you looked at examples offered here:
>> >
>> > https://dequeuniversity.com/library/
>> >
>> > And also the webaim site has great information:
>> > https://webaim.org/techniques/forms/
>> >
>> >
>> >
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 11:52:36 -0600
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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 REMOVED> > wrote:
>>
>> > Again - "lacking the technical vocabulary"
>> >
>> > Thought headings (semantic structure) were a part of CSS...crawling
>> > under
>> > a rock now
>> >
>> >
>> >
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: glen walker < <EMAIL REMOVED> >
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Cc:
>> Bcc:
>> Date: Fri, 26 May 2023 11:58:33 -0600
>> Subject: Re: [WebAIM] Table cells with subheadings
>> 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 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.
>> >
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.