Creating Accessible CSS
Overview of Cascading Style Sheets (CSS)
Article Contents
- Current page: Page 1: Overview of Cascading Style Sheets
- Page 2: Using CSS to Your Advantage
- Page 3: CSS Pitfalls
Introduction
For years, the only way to format HTML in a visually appealing way was to use tables, even though tables were originally created to display tabular data. As the web evolved and became more sophisticated, designers wanted to do more than just display text, they wanted to emulate printed documents. They wanted to make an artistic statement. There's nothing wrong with that. In fact, tables can be used for layout without ruining the accessibility of a web site. Yes, it's ok to use tables for layout, at least from an accessibility perspective.
Still, you can take your web design to a higher level by eliminating tables that are used for layout. The way to do this is through CSS (Cascading Style Sheets). Before going too far, it should be noted that authors can easily create INaccessible web sites using CSS. There is nothing magical about CSS that eliminates accessibility barriers.
Important
The strength of CSS lies in the ability to separate content from presentation, and to allow for more precise control over layout.
What Are Cascading Style Sheets?
Cascading Style Sheets, or CSS,
allow you modify properties of existing HTML
elements. All web browsers are based upon a built-in style sheet. This style
sheet is part of the program and is not typically viewable. It instructs the browser
how to display individual items or elements in your page. For instance,
when the browser sees the <p> tag, it
knows to skip a line and start a new section because that's what the built-in
style sheet instructs it to do. The <strong>,
<table>, and every other HTML
tag is defined in this style sheet; their size, color, position, and other
characteristics are all defined within it. When you add your own style sheet
to a web page, you can override this built-in style sheet and tell the browser
to display elements in a different way, according to your style sheet.
Although most tags allow you to add attributes to them to give them certain
characteristics (e.g., color="red"), with style sheets you have
increased flexibility and the capability to add several attributes that
are not available with normal HTML. One advantage of styles sheets (or
just 'styles' for short) is that you don't have to add extra attributes
to individual elements, instead, you can define a style for that element to achieve
that attribute every time that particular element is used. So, if you want all of the paragraphs
on your page to be a certain size, you don't have to use the <font> element
in every paragraph. Instead, you tell the web browser that every time it
encounters a <p> to display it the size
you want. Also, styles are easy to edit and change; instead of finding and
editing each occurrence of an HTML element, you may change the style that was
defined for that element and all occurances of the element in the web page (or
entire web site) will be changed.
Why Do They Call Them "Cascading"?
The word "cascading" applies to a hierarchy of importance. The
user has the highest level of control. By applying a user-selected style
sheet, the user has complete control over the styles of the web page. The
next level down in the hierarchy is in the document itself. If a style is
applied to an element, this takes precedence over any other style declaration
(except for the user's own styles). Further down in the hierarchy are styles
specified within the <head> of a single
page. Finally, there are styles specified in external documents - these can be
applied to multiple pages or an entire site.
Also, if you declare a style for the same element more than once, it is the last style that will be applied. Take a look at the same style attributes below:
h1
{color:red;
background-color:yellow;}
h1
{color:blue;
background-color:red;}
h1
{color:white;
background-color:black;}
In this example, there are three separate color combinations for the <h1> tag.
The first two color combinations will be ignored. Only the last one will
be applied. The last one in the cascade trumps all others.
The Issue of Control
The fact that the end user has the greatest control over the styles of a web page is an accessibility benefit. This means that a person with extremely low vision can set the background color of all web pages to black, and the font to 300% bold white text—or any other style that best fits the needs of that individual. Some designers are reluctant to give up any of their control over the look and feel of their creations. The truth is that they never had this control to begin with. The web is an electronic format. People can view it in any browser that they choose, and they can manipulate it as much as they like.
You're probably used to seeing the Google web site like this:
However, if you view Google in a text-only browser, it might look something like this:
When it comes right down to it, the idea that web developers have control over the display of their content is an illusion. The final look and feel has always been in the control of the user. With style sheets, this control only increases. Rather than fight it, web developers should just accept this fact and make sure that their documents transform well.
Advertisements
WebAIM is an initiative of:
