WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: list-style:none on an Ordered list

for

From: Paul Collins
Date: May 17, 2007 4:30AM

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"/>
<span>
Explanation of the skill Lorem ipsum dolor sit amet,
consetetur sadipscing elitrSed diam nonumy eirmodorem
ipsum dolor sit amet, consetetur sadipscing elitr.
</span>
</li>



On 16/05/07, Keith Parks < <EMAIL REMOVED> > wrote:
>
> On May 16, 2007, at 1:28 PM, <EMAIL 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 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.
>
>
>