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

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: May 26, 2023 9:59 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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.

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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: May 26, 2023 10:22 AM
To: = EMAIL ADDRESS 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

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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: May 26, 2023 10:40 AM
To: = EMAIL ADDRESS 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

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




-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: May 26, 2023 11:00 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:

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

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?
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: Thursday, May 25, 2023 5:50 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: Thursday, May 25, 2023 11:36 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>
>
>
>
>
>
> ---------- Forwarded message ----------
> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: May 26, 2023 9:59 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: May 26, 2023 10:22 AM
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: May 26, 2023 10:40 AM
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: May 26, 2023 11:00 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> (360) 475-7632
>
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Laurie-Anne Gignac
> Sent: Friday, May 26, 2023 8:46 AM
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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: 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?
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: Thursday, May 25, 2023 5:50 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: Thursday, May 25, 2023 11:36 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>
>>
>>
>>
>>
>>
>>
>> ---------- Forwarded message ----------
>> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: May 26, 2023 9:59 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Patrick H. Lauke
>> Sent: May 26, 2023 10:22 AM
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Patrick H. Lauke
>> Sent: May 26, 2023 10:40 AM
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> glen walker
>> Sent: May 26, 2023 11:00 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> (360) 475-7632
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Laurie-Anne Gignac
>> Sent: Friday, May 26, 2023 8:46 AM
>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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.
>> >
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.