WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dot Leaders Should Be Seen, but Not heard

for

From: Mark Harcourt
Date: Apr 14, 2021 9:59AM

Thank you, Daniel, for your suggestion. As I meant to suggest earlier, I am
(at best) an amateur at CSS. I tried several variations of your suggestion
to use CSS "border-bottom: dotted;" instead of the CSS "content"
using periods, but I could not figure out how to make it display. This is
more likely due to my inexperience than it is likely to be something
incompatible in the CSS file that I am seeking to modify.

Cheers.

Mark Harcourt

On Wed, Apr 14, 2021 at 11:29 AM Mark Harcourt < <EMAIL REMOVED> >
wrote:

> Thank you for your rapid reply. My inexperience led me to choose "role" as
> an attribute name. I am just seeking a convenient handle to use in the CSS
> selector that I coded for this: .dot-leader span[role="dot-leaders"]:after
>
> Please suggest a better attribute name that will not hijack the span
> element.
>
> Cheers.
>
> Mark Harcourt
>
> On Wed, Apr 14, 2021 at 11:24 AM JP Jamous < <EMAIL REMOVED> > wrote:
>
>> 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
>> >> >> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>
>
> --
> LargePrefPlaceholder-XKUz1MEJBwkOM
>


--
LargePrefPlaceholder-XKUz1MEJBwkOM