Creating Accessible CSS
CSS Pitfalls
Article Contents
- Page 1: Overview of Cascading Style Sheets
- Page 2: Using CSS to Your Advantage
- Current page: Page 3: CSS Pitfalls
Forgetting that CSS is for Styling the Presentation, Not Conveying Meaning
One
of the main purposes of CSS is
to separate the content from the presentational styles. It
is sometimes tempting to take advantage of the wide-ranging
capabilities of CSS to
also convey meaning. This is one of the most dangerous pitfalls
of CSS-based design.
By way of example, different colors of text could be used to separate certain words into different categories. The color blue could be used to designate marine animals and the color green could be used to designate forest-dwelling animals. In a certain sense, there's nothing wrong with using this sort of visual categorization technique because it provides visual cues that are helpful to readers with full visual capabilities. In fact, users with cognitive disabilities in particular may find this helpful. Not everyone has full visual capabilities though. Individuals with low vision, blindness, or color blindness may or may not be able to make sense of the information if it is presented this way. In addition, users with older browsers, monochrome devices (such as some cell phones and PDAs), or with style sheets turned off will not be able to make use of the information either.
Background images cannot have alt text
One of the most common methods of blurring the line between content and presentation is the use of meaningful background images. Since background images cannot have alternative text explicitly associated with them, there is potential for abuse, or at least negligence, in terms of ensuring accessibility.
Inserting alternative text for
images is quite easy as long as the image is
presented in a standard <img> tag.
Example
<img src="media/tip.gif" alt="Tip" width="523" height="55" />
As CSS gains in popularity, though, more and more designers are inserting images in the background.
Example
The style sheet would contain a reference to the image file:
.tip
{
background-image:url(media/tip.gif);
}
This particular style could be referenced or applied in this way:
<div class="tip">Content of the div tag...</div>
This is perfectly acceptable, as long as the image does not convey content, if the images requires
no alt text, or the meaning
of the image is conveyed through other means, such as in
the text of the document itself.
One rule of thumb that may be helpful in deciding whether
or not to use CSS background
images is to ask whether the image is part of the
content or merely part of the presentation ("look
and feel").
If it is merely presentation, using CSS background
images is entirely appropriate and often optimal. If the image conveys
some kind of meaning, it may be best to use a conventional <img> tag.
Content Shuffling
Some of the strengths of style sheets are also weaknesses. For example, the ability to change the linearized reading order of your content without changing the visual layout can lead to some wonderful accessibility solutions, but it can also create a huge mess. If you unwittingly create a linearized reading order that is contrary to the logical reading order of the page, you have created an accessibility barrier rather than an accessibility solution.
The problems with linearized reading order arise mainly when you use absolute
positioning. In CSS, this
is designated by position:absolute.
With absolute positioning, you have total and absolute control
over the placement of objects in the visual layout, so you
may find yourself rearranging absolute-positioned elements
until you have no idea what the linearized reading order
is. It's easy to find out though: just go into the code
and look at the literal reading order of the content. If
this order makes sense, there is no need to change it. If it does not
make sense, you will need to move some of the tags around
until this order does make sense.
Dreamweaver allows authors to create CSS-based absolute-positioned layout using the feature.
Absolute positioning can also be applied by hand-typed style sheets, offering authors even greater control over the CSS attributes, but Dreamweaver's interface is convenient for those who prefer WYSIWYG (What You See Is What You Get) environments.
The following screenshot shows four absolute-positioned rectangles created in Dreamweaver. Each rectangle contains text that identifies the order in which it was created.
The HTML for this group of rectangles is shown below. Notice that the order in which they were created exactly matches the linear order in the code:
<div
id="Layer1"
style="position:absolute;
left:109px;
top:128px;
width:321px;
height:320px;
z-index:1;
background-color: #FFFFCC;
layer-background-color: #FFFFCC;
border: 1px none #000000;">
This part was created first.
</div>
<div
id="Layer2"
style="position:absolute;
left:10px;
top:9px;
width:421px;
height:101px;
z-index:2;
background-color: #66FF99;
layer-background-color: #66FF99;
border: 1px none #000000;">
This part was created second.
</div>
<div
id="Layer3"
style="position:absolute;
left:12px; top:127px;
width:87px;
height:321px;
z-index:3;
background-color: #99FFFF;
layer-background-color: #99FFFF;
border: 1px none #000000;">
This part was created third.
</div>
<div
id="Layer4"
style="position:absolute;
left:11px; top:459px;
width:420px;
height:73px;
z-index:4;
background-color: #FFCCFF;
layer-background-color: #FFCCFF;
border: 1px none #000000;">
This part was created last.
</div>
Screen readers will read the text in the order that it is presented in the code, ignoring all of the styling attributes. Manipulating the visible area in the WYSIWYG design view does not change the literal reading order at all. The screenshot below shows the same rectangles after moving them around and reshaping them.
The linear order in the HTML markup, and thus the linear reading order for screen readers, is exactly the same as the markup shown earlier. This may not seem like such a problem, but if the first item that screen reader users hear is actually the last section of a page, users are likely to hear the copyright and terms of use before hearing the main navigation, side bar, or main content. In fact, in the rearranged version, the main content is the last thing that screen reader users will hear.
The solution is to the content shuffling problem is to rearrange the items in the HTML to match the visual reading order. Here is how the rearranged HTML would look in this example:
<div
id="Layer3"
style="position:absolute;
left:12px; top:127px;
width:87px;
height:321px;
z-index:3;
background-color: #99FFFF;
layer-background-color: #99FFFF;
border: 1px none #000000;">
This part was created third.
</div>
<div
id="Layer2"
style="position:absolute;
left:10px;
top:9px;
width:421px;
height:101px;
z-index:2;
background-color: #66FF99;
layer-background-color: #66FF99;
border: 1px none #000000;">
This part was created second.
</div>
<div
id="Layer4"
style="position:absolute;
left:11px; top:459px;
width:420px;
height:73px;
z-index:4;
background-color: #FFCCFF;
layer-background-color: #FFCCFF;
border: 1px none #000000;">
This part was created last.
</div>
<div
id="Layer1"
style="position:absolute;
left:109px;
top:128px;
width:321px;
height:320px;
z-index:1;
background-color: #FFFFCC;
layer-background-color: #FFFFCC;
border: 1px none #000000;">
This part was created first.
</div>
Astute observers will realize that this is not the only possible order of presenting the content to screen reader users. It may make more sense to put the pink section first if it contains the main content, or to put some other section first for other reasons. The key is to make the reading order logical for screen reader users.
Warning
Even though it is possible to present the content to screen reader users in any conceivable order, these users are accustomed to listening to the main navigation at or near the top, with the main content after the main navigation. Deviating from this convention (e.g. by putting the main content first, instead of the main navigation) may make sense in some instances and may actually be more user-friendly, but it may also confuse screen reader users. It all depends upon the context. The more experimental design, the more likely it will confuse users. Go ahead and innovate, but be warned that users may find the innovations surprising and less intuitive than more conventional designs.
Poor Contrast and Busy Backgrounds
Artistic CSS designs can look great, but the artistry can also get in the way of accessibility. Background colors or background images can present contrast problems, as seen in the screenshot below:
The text right underneath "Select a design" is difficult to read due to the poor contrast between the background image and overlying text. The black and white image is also a busy background. It would be hard to find any color of text that was easily readable across this graphic.
Using CSS Instead of Semantic Markup
Another danger is that CSS can mimic semantic markup. Text can be styled
to look like headings. Words can appear emphasized (as if
the <strong> or <em> tag
had been used) even if they are only presented in a different
color or made to appear bold or italicized (without the accompanying
semantic markup).
Heading Example
The sentence below appears to be a heading in CSS-enabled browsers, but it is just regular text styled to look like a heading.
This is Not a Heading. It Just Looks Like One.
The incorrect markup which produced this example is as follows:
<p
style="bold;
font-size: 200%;
font-family: Arial, Helvetica, sans-serif;">This is NOT a Heading. It Just Looks Like One.</p> The correct markup would be:
<h1>This IS a Heading and It Looks Like One Too.</h1> Emphasis Example
Similarly, the word "emphasized" in the sentenced below is not emphasized in the markup. It is only styled to appear bold.
"Please remember to emphasize text that is important."
The incorrect markup which produced this example is as follows:
<p>Please remember to <span style="font-weight:bold;">emphasize</span> text that should be emphasized.</p> The correct markup would be:
<p>Please remember to <strong>emphasize</strong> text that should be emphasized.</p> However, it should be noted
that modern screen readers still do not interpret
the <strong> and <em> tags
in any special way, though they probably should.
Browser Support Issues
When you use CSS, you have to accept the fact that your content will not look right in some browsers. Older browsers do not support CSS at all. Some versions, such as Netscape 4.x support CSS in part, but have such faulty and incomplete support that sophisticated styles look horrible and very inaccessible to just about everybody. Newer browsers have fairly good support for styles, but will someday be outdated too. Even among modern browsers, support can be buggy and inconsistent between browsers and platforms. Fortunately there are strategies for dealing with browser support issues.
Advertisements
WebAIM is an initiative of:
