WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Mark Harcourt
Date: Apr 12, 2021 12:46PM


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


--
LargePrefPlaceholder-XKUz1MEJBwkOM