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 8:00AM

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"><em></em>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 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 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"/>
> > <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.
> > >
> > >
> > >