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 8:54AM

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