E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Dot Leaders Should Be Seen, but Not heard

Number of posts in this thread: 14 (In chronological order)

From: Mark Harcourt
Date: Mon, Apr 12 2021 8:45AM
Subject: Dot Leaders Should Be Seen, but Not heard
No previous message | Next message →

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;"
>UTILITY F/W AIRCRAFT</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

From: glen walker
Date: Mon, Apr 12 2021 10:30AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS 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;"
> >UTILITY F/W AIRCRAFT</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
> > > > >

From: JP Jamous
Date: Mon, Apr 12 2021 12:37PM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

In addition to Glen's great feedback, it is important to understand that every screen reader handles non-alphanumeric characters differently. For example, JAWS by default announces the first 3 characters and omits the rest. So you only hear, "---" when the screen shows "--------------------".

While you cannot control how screen readers announce your content, Glen is correct about hiding that from screen reader users. Some users or developers do not like that, but it is a double-edged sword. You have to pick either this or that.

Personally, I do not care for those visual contents as long as I am reading web pages. If I am doing Word editing, I change my screen reader settings to ensure the visual presentation is being conveyed properly. So if you are concerned about how it would be announced, I'd suggest to silence it or hide it. Your users who are browsing just want the content that allows them to make a decision.

=================================================Jean-Pierre Jamous
Principal Digital Accessibility Engineer
Jepelsy LLC

W: (952) 666-2930
M: (952) 666-2930
= EMAIL ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
=================================================

From: Mark Harcourt
Date: Mon, Apr 12 2021 12:46PM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 container
will not work. In the example I supplied previously, modifying this:
UTILITY F/W AIRCRAFT
to this:
UTILITY F/W AIRCRAFT
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 ADDRESS 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 ADDRESS 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;"
> > >UTILITY F/W AIRCRAFT</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
> > > > > > > > > >
> > > > >

--
LargePrefPlaceholder-XKUz1MEJBwkOM

From: Mark Harcourt
Date: Mon, Apr 12 2021 12:54PM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

Thank you, Jean-Pierre. I am very new to the world of accessibility and I
appreciate your being patient with what might seem to be basic questions.
Fortunately, my father taught me at an early age that the only foolish
questions are those that don't get asked. So I've never been one fearful of
asking questions that reveal my ignorance.

I agree with you that dot leaders are a visual cue that is meaningless for
screen reader agents. I'm seeking to have the cake and eat it too. Does
that makes me arrogant? I hope not. :) Regardless, I thank you again very
much.

Cheers.

Mark Harcourt

On Mon, Apr 12, 2021 at 2:37 PM JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:

> In addition to Glen's great feedback, it is important to understand that
> every screen reader handles non-alphanumeric characters differently. For
> example, JAWS by default announces the first 3 characters and omits the
> rest. So you only hear, "---" when the screen shows "--------------------".
>
> While you cannot control how screen readers announce your content, Glen is
> correct about hiding that from screen reader users. Some users or
> developers do not like that, but it is a double-edged sword. You have to
> pick either this or that.
>
> Personally, I do not care for those visual contents as long as I am
> reading web pages. If I am doing Word editing, I change my screen reader
> settings to ensure the visual presentation is being conveyed properly. So
> if you are concerned about how it would be announced, I'd suggest to
> silence it or hide it. Your users who are browsing just want the content
> that allows them to make a decision.
>
>
>
>
>
> =================================================> Jean-Pierre Jamous
> Principal Digital Accessibility Engineer
> Jepelsy LLC
>
> W: (952) 666-2930
> M: (952) 666-2930
> = EMAIL ADDRESS REMOVED =
>
> "The only limitations in life are those we set for ourselves"
> =================================================>
>
>

From: JP Jamous
Date: Mon, Apr 12 2021 12:56PM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

Mark,

You can use a span with aria-hidden="true" that holds the leaders, which would fall within the parent span. Example:

Chapter 1

------------------------------

Page 5

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 ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
=================================================

From: Jonathan Cohn
Date: Tue, Apr 13 2021 6:43AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
>
> Mark,
>
> You can use a span with aria-hidden="true" that holds the leaders, which would fall within the parent span. Example:
> 
> Chapter 1
> 
> ------------------------------
> 
> Page 5
> 
> 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 ADDRESS REMOVED =
>
> "The only limitations in life are those we set for ourselves"
> =================================================>
>
>

From: Mark Harcourt
Date: Tue, Apr 13 2021 11:48AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > wrote:
> >
> > Mark,
> >
> > You can use a span with aria-hidden="true" that holds the leaders, which
> would fall within the parent span. Example:
> > 
> > Chapter 1
> > 
> > ------------------------------
> > 
> > Page 5
> > 
> > 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 ADDRESS REMOVED =
> >
> > "The only limitations in life are those we set for ourselves"
> > =================================================> >
> >
> >

From: Mark Harcourt
Date: Wed, Apr 14 2021 8:54AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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;"
>UTILITY F/W AIRCRAFT</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 elements.

Cheers.

Mark Harcourt

On Tue, Apr 13, 2021 at 1:48 PM Mark Harcourt < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > wrote:
>> >
>> > Mark,
>> >
>> > You can use a span with aria-hidden="true" that holds the leaders,
>> which would fall within the parent span. Example:
>> > 
>> > Chapter 1
>> > 
>> > ------------------------------
>> > 
>> > Page 5
>> > 
>> > 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 ADDRESS REMOVED =
>> >
>> > "The only limitations in life are those we set for ourselves"
>> > =================================================>> >
>> >
>> >

From: JP Jamous
Date: Wed, Apr 14 2021 9:24AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
=================================================

From: Swift, Daniel P.
Date: Wed, Apr 14 2021 9:27AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Mark Harcourt
Sent: Wednesday, April 14, 2021 10:55 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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;"
>UTILITY F/W AIRCRAFT</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 elements.

Cheers.

Mark Harcourt

On Tue, Apr 13, 2021 at 1:48 PM Mark Harcourt < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>> >
>> > Mark,
>> >
>> > You can use a span with aria-hidden="true" that holds the leaders,
>> which would fall within the parent span. Example:
>> > 
>> > Chapter 1
>> > 
>> > ------------------------------
>> > 
>> > Page 5
>> > 
>> > 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> >
>> > "The only limitations in life are those we set for ourselves"
>> > =================================================>> >
>> >
>> >

From: Mark Harcourt
Date: Wed, Apr 14 2021 9:29AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>
> "The only limitations in life are those we set for ourselves"
> =================================================>
>
>

From: Mark Harcourt
Date: Wed, Apr 14 2021 9:59AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>
>> "The only limitations in life are those we set for ourselves"
>> =================================================>>
>>
>>

From: jeffgutsell
Date: Wed, Apr 14 2021 10:37AM
Subject: Re: Dot Leaders Should Be Seen, but Not heard
← Previous message | No next message

-----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 ADDRESS REMOVED = > On Behalf Of JP Jamous
Sent: Wednesday, April 14, 2021 11:25 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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 ADDRESS REMOVED =

"The only limitations in life are those we set for ourselves"
=================================================