WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: how is list-style-type:none communicated to screen reader?

for

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

From: Angela French
Date: Tue, Oct 30 2012 11:28AM
Subject: how is list-style-type:none communicated to screen reader?
No previous message | Next message →

Can someone please tell me how a list item is communicated (read aloud) to a screen reader user when list-style-type:none; has been set in the CSS?

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/

From: Jared Smith
Date: Tue, Oct 30 2012 11:39AM
Subject: Re: how is list-style-type:none communicated to screen reader?
← Previous message | Next message →

CSS list-style-type has no impact on screen reader accessibility. The
screen reader will read the list type based on the markup - either as
an ordered or an unordered list.

Jared

From: Angela French
Date: Tue, Oct 30 2012 12:11PM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | Next message →

>CSS list-style-type has no impact on screen reader accessibility. The screen
>reader will read the list type based on the markup - either as an ordered or
>an unordered list.
>
>Jared

Jared - I'm working on coming up with an accessible means of creating footnotes. I want the list item number to link back to the original reference to the footnote. Since I can't apply a hyperlink to the list item number itself, I was thinking of styling it with list-item-style:none, then inserting the number as content into the <li> text. It seemed to be the correct thing to do semantically to make my footnotes into a list. But perhaps I would be creating a burdensome redundancy for screen readers if I did that?

<ol>
<li><a href="#fn1">1</a> Text here</li>
</ol>

From: Jared Smith
Date: Tue, Oct 30 2012 12:21PM
Subject: Re: how is list-style-type:none communicated to screen reader?
← Previous message | Next message →

On Tue, Oct 30, 2012 at 12:11 PM, Angela French wrote:

> I want the list item number to link back to the original reference to the footnote. Since I can't apply a hyperlink to the list item number itself, I was thinking of styling it with list-item-style:none, then inserting the number as content into the <li> text.

I think this approach works well. Depending on how it is accessed it
could cause a bit of redundancy, but I'm not sure how else you could
get this functionality. The small amount of potential redundancy would
have less of an impact than simply omitting the list altogether.

Jared

From: Angela French
Date: Tue, Oct 30 2012 12:30PM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | Next message →

>
>On Tue, Oct 30, 2012 at 12:11 PM, Angela French wrote:
>
>> I want the list item number to link back to the original reference to the
>footnote. Since I can't apply a hyperlink to the list item number itself, I was
>thinking of styling it with list-item-style:none, then inserting the number as
>content into the <li> text.
>
>I think this approach works well. Depending on how it is accessed it could
>cause a bit of redundancy, but I'm not sure how else you could get this
>functionality. The small amount of potential redundancy would have less of
>an impact than simply omitting the list altogether.
>
>Jared
>

Jared - the part I don't like about my idea is that the link back up to the main content comes BEFORE it is read by the screen reader, not at the end of the footnote. But the convention for footnotes is to put that number before the note. I suppose I could put another link at the end of the note - perhaps hide it off screen from sited users.

From: Léonie Watson
Date: Wed, Oct 31 2012 2:35AM
Subject: Re: how is list-style-type:none communicated to screen reader?
← Previous message | Next message →

Angela French asked:
"Can someone please tell me how a list item is communicated (read aloud) to
a screen reader user when list-style-type:none; has been set in the CSS?"

With NVDA and Jaws the list (and number of list items) is reported as usual,
but the list items are treated differently.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Jaws for example reports the items in the above list as "Bullet, Item 1" and
"Bullet, Item 2". If you apply list-style-type: none; to the list, Jaws
simply reports "Item 1" and "Item 2".

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

The same thing applies to ordered lists. Jaws reports the items from the
above list as "1, Item 1" and "2, Item 2". With list-style-type: none;
applied, Jaws doesn't acknowledge the numbering and reports "Item 1" and
"Item 2".

Léonie.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 30 October 2012 17:29
To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
Subject: [WebAIM] how is list-style-type:none communicated to screen reader?

Can someone please tell me how a list item is communicated (read aloud) to a
screen reader user when list-style-type:none; has been set in the CSS?

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/

messages to = EMAIL ADDRESS REMOVED =

