WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: To "Bullet" or not to "Bullet", that is the question

for

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

From: Druckman,Geri
Date: Thu, Jun 05 2014 1:04PM
Subject: To "Bullet" or not to "Bullet", that is the question
No previous message | Next message →

Many are using un-ordered lists for navigation menu items. Many times there are more than 1 or 2 navigation regions, and here is where my question starts…

Using the basic “set up”, represented below:
<div role=“navigation”>
<ul>
<li>menu link</li>
<li>menu link</li>
<li>menu link</li>
</ul>
</div>

The above will be read as “Navigation region. List of three items. Bullet menu link. Bullet menu link. Bullet menu link. Navigation region end”. At least this is how it would be read by JAWS.

How important is it to have/hear the “List of three items. Bullet … Bullet … Bullet …” ?

OR

What if I add to the <ul> tag and create <ul role=“presentation”> ???
Now JAWS will read it “Navigation region. Menu link. Menu link. Menu link. Menu link.Navigation region end”.

To me the latter sounds much cleaner, and to the point. What is your opinion?


Geri Druckman

Web Development Specialist - Accessibility

Department of Internet Services

MD Anderson Cancer Center

T 713-792-6293 | F 713-745-8134

From: Jared Smith
Date: Thu, Jun 05 2014 1:20PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:

> To me the latter sounds much cleaner, and to the point. What is your opinion?

I think there is some benefit to the user knowing that it is a list of
items and how many items are present (knowing there are 3 items as
opposed to 21 might influence if/how the user navigates or listens to
them). But there's really not a notable difference between either
approache.

Jared

From: Stores, Mary A.
Date: Thu, Jun 05 2014 1:27PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

Hello,

I believe most screen reader users are accustomed to hearing bullets in list items. However, if you really don't like them, I believe they can be removed using CSS. Jared is also correct when he says it's good to know how many items are in a list and how they relate to each other.

Mary


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Thursday, June 05, 2014 3:20 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] To "Bullet" or not to "Bullet", that is the question

On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:

> To me the latter sounds much cleaner, and to the point. What is your opinion?

I think there is some benefit to the user knowing that it is a list of items and how many items are present (knowing there are 3 items as opposed to 21 might influence if/how the user navigates or listens to them). But there's really not a notable difference between either approache.

Jared

From: Druckman,Geri
Date: Thu, Jun 05 2014 1:46PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

Mary, that is correct. In the CSS I can use list-style-type: none; and
then add a class to each <li> tag (adding it to the <ul> tag messes up
some screen readers).

Jared, that is true if the list is relatively short. I have a page
template than has several navigation ³strips² in the same area. First has
6 links, the second has 7 links, then 2 more (that can expandŠ), and last
but not least another expandable 5Š That¹s A LOT of ³Bullet²!

Now, and I¹m just thinking out loud here, after the first 5-8 ³Bullet²
(since they are not numbered), if a screen reader user moves back and
forth you won¹t really remember where exactly on the list you are at.

You do know you are inside a navigation region, and you will be notified
when you have left that region, so while within role=³navigation² it¹s all
navigation links of sorts, and what we are accustomed to hearing can
change, as long as we still get the correct information in a clear way.

Though is role=³presentation² a valid use of this role, for that purpose?

Geri Druckman
Web Development Specialist - Accessibility
Department of Internet Services
MD Anderson Cancer Center
T 713-792-6293 | F 713-745-8134

PS.

Once upon a time we used to see a mailbox with an envelope ³flying² in and
we knew that¹s the email link, now we know the same when we see ³@³ :)




On 6/5/14, 2:27 PM, "Stores, Mary A." < = EMAIL ADDRESS REMOVED = > wrote:

