E-mail List Archives
Thread: To "Bullet" or not to "Bullet", that is the question
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
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
>
>
>
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
>>
>>
>>
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.