WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Swift, Daniel P.
Date: Apr 14, 2021 9:27AM

Mark:

Just a general comment – instead of CSS content with periods, you might be able to use CSS border-bottom dotted. I'm not sure if that works with your current design, but it might be something to think about.

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Mark Harcourt
Sent: Wednesday, April 14, 2021 10:55 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Dot Leaders Should Be Seen, but Not heard

I want to express my thanks to all who replied to my queries. Using your
information, I have tested the following and it seems to work. However,
before I recommend it be adopted by the developers in the agency for which
I work, I would appreciate your collective wisdom to advise me if this
approach might contain any "gotchas" that I ought to guard against.

XHTML Tagging:
<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><span role="dot-leaders"
aria-hidden="true"/></td>

CSS Excerpt:
.dot-leader {
max-width: 40em;
padding: 0em;
baseline-shift: 0;
overflow-x: hidden;
list-style: none;
}
.dot-leader span[role="dot-leaders"]:after {
display: inline-flex;
float: left;
width: 0em;
baseline-shift: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}
.dot-leader span:first-child {
padding-right: 0.33em;
background: white;
}

This ought to allow us to use CSS to avoid putting dot leader characters
inside each of the second <span> elements.

Cheers.

Mark Harcourt

On Tue, Apr 13, 2021 at 1:48 PM Mark Harcourt < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
wrote:

> 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> <mailto: <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> <mailto: <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> <mailto: <EMAIL REMOVED> >
>> >
>> > "The only limitations in life are those we set for ourselves"
>> > =================================================>> >
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> On Behalf Of
>> Mark Harcourt
>> > Sent: Monday, April 12, 2021 1:46 PM
>> > To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <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> <mailto: <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> <mailto: <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<;http://webaim.org/discussion/archives>;
>> >>> >> >>>
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives<;http://webaim.org/discussion/archives>;
>> >> >> >>
>> >
>> >
>> > --
>> > LargePrefPlaceholder-XKUz1MEJBwkOM
>> > >> > >> archives at http://webaim.org/discussion/archives<;http://webaim.org/discussion/archives>;
>> > >> >
>> > >> > >> > >> > >>
>> >> >> >> >>
>
>
> --
> LargePrefPlaceholder-XKUz1MEJBwkOM
>


--
LargePrefPlaceholder-XKUz1MEJBwkOM