From: Jared Smith
Date: Wed, Oct 31 2012 8:29AM
Subject: Re: how is list-style-type:none communicated to screen reader?
← Previous message | Next message →

Léonie-

Thank you for the additional information and for correcting my
previous statement. This behavior in JAWS is not something I had
previously realized. I just tested in VoiceOver and the behavior is
identical to JAWS.

I'll add this to my list of the few instances where CSS affects screen
reader behavior.

Jared

From: Angela French
Date: Wed, Oct 31 2012 9:23AM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | Next message →

Awesome. That's exactly what I was looking for.

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Léonie Watson
>Sent: Wednesday, October 31, 2012 1:36 AM
>To: 'WebAIM Discussion List'
>Subject: Re: [WebAIM] how is list-style-type:none communicated to screen
>reader?
>
>Angela French asked:
>"Can someone please tell me how a list item is communicated (read aloud)
>to a screen reader user when list-style-type:none; has been set in the CSS?"
>
>With NVDA and Jaws the list (and number of list items) is reported as usual,
>but the list items are treated differently.
>
><ul>
><li>Item 1</li>
><li>Item 2</li>
></ul>
>
>Jaws for example reports the items in the above list as "Bullet, Item 1" and
>"Bullet, Item 2". If you apply list-style-type: none; to the list, Jaws simply
>reports "Item 1" and "Item 2".
>
><ol>
><li>Item 1</li>
><li>Item 2</li>
></ol>
>
>The same thing applies to ordered lists. Jaws reports the items from the
>above list as "1, Item 1" and "2, Item 2". With list-style-type: none; applied,
>Jaws doesn't acknowledge the numbering and reports "Item 1" and "Item 2".
>
>Léonie.
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela
>French
>Sent: 30 October 2012 17:29
>To: 'WebAim Forum ( = EMAIL ADDRESS REMOVED = )'
>Subject: [WebAIM] how is list-style-type:none communicated to screen
>reader?
>
>Can someone please tell me how a list item is communicated (read aloud) to
>a screen reader user when list-style-type:none; has been set in the CSS?
>
>Thank you,
>
>Angela French
>Internet Specialist
>State Board for Community and Technical Colleges
>360-704-4316
> = EMAIL ADDRESS REMOVED =
>http://www.checkoutacollege.com/
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =

From: Angela French
Date: Wed, Oct 31 2012 9:35AM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | Next message →

>
>Thank you for the additional information and for correcting my previous
>statement. This behavior in JAWS is not something I had previously realized.
>I just tested in VoiceOver and the behavior is identical to JAWS.
>
>I'll add this to my list of the few instances where CSS affects screen reader
>behavior.
>
>Jared


Jared do you have that list published somewhere?

Angela French

From: Léonie Watson
Date: Wed, Oct 31 2012 9:40AM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | Next message →

Jared Smith wrote:
"Thank you for the additional information... This behavior in JAWS is not
something I had previously realized. I just tested in VoiceOver and the
behavior is identical to JAWS."

It's a behaviour that can be problematic, because it effectively converts an
ordered list into an unordered list. The sequential semantics are entirely
lost to screen readers.


Léonie.


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: 31 October 2012 14:29
To: WebAIM Discussion List
Subject: Re: [WebAIM] how is list-style-type:none communicated to screen
reader?

Léonie-

Thank you for the additional information and for correcting my previous
statement. This behavior in JAWS is not something I had previously realized.
I just tested in VoiceOver and the behavior is identical to JAWS.

I'll add this to my list of the few instances where CSS affects screen
reader behavior.

Jared
messages to = EMAIL ADDRESS REMOVED =

From: Angela French
Date: Wed, Oct 31 2012 9:53AM
Subject: Re: how is list-style-type:none communicated toscreenreader?
← Previous message | Next message →

>Jared Smith wrote:
>"Thank you for the additional information... This behavior in JAWS is not
>something I had previously realized. I just tested in VoiceOver and the
>behavior is identical to JAWS."
>
>It's a behaviour that can be problematic, because it effectively converts an
>ordered list into an unordered list. The sequential semantics are entirely lost
>to screen readers.
>
>
>Léonie.
>
>
Leonie - I would be interested to hear how my footnotes presented in the table linked to below preform:
http://sbctc.edu/college/_hr-benefits-connection-SBRP-PERS3NEW.aspx#comparison

