E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: list-style:none on an Ordered list

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

From: Paul Collins
Date: Wed, May 16 2007 1:00PM
Subject: list-style:none on an Ordered list
No previous message | Next message →

Hi all,

I am building a numbered list where the designer has added the
numbers in as graphics. My thoughts were to create an <OL> and give it
the "list-style:none;" property. The add the graphics in as
backgrounds.

My question is, if I give the ordered list a style:none; property,
will screen reading applications still read the number out? Just
wondered if they react in a way similar to "display:none;"

Cheers
Paul

From: Tim Harshbarger
Date: Wed, May 16 2007 1:50PM
Subject: Re: list-style:none on an Ordered list
← Previous message | Next message →

I did a super quick test on an ordered list with 3 items with JAWS 8 and
WindowEyes 6 in IE 6.

If you set the list-style property on the ol element to none, JAWS and
WindowEyes will inform the user that there is a list with 3 items, but
will not read numbers for each of the items.

If you set the list-style property for the li element to none, JAWS will
both inform the user that there is a list with 3 items and read a number
for each item. WindowEyes act the same as when the property is set on
the ol element.

However, since the visible list contains numbers (as graphics,) I would
suggest that the information should be part of the accessible contents
and semantics of the page. Instead of making the graphics into a
background image, you may want to include them in the foreground with at
least some kind of alternative text description.

I would suggest refraining from placing any graphic in the background
unless it is an image the page does not need to convey its content or
serve its primary purpose. Come to think of it....I do not think I have
ever come across a graphic containing numbers that did not need either
an alternate text description or a longdesc.

Tim

From: mike.osborne@accease.com
Date: Wed, May 16 2007 2:30PM
Subject: Re: list-style:none on an Ordered list
← Previous message | Next message →

Does presenting the numbers as graphics have any utility other than
"looking nice"?

If you must have images why not place them at the start of each item with
alt text of the number e.g. "number 1", "number 2", ... with
list-type:none;

That will also help users who turn images off. The "alt text" information
will not be available if you use backgound images and images are off.

You may solve this "problem" for your screen reader users - but your
low-vision users who rely on browser magnification will not be catered
for.

Cheers
Mike

> Hi all,
>
> I am building a numbered list where the designer has added the
> numbers in as graphics. My thoughts were to create an <OL> and give it
> the "list-style:none;" property. The add the graphics in as
> backgrounds.
>
> My question is, if I give the ordered list a style:none; property,
> will screen reading applications still read the number out? Just
> wondered if they react in a way similar to "display:none;"
>
> Cheers
> Paul
>

From: Keith Parks
Date: Wed, May 16 2007 3:40PM
Subject: Re: list-style:none on an Ordered list
← Previous message | Next message →

On May 16, 2007, at 1:28 PM, = EMAIL ADDRESS REMOVED = wrote:

> You may solve this "problem" for your screen reader users - but your
> low-vision users who rely on browser magnification will not be catered
> for.

There is a way around this issue.

For your number images, start with oversize jpeg files, say 2 or 3
times as large as you want them to show up. Then instead of sizing
them in pixels, spec the image size in EMs. That way if a user bumps
up the text size, the images will resize too. Since they are oversize
to start with, they can get pretty big before they get pixely.

It's slightly inefficient in theory, since you're sending images
larger than necessary for most users. But I wouldn't think it a
significant problem.

I think the concept is sound, though I only tested it in Safari and
Mac Firefox.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444

(619) 594-1046

mailto: = EMAIL ADDRESS REMOVED =
http://www.keithparks.com
http://www.sa.sdsu.edu/communications
----------------------------------------------------------

A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.

From: Paul Collins
Date: Thu, May 17 2007 4:20AM
Subject: Re: list-style:none on an Ordered list
← Previous message | Next message →

Oh and it does seem to work in all PC browsers I'm testing for; IE5.0+
and Firefox 1.0+ and Opera 9.0

It's pretty basic stuff anyway, so I'm guessing it will work on Mac
when I come to testing it.

