WebAIM - Web Accessibility In Mind

E-mail List Archives

Dot Leaders Should Be Seen, but Not heard

for

From: Mark Harcourt
Date: Apr 12, 2021 8:45AM

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