Is it clearly conveyed that they are footnotes and can you get navigate between the table and the footnotes and back easily? I used an ordered list and styled it list-style-type:none and instead typed in the list item numbers so that I could style them and apply a link back to the table. While that is primarily for sighted users, I've also put a link back to the table at the end of each footnote, which is displayed off screen. I thought having the link back at the end of the footnote would make getting back easier for screen reader users. If that links doesn't add value I might as well remove it.

Angela French

From: Corbett, James
Date: Wed, Oct 31 2012 10:56AM
Subject: Re: how is list-style-type:none communicatedtoscreenreader?
← Previous message | Next message →

Hi:

Could someone post back to the list the entire thread of this message? I was just a bit to quick with the Delete key.

Jim

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: October 31, 2012 11:53 AM
To: ' = EMAIL ADDRESS REMOVED = '; 'WebAIM Discussion List'
Subject: Re: [WebAIM] how is list-style-type:none communicated to screen reader?



>Jared Smith wrote:
>"Thank you for the additional information... This behavior in JAWS is not
>something I had previously realized. I just tested in VoiceOver and the
>behavior is identical to JAWS."
>
>It's a behaviour that can be problematic, because it effectively converts an
>ordered list into an unordered list. The sequential semantics are entirely lost
>to screen readers.
>
>
>Léonie.
>
>
Leonie - I would be interested to hear how my footnotes presented in the table linked to below preform:
http://sbctc.edu/college/_hr-benefits-connection-SBRP-PERS3NEW.aspx#comparison

Is it clearly conveyed that they are footnotes and can you get navigate between the table and the footnotes and back easily? I used an ordered list and styled it list-style-type:none and instead typed in the list item numbers so that I could style them and apply a link back to the table. While that is primarily for sighted users, I've also put a link back to the table at the end of each footnote, which is displayed off screen. I thought having the link back at the end of the footnote would make getting back easier for screen reader users. If that links doesn't add value I might as well remove it.

Angela French

From: Jennifer Sutton
Date: Wed, Oct 31 2012 11:42AM
Subject: Re: thread for how is list-style-type:none communicatedtoscreenreader?
← Previous message | Next message →

Replying on list, in case others might find my approach valuable,

I'm thinking that maybe it'd be easier to use the link to the thread,
instead of resending 12 messages in a chain. The thread is this:

http://webaim.org/discussion/mail_thread?threadU79

I located it quickly by going here:

http://webaim.org/discussion/archives

and choosing "view recent threads."

Thanks, Jared, for making the list archives so very easy to use and search.

Jennifer

At 09:56 AM 10/31/2012, Corbett, James wrote:
>Hi:
>
>Could someone post back to the list the entire thread of this
>message? I was just a bit to quick with the Delete key.
>
>Jim

From: Nathalie Sequeira
Date: Thu, Nov 01 2012 4:42AM
Subject: Re: how is list-style-type:none communicated to screenreader?
← Previous message | No next message

Hello Angela,

reading through this thread a question arose for me:

is there a specific reason for opting for an ordered list in the first
place, and wouldn't a definition list serve the footnoting
functionality better anyways?

Like so:
<dl>
<dt><a href="#fn1">1</a></dt>
<dd>text here</dd>
[...]
</dl>
whereby it is easy to style the dt and dd to sit next to each other
nicely aligned over longer lists too.

AFAIK, screen readers would read these as "1 equals text here", and
would provide a semantically richer relationship between the 2 bits of
information a footnote contains?

Thanks,
Nathalie

Am 30.10.2012 19:11, schrieb Angela French:
> I'm working on coming up with an accessible means of creating
> footnotes. I want the list item number to link back to the original
> reference to the footnote. Since I can't apply a hyperlink to the list
> item number itself, I was thinking of styling it with
> list-item-style:none, then inserting the number as content into the
> <li> text. It seemed to be the correct thing to do semantically to
> make my footnotes into a list. But perhaps I would be creating a
> burdensome redundancy for screen readers if I did that? <ol> <li><a
> href="#fn1">1</a> Text here</li> </ol>