WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: jeffgutsell@fuse.net
Date: Apr 14, 2021 10:37AM

-----There are some UTF-8 characters that may work.
I tried testing the dot leader character and JAWS does not speak it.
I inserted it in a test page with the decimal notation as "․"
You can look up other characters in the typographical section of UTF-8 at: https://www.w3schools.com/charsets/ref_utf_punctuation.asp
Of course, your web page must be created with UTF-8 encoding.

Jeff Gutsell

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of JP Jamous
Sent: Wednesday, April 14, 2021 11:25 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Dot Leaders Should Be Seen, but Not heard

Mark,

Why did you choose to use a role attribute on the span? role="dot-leaders"

1. This is not necessary and violates one of the 2 main principles of ARIA. The role here serves no purpose, because you hid the span from assistive technologies. Automated tools such as Axe or Wave, might call that as a warning, because you are hijacking the span element.
2. The role attribute has specific values that it uses. "dot-leaders" is not one of them that I am aware of. If you are using this as a CSS class, then you are implementing the role value incorrectly.

Those are the only concerns I have noticed by reading quickly through your markup.





=================================================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: Wednesday, April 14, 2021 9: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> >
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> >
> 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> > 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
>> > >> > >> archives at http://webaim.org/discussion/archives
>> > >> >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> LargePrefPlaceholder-XKUz1MEJBwkOM
>


--
LargePrefPlaceholder-XKUz1MEJBwkOM