WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Mark Harcourt
Date: Apr 14, 2021 9:29AM

Thank you for your rapid reply. My inexperience led me to choose "role" as
an attribute name. I am just seeking a convenient handle to use in the CSS
selector that I coded for this: .dot-leader span[role="dot-leaders"]:after

Please suggest a better attribute name that will not hijack the span
element.

Cheers.

Mark Harcourt

On Wed, Apr 14, 2021 at 11:24 AM JP Jamous < <EMAIL REMOVED> > wrote:

> Mark,
>
> Why did you choose to use a role attribute on the span? role="dot-leaders"
>
> 1. This is not necessary and violates one of the 2 main principles of
> ARIA. The role here serves no purpose, because you hid the span from
> assistive technologies. Automated tools such as Axe or Wave, might call
> that as a warning, because you are hijacking the span element.
> 2. The role attribute has specific values that it uses. "dot-leaders" is
> not one of them that I am aware of. If you are using this as a CSS class,
> then you are implementing the role value incorrectly.
>
> Those are the only concerns I have noticed by reading quickly through your
> markup.
>
>
>
>
>
> =================================================> Jean-Pierre Jamous
> Principal Digital Accessibility Engineer
> Jepelsy LLC
>
> W: (952) 666-2930
> M: (952) 666-2930
> <EMAIL REMOVED>
>
> "The only limitations in life are those we set for ourselves"
> =================================================>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Mark Harcourt
> Sent: Wednesday, April 14, 2021 9:55 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Dot Leaders Should Be Seen, but Not heard
>
> I want to express my thanks to all who replied to my queries. Using your
> information, I have tested the following and it seems to work. However,
> before I recommend it be adopted by the developers in the agency for which
> I work, I would appreciate your collective wisdom to advise me if this
> approach might contain any "gotchas" that I ought to guard against.
>
> XHTML Tagging:
> <td class="dot-leader"
> style="padding-left:4pt;padding-right:4pt;border-right:0pt solid
> black;text-align:left;"
> ><span>UTILITY F/W AIRCRAFT</span><span role="dot-leaders"
> aria-hidden="true"/></td>
>
> CSS Excerpt:
> .dot-leader {
> max-width: 40em;
> padding: 0em;
> baseline-shift: 0;
> overflow-x: hidden;
> list-style: none;
> }
> .dot-leader span[role="dot-leaders"]:after {
> display: inline-flex;
> float: left;
> width: 0em;
> baseline-shift: 0;
> white-space: nowrap;
> content:
> ". . . . . . . . . . . . . . . . . . . . "
> ". . . . . . . . . . . . . . . . . . . . "
> ". . . . . . . . . . . . . . . . . . . . "
> ". . . . . . . . . . . . . . . . . . . . "
> }
> .dot-leader span:first-child {
> padding-right: 0.33em;
> background: white;
> }
>
> This ought to allow us to use CSS to avoid putting dot leader characters
> inside each of the second <span> elements.
>
> Cheers.
>
> Mark Harcourt
>
> On Tue, Apr 13, 2021 at 1:48 PM Mark Harcourt <
> <EMAIL REMOVED> >
> wrote:
>
> > Thank you for that additional information, Jonathan. I appreciate all
> > of the answers that have been sent my way.
> >
> > Cheers.
> >
> > Mark Harcourt
> >
> >
> > On Tue, Apr 13, 2021 at 8:43 AM Jonathan Cohn < <EMAIL REMOVED> >
> > wrote:
> >
> >> TO add to this, to the best of my knowledge only VoiceOver and then
> >> only in a limited fashion implemented the voice attributes in CSS.
> >> Jonathan
> >>
> >> Best wishes,
> >>
> >> Jonathan Cohn
> >>
> >>
> >>
> >> > On Apr 12, 2021, at 14:56, JP Jamous < <EMAIL REMOVED> > wrote:
> >> >
> >> > Mark,
> >> >
> >> > You can use a span with aria-hidden="true" that holds the leaders,
> >> which would fall within the parent span. Example:
> >> > <span>
> >> > Chapter 1
> >> > <span aria-hidden="true">
> >> > ------------------------------
> >> > </span>
> >> > Page 5
> >> > </span>
> >> > Screen readers would only read "Chapter 1, Page 5"
> >> >
> >> >
> >> >
> >> >
> >> >
> >> > =================================================> >> > Jean-Pierre Jamous
> >> > Principal Digital Accessibility Engineer Jepelsy LLC
> >> >
> >> > W: (952) 666-2930
> >> > M: (952) 666-2930
> >> > <EMAIL REMOVED>
> >> >
> >> > "The only limitations in life are those we set for ourselves"
> >> > =================================================> >> >
> >> >
> >> > -----Original Message-----
> >> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
> >> > Of
> >> Mark Harcourt
> >> > Sent: Monday, April 12, 2021 1:46 PM
> >> > To: WebAIM Discussion List < <EMAIL REMOVED> >
> >> > Subject: Re: [WebAIM] Dot Leaders Should Be Seen, but Not heard
> >> >
> >> > Thank you, Glen. I found your information helpful and I appreciate
> >> > your
> >> taking time to offer it. Perhaps I misunderstood what you meant, but
> >> I think an HTML solution using aria-hidden="true" in the <span>
> >> container will not work. In the example I supplied previously,
> modifying this:
> >> > <span>UTILITY F/W AIRCRAFT</span>
> >> > to this:
> >> > <span aria-hidden="true">UTILITY F/W AIRCRAFT</span> causes NVDA to
> >> hide the entire text UTILITY F/W AIRCRAFT, not just the leaders that
> >> follow the text.
> >> >
> >> > I was not aware of the NVDA settings for punctuation. That
> >> > suggestion
> >> helped me very much.
> >> >
> >> > Cheers.
> >> >
> >> > Mark Harcourt
> >> >
> >> > On Mon, Apr 12, 2021 at 12:31 PM glen walker
> >> > < <EMAIL REMOVED> >
> >> wrote:
> >> >
> >> >> 1. For dot leaders, you're looking for a pure CSS solution, not html?
> >> >> In html, you can wrap your leaders inside an aria-hidden="true"
> >> container.
> >> >>
> >> >> 2. For punctuation, check your NVDA settings. Under "Speech"
> >> >> there's a punctuation setting that is "Some" by default. If you
> >> >> change it to
> >> "Most"
> >> >> or "All", you'll hear the square brackets announced. When set on
> >> >> "Some", I didn't hear the brackets but I *did* hear the negative
> >> >> sign
> >> on the number.
> >> >>
> >> >> Interesting that with "[-1,548]", when set to "some" I heard
> >> >> "minus one thousand five hundred forty eight". When set to "most"
> >> >> I heard "left bracket minus one thousand five hundred forty eight
> >> >> right bracket". When set to "all" I heard "left bracket minus one
> >> >> comma five forty eight right bracket". So with "all", it's truly
> >> >> reading all punctuation, including the comma in the number, which
> >> >> breaks up how
> >> the number is read.
> >> >>
> >> >>
> >> >> On Mon, Apr 12, 2021 at 8:46 AM Mark Harcourt <
> >> >> <EMAIL REMOVED> >
> >> >> wrote:
> >> >>
> >> >>> I am working on a project to assess the web accessibility of
> >> >>> responsive
> >> >>> HTML5 documents. While testing speech-to-text rendition of text
> >> >>> in tables using the open source NVDA (NonVisual Desktop Access)
> >> >>> assistive
> >> >> technology
> >> >>> agent, I discovered two issues that I hope someone here may help
> >> >>> me to understand and then recommend strategies to mitigate or
> overcome.
> >> >>>
> >> >>> 1. Though I do not agree with the sentiment expressed by the
> >> >>> English 15th century proverb that says, "Children should be seen,
> >> >>> but not heard," I do agree with the sentiment "Dot leaders should
> >> >>> be visible, but not auricular." Browsers appear to render as
> >> >>> invisible certain punctuation
> >> >> text
> >> >>> when it is styled using CSS speaking properties (meaning speak:
> >> >>> and speak-as:). This may be how browsers prevent speech-to-text
> >> >>> assistive technology agents (such as NVDA) from rendering aurally
> >> >>> punctuation text such as dot leaders (as "dot dot dot dot dot dot
> >> >>> dot dot dot dot dot dot dot dot dot dot ..." until one goes insane).
> >> >>> Is there some way to style
> >> >> dot
> >> >>> leaders so that they can be "seen but not heard?"
> >> >>> The CSS code applied in this case is as follows:
> >> >>> .dot-leader span:after {
> >> >>> display: inline-flex;
> >> >>> float: left;
> >> >>> width: 0em;
> >> >>> baseline-shift: 0;
> >> >>> white-space: nowrap;
> >> >>> content:
> >> >>> "000a0000a0000a0000a0. . . . . . . . . . . . . . . . . . .
> >> . "
> >> >>> ". . . . . . . . . . . . . . . . . . . . "
> >> >>> ". . . . . . . . . . . . . . . . . . . . "
> >> >>> ". . . . . . . . . . . . . . . . . . . . "
> >> >>> /* Seeking here to prevent text-to-speech agents from rendering
> >> >>> dot
> >> >> leaders
> >> >>> aurally.
> >> >>> Note: Using only one rather than both seemingly produces
> >> >>> identical results. */
> >> >>> speak-as: no-punctuation;
> >> >>> speak: none;
> >> >>> /* Seeking here to force leaders to remain visible because both
> speak:
> >> >> and
> >> >>> speak-as: seem to cause browsers to render them invisible. */
> >> >>> visibility: visible;
> >> >>> }
> >> >>>
> >> >>> single <td> styled using this CSS follows:
> >> >>> <td class="dot-leader"
> >> >>>
> >> >>> style="padding-left:4pt;padding-right:4pt;border-right:0pt solid
> >> >>> black;text-align:left;"
> >> >>>> <span>UTILITY F/W AIRCRAFT</span></td>
> >> >>>
> >> >>> 2. NVDA does not render aurally certain significant non-terminal
> >> >>> punctuation text when that punctuation is not styled using CSS
> >> >>> speaking properties. Negative numbers are often indicated in
> >> >>> financial tables
> >> >> using
> >> >>> enclosing square brackets and the negative number sign, as, e.g.,
> >> >> [-1,548].
> >> >>> No special CSS speaking properties are assigned to the styling of
> >> >>> such text. The characters are clearly visible; yet NVDA fails to
> >> >>> read aloud
> >> >> the
> >> >>> enclosing square brackets and the negative number sign. Why?
> >> >>>
> >> >>> Thank you in advance for any assistance you provide.
> >> >>>
> >> >>> Mark Harcourt
> >> >>> > >> >>> > >> >>> archives at http://webaim.org/discussion/archives
> >> >>> > >> >>>
> >> >> > >> >> > >> >> archives at http://webaim.org/discussion/archives
> >> >> > >> >>
> >> >
> >> >
> >> > --
> >> > LargePrefPlaceholder-XKUz1MEJBwkOM
> >> > > >> > > >> archives at http://webaim.org/discussion/archives
> >> > > >> >
> >> > > >> > > >> > archives at http://webaim.org/discussion/archives
> >> > > >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >
> >
> > --
> > LargePrefPlaceholder-XKUz1MEJBwkOM
> >
>
>
> --
> LargePrefPlaceholder-XKUz1MEJBwkOM
> > > at http://webaim.org/discussion/archives
> >
> > > > >


--
LargePrefPlaceholder-XKUz1MEJBwkOM