Cheers

On 17/05/07, Paul Collins < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for your detailed advice everyone, I have taken it onboard and
> done what you said. It is a bit more mark-up than using CSS to add
> them, but then; there are less styles to add now as I don't need one
> for each bullet and it's more Accessible; which is the main thing.
> Here is and example of my code now...
>
> CSS
> ul#skillDescription li img {float:left; margin:0 5px 0 -17px;
> width:1.2em; height:1.2em;}
>
> HTML
> <li>
> <img src="images/bullet01.gif" alt="Step 1" title="Step 1"/>
> 
> Explanation of the skill Lorem ipsum dolor sit amet,
> consetetur sadipscing elitrSed diam nonumy eirmodorem
> ipsum dolor sit amet, consetetur sadipscing elitr.
> 
> </li>
>
>
>
> On 16/05/07, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > On May 16, 2007, at 1:28 PM, = EMAIL ADDRESS REMOVED = wrote:
> >
> > > You may solve this "problem" for your screen reader users - but your
> > > low-vision users who rely on browser magnification will not be catered
> > > for.
> >
> > There is a way around this issue.
> >
> > For your number images, start with oversize jpeg files, say 2 or 3
> > times as large as you want them to show up. Then instead of sizing
> > them in pixels, spec the image size in EMs. That way if a user bumps
> > up the text size, the images will resize too. Since they are oversize
> > to start with, they can get pretty big before they get pixely.
> >
> > It's slightly inefficient in theory, since you're sending images
> > larger than necessary for most users. But I wouldn't think it a
> > significant problem.
> >
> > I think the concept is sound, though I only tested it in Safari and
> > Mac Firefox.
> >
> > ******************************
> > Keith Parks
> > Graphic Designer/Web Designer
> > Student Affairs Communications Services
> > San Diego State University
> > San Diego, CA 92182-7444
> >
> > (619) 594-1046
> >
> > mailto: = EMAIL ADDRESS REMOVED =
> > http://www.keithparks.com
> > http://www.sa.sdsu.edu/communications
> > ----------------------------------------------------------
> >
> > A riddle wrapped in a mystery inside an enigma, served with a side of
> > slaw.
> >
> >
> >

From: Paul Collins
Date: Thu, May 17 2007 4:30AM
Subject: Re: list-style:none on an Ordered list
← Previous message | Next message →

Thanks for your detailed advice everyone, I have taken it onboard and
done what you said. It is a bit more mark-up than using CSS to add
them, but then; there are less styles to add now as I don't need one
for each bullet and it's more Accessible; which is the main thing.
Here is and example of my code now...

CSS
ul#skillDescription li img {float:left; margin:0 5px 0 -17px;
width:1.2em; height:1.2em;}

HTML
<li>
<img src="images/bullet01.gif" alt="Step 1" title="Step 1"/>

Explanation of the skill Lorem ipsum dolor sit amet,
consetetur sadipscing elitrSed diam nonumy eirmodorem
ipsum dolor sit amet, consetetur sadipscing elitr.

</li>

On 16/05/07, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>
> On May 16, 2007, at 1:28 PM, = EMAIL ADDRESS REMOVED = wrote:
>
> > You may solve this "problem" for your screen reader users - but your
> > low-vision users who rely on browser magnification will not be catered
> > for.
>
> There is a way around this issue.
>
> For your number images, start with oversize jpeg files, say 2 or 3
> times as large as you want them to show up. Then instead of sizing
> them in pixels, spec the image size in EMs. That way if a user bumps
> up the text size, the images will resize too. Since they are oversize
> to start with, they can get pretty big before they get pixely.
>
> It's slightly inefficient in theory, since you're sending images
> larger than necessary for most users. But I wouldn't think it a
> significant problem.
>
> I think the concept is sound, though I only tested it in Safari and
> Mac Firefox.
>
> ******************************
> Keith Parks
> Graphic Designer/Web Designer
> Student Affairs Communications Services
> San Diego State University
> San Diego, CA 92182-7444
>
> (619) 594-1046
>
> mailto: = EMAIL ADDRESS REMOVED =
> http://www.keithparks.com
> http://www.sa.sdsu.edu/communications
> ----------------------------------------------------------
>
> A riddle wrapped in a mystery inside an enigma, served with a side of
> slaw.
>
>
>

