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:
Then, within your page (between your
<body> </body> tags):
<p class="first">Paragraph here
A few points:
- 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.
- You can also change the font size for the
h1element, along with colors, backgrounds, borders, and more. See also Mark Pilgrim’s terrific tutorial on cross-platform, cross-browser font size issues and accessibility.
- 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.
And coming around July 1st, a new book by Eric Meyer (and long awaited by me!):