WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: glen walker
Date: Apr 12, 2021 10:30AM

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