Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Tue

14

MAY

2002

Don’t Fake Your Markup: Accessibility Issues for CSS

While CSS is a fantastic addition to our tools that can also help improve accessibility, Jim Byrne’s new article will explain some details to watch out for with CSS: CSS accessibility problems: is markup dead?

As Jim states,

“It is disappointing that lack of appropriate markup has become one of the most common problems I come across when carrying out access audits of Websites. Headings, paragraphs, quotes, lists and inline elements such as strong and em are being replaced with neutral or inappropriate tags, and merely styled to look like headings, paragraphs, lists or inline elements.”

In other words, while it’s easy enough to style other elements to look like headings, for example, remember to use the appropriate markup for headings, paragraphs, lists, and more. Jim’s article explains why it matters. And keep in mind that the markup structure matters to search engines, too. So you can help make your pages more accessible while also making your site more search engine friendly, too.

One of the common issues I also see is the lack of heading elements because of wanting to avoid the default padding or a particular default font size. Those details are easy enough to change with CSS, too. So you’re not locked in to the heading element’s defaults when you use CSS.

If you don’t want space below your header you can use CSS to reduce or eliminate that space. Here’s a quick cross-browser example:

<style type="text/css">
h1 {
   font-size:2.0em;
   margin-bottom:0;
   padding-bottom:0;
}

p.first {
   margin-top:0;
   padding-top:0;
}
</style>

Then, within your page (between your <body> </body> tags):

<h1>Title here</h1>
<p class="first">Paragraph here</p>

A few points:

  1. By removing the bottom padding and margin in the header element and the top padding and margin for the paragraph element below it you’ll eliminate the padding between them in most browsers. You can also play around with those numbers and have just a small amount of padding or whatever you wish, of course.
  2. You can also change the font size for the h1 element, along with colors, backgrounds, borders, and more. See also Mark Pilgrim’s terrific tutorial on cross-platform, cross-browser font size issues and accessibility.
  3. Note that I also specified a class (first) for the paragraph element so that other paragraph elements will continue with the default.

Lots of choices here!

I also recommend playing around with possibilities to see what CSS can do. It can be a fun and interesting adventure.

Addendum 01 September 2003: See also my new tutorial here, Semantics, HTML, XHTML, and Structure.

Resources

There are lots of good tutorials on the Web for Accessibility and CSS, and I also highly recommend:

Cascading Style Sheets, The Definitive Guide, by Eric Meyer Cascading Style Sheets, Second Edition: Designing for the Web, by Hakon Wium Lie, Bert Bos, Robert Cailliau

And coming around July 1st, a new book by Eric Meyer (and long awaited by me!):

Eric Meyer on CSS: Mastering the Language of Web Design, published by New Riders

09:38 am, pdt14 May, 2002 Comments, Trackbacks ·

Categories: Accessibility, Books, CSS, Design, Development, Standards

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points, by 37Signals. New Riders Press (March 2, 2004). 

Web Accessibility: Web Standards and Regulatory Compliance

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2002/05/14/dont_fake_your_markup_accessibility_issues_for_css/
Page last modified 14 July, 2007 - 10:22pm PDT Page load time: 0.009259 seconds.