>Hello,
>
>I believe most screen reader users are accustomed to hearing bullets in
>list items. However, if you really don't like them, I believe they can be
>removed using CSS. Jared is also correct when he says it's good to know
>how many items are in a list and how they relate to each other.
>
>Mary
>
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
>Sent: Thursday, June 05, 2014 3:20 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] To "Bullet" or not to "Bullet", that is the question
>
>On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:
>
>> To me the latter sounds much cleaner, and to the point. What is your
>>opinion?
>
>I think there is some benefit to the user knowing that it is a list of
>items and how many items are present (knowing there are 3 items as
>opposed to 21 might influence if/how the user navigates or listens to
>them). But there's really not a notable difference between either
>approache.
>
>Jared
>>>messages to = EMAIL ADDRESS REMOVED =
>>>

From: Jon Avila
Date: Thu, Jun 05 2014 2:09PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

I personally think adding list structure to items that don't appear as a list can be counter productive. It adds a lot of extra speech for screen reader users. With the nav element and role we have a better way to group links. Authors jumped on this trend and many times the trade off on extra speech is not worth the benefit e.g. I see lists with one two and three items in them and I see many horizontal lists. VoiceOver for me on iOS has a bug where read to the end will stop on bullets which can be frustrating.

Jonathan

> On Jun 5, 2014, at 3:57 PM, Pratik Patel < = EMAIL ADDRESS REMOVED = > wrote:
>
> You can choose to remove the bullets by using css. I would still recommend keeping the semantic meaning of the list so that the user gets the benefit of knowing the number of items in a menu. In many ways, this follows convention that the user is used to on desktop apps.
>
> Regards,
>
> Pratik
>
>
> Pratik Patel
> Founder and CEO, EZFire
> T: 888-320-2921
>
> Please support our crowd funding campaign to develop comprehensive accessibility training. Visit http://tinyurl.com/a11ytv
>
> Sent from my iPhone
>
> On Jun 5, 2014, at 3:20 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
> On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:
>
>> To me the latter sounds much cleaner, and to the point. What is your opinion?
>
> I think there is some benefit to the user knowing that it is a list of
> items and how many items are present (knowing there are 3 items as
> opposed to 21 might influence if/how the user navigates or listens to
> them). But there's really not a notable difference between either
> approache.
>
> Jared
> > > > > >

From: Pratik Patel
Date: Thu, Jun 05 2014 1:57PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

You can choose to remove the bullets by using css. I would still recommend keeping the semantic meaning of the list so that the user gets the benefit of knowing the number of items in a menu. In many ways, this follows convention that the user is used to on desktop apps.

Regards,

Pratik


Pratik Patel
Founder and CEO, EZFire
T: 888-320-2921

Please support our crowd funding campaign to develop comprehensive accessibility training. Visit http://tinyurl.com/a11ytv

Sent from my iPhone

On Jun 5, 2014, at 3:20 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:

> To me the latter sounds much cleaner, and to the point. What is your opinion?

I think there is some benefit to the user knowing that it is a list of
items and how many items are present (knowing there are 3 items as
opposed to 21 might influence if/how the user navigates or listens to
them). But there's really not a notable difference between either
approache.

Jared

From: Paul J. Adam
Date: Thu, Jun 05 2014 1:55PM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | Next message →

The correct way to do it is to remove the bullets via CSS and they won't speak to VoiceOver.

You can target an id of the UL and then style its LI's without needing a class name for each LI. Or just use the role=navigation as your CSS hook.

I think that would be an incorrect usage of role=presentation because this is still a list of items and LI seems to be the appropriate role vs <div> or <span>

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 5, 2014, at 2:46 PM, Druckman,Geri < = EMAIL ADDRESS REMOVED = > wrote:

