WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table cells with subheadings

for

From: Laurence Lewis
Date: May 26, 2023 12:32PM

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.
> >
>
> > > > >