WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Paul J. Adam
Date: Jun 5, 2014 1:55PM

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 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 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 REMOVED>
>> [mailto: <EMAIL 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 REMOVED>
>> >> >> >
> > >