From: Paul Collins
Date: Thu, May 17 2007 8:00AM
Subject: Re: list-style:none on an Ordered list
← Previous message | No next message

Hi all, a sort of follow up to this...

I got carried away and have started to go through my site and make all
textual graphics an em height and width so they are expandable.

The way I have always done it before is to add textual graphics in as
backgrounds using CSS, with the text underneath for when you turn
images off and CSS on:

<dd class="replace" title="home">Home</dd>

I had been told in the past that if you add the title, people who use
a "zoom text" to enlarge it.

Now, with this new method, the actual images are in the HTML code,
which can look a bit clunkier. I was also thinking though, what about
people who disable Stylesheets, what about mobile phone users? If they
disable the stylesheet, the titles will still appear as graphics,
which won't be enlargeable now. With the old way they would purely get
a textual site, which could be enlarged.

So by doing this, am I creating one problem while solving another,
what do you think?!

Cheers

On 17/05/07, Paul Collins < = EMAIL ADDRESS REMOVED = > wrote:
> Oh and it does seem to work in all PC browsers I'm testing for; IE5.0+
> and Firefox 1.0+ and Opera 9.0
>
> It's pretty basic stuff anyway, so I'm guessing it will work on Mac
> when I come to testing it.
>
> Cheers
>
> On 17/05/07, Paul Collins < = EMAIL ADDRESS REMOVED = > wrote:
> > Thanks for your detailed advice everyone, I have taken it onboard and
> > done what you said. It is a bit more mark-up than using CSS to add
> > them, but then; there are less styles to add now as I don't need one
> > for each bullet and it's more Accessible; which is the main thing.
> > Here is and example of my code now...
> >
> > CSS
> > ul#skillDescription li img {float:left; margin:0 5px 0 -17px;
> > width:1.2em; height:1.2em;}
> >
> > HTML
> > <li>
> > <img src="images/bullet01.gif" alt="Step 1" title="Step 1"/>
> > 
> > Explanation of the skill Lorem ipsum dolor sit amet,
> > consetetur sadipscing elitrSed diam nonumy eirmodorem
> > ipsum dolor sit amet, consetetur sadipscing elitr.
> > 
> > </li>
> >
> >
> >
> > On 16/05/07, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
> > >
> > > On May 16, 2007, at 1:28 PM, = EMAIL ADDRESS REMOVED = wrote:
> > >
> > > > You may solve this "problem" for your screen reader users - but your
> > > > low-vision users who rely on browser magnification will not be catered
> > > > for.
> > >
> > > There is a way around this issue.
> > >
> > > For your number images, start with oversize jpeg files, say 2 or 3
> > > times as large as you want them to show up. Then instead of sizing
> > > them in pixels, spec the image size in EMs. That way if a user bumps
> > > up the text size, the images will resize too. Since they are oversize
> > > to start with, they can get pretty big before they get pixely.
> > >
> > > It's slightly inefficient in theory, since you're sending images
> > > larger than necessary for most users. But I wouldn't think it a
> > > significant problem.
> > >
> > > I think the concept is sound, though I only tested it in Safari and
> > > Mac Firefox.
> > >
> > > ******************************
> > > Keith Parks
> > > Graphic Designer/Web Designer
> > > Student Affairs Communications Services
> > > San Diego State University
> > > San Diego, CA 92182-7444
> > >
> > > (619) 594-1046
> > >
> > > mailto: = EMAIL ADDRESS REMOVED =
> > > http://www.keithparks.com
> > > http://www.sa.sdsu.edu/communications
> > > ----------------------------------------------------------
> > >
> > > A riddle wrapped in a mystery inside an enigma, served with a side of
> > > slaw.
> > >
> > >
> > >