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