Meaningful bullet needing ALT attributes

[effennel]

Hello,

.li_pdf {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#000000;
  line-height:20px;
  font-size:12px;
  list-style-image:url(/images/icons/acrobat.gif);
  }

This class is used to style bullets in lists of hyperlinks. The icon (a little PDF logo) indicates to the users the type of document they are about to view.

Now when the CSS is not available/disabled, the document type also disapear, leaving imprtant information behind.

Is there anyways to specify an ALT attribute in a CSS file. If not, any workarounds?

Thanks
FnL

 

[Vragabond]

No way. But the question is, when is the stylesheet ever disabled? And what important information is left behind? As the last resort, title attribute is available for nearly all html elements, including list items. You could add title as a sort of a tooltip.

 

[Foamcow]

Perhaps you could use a definition list with the file name as the <dt> and the filetype image (with alt attribute) as the <dd>?

Like so:

<dl>
<dt><a href="downloadableFile.pdf" title="Download this PDF file">Semantic Markup guidelines</a></dt>
<dd><img src="pdfIcon.gif" alt="PDF file" /></dd>
</dl>

You'll note that I also used a title attribute on the link itself to identify what it actually is.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[BabyJeffy]

You could add in an "accessibility" class that sets display:none and wrap some text in a span with that class. When CSS is on, these spans will never display, when CSS is off they will show.

Here is an example:

<style type="text/css">
.accessibility { display:none; }
</style>
...
<ul>
  <li class="li_pdf">
    <a href="pdf/financialQ3.pdf" title="Click for the Financials Q3 document in PDF file format">Financials Q3.pdf
    <span class="accessibility"> (this is a PDF file)</span>
    </a>
  </li>
</ul>

Just a thought,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[Foamcow]

Not a bad idea, though I think applying the accessibility class to my <dd> might be more semantic.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[effennel]

Great idea BabyJeffy!
Combine with Foamcow dd seems a good combo.

Cheers
FnL

 

[Foamcow]

I r teh w1nnarrr!!!!oneoneOMG!

;-)

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK