WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Mark Harcourt
Date: Apr 13, 2021 11:48AM

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


--
LargePrefPlaceholder-XKUz1MEJBwkOM