E-mail List Archives
Thread: how is list-style-type:none communicated to screen reader?
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.
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.
>
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.
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
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>