> Mary, that is correct. In the CSS I can use list-style-type: none; and
> then add a class to each <li> tag (adding it to the <ul> tag messes up
> some screen readers).
>
> Jared, that is true if the list is relatively short. I have a page
> template than has several navigation ³strips² in the same area. First has
> 6 links, the second has 7 links, then 2 more (that can expandŠ), and last
> but not least another expandable 5Š That¹s A LOT of ³Bullet²!
>
> Now, and I¹m just thinking out loud here, after the first 5-8 ³Bullet²
> (since they are not numbered), if a screen reader user moves back and
> forth you won¹t really remember where exactly on the list you are at.
>
> You do know you are inside a navigation region, and you will be notified
> when you have left that region, so while within role=³navigation² it¹s all
> navigation links of sorts, and what we are accustomed to hearing can
> change, as long as we still get the correct information in a clear way.
>
> Though is role=³presentation² a valid use of this role, for that purpose?
>
> Geri Druckman
> Web Development Specialist - Accessibility
> Department of Internet Services
> MD Anderson Cancer Center
> T 713-792-6293 | F 713-745-8134
>
> PS.
>
> Once upon a time we used to see a mailbox with an envelope ³flying² in and
> we knew that¹s the email link, now we know the same when we see ³@³ :)
>
>
>
>
> On 6/5/14, 2:27 PM, "Stores, Mary A." < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hello,
>>
>> I believe most screen reader users are accustomed to hearing bullets in
>> list items. However, if you really don't like them, I believe they can be
>> removed using CSS. Jared is also correct when he says it's good to know
>> how many items are in a list and how they relate to each other.
>>
>> Mary
>>
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
>> Sent: Thursday, June 05, 2014 3:20 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] To "Bullet" or not to "Bullet", that is the question
>>
>> On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:
>>
>>> To me the latter sounds much cleaner, and to the point. What is your
>>> opinion?
>>
>> I think there is some benefit to the user knowing that it is a list of
>> items and how many items are present (knowing there are 3 items as
>> opposed to 21 might influence if/how the user navigates or listens to
>> them). But there's really not a notable difference between either
>> approache.
>>
>> Jared
>> >> >> messages to = EMAIL ADDRESS REMOVED =
>> >> >> >
> > >

From: Liko, Todd
Date: Fri, Jun 06 2014 6:14AM
Subject: Re: To "Bullet" or not to "Bullet", that is the question
← Previous message | No next message

On our website, we have lists that appear horizontally. Granted, in appearance, they do not look like lists, but semantically they are lists.

I lean to the side they should be coded as lists. Whether it is a table of contents or a menu, it is still a list of items and as a few have already mentioned, it is useful to know how many items are in the list.

Todd.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jon Avila
Sent: Thursday, June 05, 2014 4:09 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] To "Bullet" or not to "Bullet", that is the question

I personally think adding list structure to items that don't appear as a list can be counter productive. It adds a lot of extra speech for screen reader users. With the nav element and role we have a better way to group links. Authors jumped on this trend and many times the trade off on extra speech is not worth the benefit e.g. I see lists with one two and three items in them and I see many horizontal lists. VoiceOver for me on iOS has a bug where read to the end will stop on bullets which can be frustrating.

Jonathan

> On Jun 5, 2014, at 3:57 PM, Pratik Patel < = EMAIL ADDRESS REMOVED = > wrote:
>
> You can choose to remove the bullets by using css. I would still recommend keeping the semantic meaning of the list so that the user gets the benefit of knowing the number of items in a menu. In many ways, this follows convention that the user is used to on desktop apps.
>
> Regards,
>
> Pratik
>
>
> Pratik Patel
> Founder and CEO, EZFire
> T: 888-320-2921
>
> Please support our crowd funding campaign to develop comprehensive
> accessibility training. Visit http://tinyurl.com/a11ytv
>
> Sent from my iPhone
>
> On Jun 5, 2014, at 3:20 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
> On Thu, Jun 5, 2014 at 1:04 PM, Druckman,Geri wrote:
>
>> To me the latter sounds much cleaner, and to the point. What is your opinion?
>
> I think there is some benefit to the user knowing that it is a list of
> items and how many items are present (knowing there are 3 items as
> opposed to 21 might influence if/how the user navigates or listens to
> them). But there's really not a notable difference between either
> approache.
>
> Jared
> > > list messages to = EMAIL ADDRESS REMOVED =
> > > list messages to = EMAIL ADDRESS REMOVED =