WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Jonathan Cohn
Date: Apr 13, 2021 6:43AM

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