Developer

Get more accessible with CSS

A poor understanding of HTML by the coder renders many sites inaccessible to certain visitors. Find out how to use Cascading Style Sheets (CSS) to separate presentation from content and make your site more accessible.

This article originally appeared on Builder.com.

Recently, I had to update one of my freelance client’s older Web sites so that it would meet accessibility standards. The thought of dredging through three- to four-year-old code had no appeal—primarily because many of the coding practices I used back then aren’t acceptable anymore, especially in terms of accessibility. I had used absolute font sizes, fixed page widths, and tables for layout and spacing.

Like many sites built at the time, my client’s site used Cascading Style Sheets (CSS) primarily for formatting text. It didn’t utilize any of CSS’s more powerful layout features. Nor did it allow the HTML to be device-independent, which is one of the major accessibility benefits of CSS.

How did we get here?
Before I outline the process I followed to make the site more accessible, it might be helpful to understand where many of today’s accessibility problems came from:

  • Poor understanding of HTML: During the Internet explosion of the 1990s, everyone started building Web sites. WYSIWYG editors made it easy for just about anyone to create a Web site without really bothering to learn HTML. Unfortunately, this ease of use resulted in some ugly code that now hinders accessibility.
  • Design limitations of HTML: Developers and designers often purposely misused HTML tags, especially the <table> tag, to overcome HTML’s layout and design limitations. These design workarounds also created code that impeded accessibility.

What makes CSS more accessible?
CSS was introduced in 1996 to solve the aforementioned problems. By using CSS, you can separate the content of an HTML document from the information about its presentation or style. This allows you to apply precise formatting and achieve the desired layout without using HTML code in a way that might confuse screen readers and specialized browser software.

For example, although HTML tables are intended as a way to display tabular data, they're often used to align elements on a page. But screen readers and software such as speech synthesizers require valid HTML code. So when they encounter a page with a misused element like a table, the results can be unintelligible to the user.

Another accessibility benefit of CSS is that it allows users to define their own style sheet, which can work with a site’s style sheet. So, for instance, a user can specify that all text that is defined by the <p> tag should be 1.5em Arial even if the site’s style sheet says it should be 18px Verdana Bold.

It's important to note that user-defined styles will work only if the user’s style names correspond with tags in the HTML page. This really places the responsibility of ensuring compatibility in the hands of the developer. For example, if the user’s style sheet specifies that the <p> tag should display 1.5em Arial text, but the HTML page doesn’t use <p> tags (maybe it uses <font class=”bodytext”> to call a style from a style sheet instead), the user-defined style for the <p> tag will be ignored. So make sure that you use standard HTML tags for your headings and paragraphs. This will reduce the chance that a user-defined style sheet will be ignored.


Getting started
Improving accessibility with CSS is much easier if you’re building a new site from scratch, but you can still transition an existing site to CSS without too much heavy lifting.

Step 1: Examine existing code
To demonstrate, I will use the simple HTML code in Listing A to represent a page that could benefit from using CSS. This example assumes that the page doesn’t already use CSS; however, you could use a similar approach to evaluate a CSS-based site. The main difference is that most of the changes would occur within the CSS file instead of the HTML file.

Step 2: Remove all style-specific tags from the HTML
To incorporate CSS on this page, I first need to remove all tags intended to control the presentation of the content. The sample code employs font tags to define font face, style, and color. Removing those elements leaves the sample code like Listing B.

Step 3: Remove and replace any misused tags from the HTML
Now, I remove any misused HTML tags. In the sample code, a table is used to create a 15-pixel margin around the page's contents. The code also uses break tags <br> to create paragraphs.

After I remove the table and <br> tags, I replace them with the proper tags. For example, I used an <h2> tag for the page heading and a <p> tag to indicate paragraphs. Using these standard HTML tags will make it much easier to apply the CSS later and will make it more compatible with user-defined style sheets. The sample code should now look like Listing C.

Step 4: Build a CSS file to house the style information
Now that I've removed all of the style information from my HTML file, I need to transfer that information to a CSS file. A CSS file is simply a text file saved with a .css extension, so it can be created in any text editor. I used Dreamweaver MX because it lets me easily toggle between the HTML and CSS files.

To make applying the CSS file to the HTML easier, I’ve used style names p and h2 to correspond with standard HTML tags. I’ve used variable font sizing so that users can easily increase or decrease text size with their browser. Using absolute sizes such as pixels prevents the browser from resizing fonts (except in Netscape 6 and later, which will override absolute font sizes). I’ve also specified font family, weight, and color where necessary.

To reproduce the layout created by the HTML markup code, I would need to set the <p> and <h2> tags to a width of 780 pixels. However, since the goal is to maximize accessibility, I'll remove the width settings so that the page will scale to the size of the browser window. And instead of re-creating the 15-pixel cellpadding from the original code’s <table> tag, I'll let the HTML page use the browser’s default margins. This will also allow other devices, such as a printer, to use its default margins.

Listing D shows the CSS file I created. I named it Mystylesheet.css and placed it in a styles folder in the site’s root directory.

Step 5: Attach the new style sheet to the HTML document
After creating the CSS file, I plugged its styles in my HTML file. Because the HTML file already contained all of the tags referenced in the CSS file (<h2> and <p>), I only needed to link to the style sheet in the head of my HTML file. My HTML file picks up the styles from the CSS file and applies them to the <h2> and <p> tags, as shown in Listing E.

Step 6: Validate the code
The final step in the process is to validate the HTML code for accessibility. If you're new to CSS, you may want to validate your CSS code as well. A variety of tools are available to do both.

I used Dreamweaver MX to check the accessibility of my sample code. You can do this by choosing Check Page from the File menu and then selecting Check Accessibility. Any errors or warnings are displayed along with the line number where they occur and a brief explanation of the issue. You can find out more about these errors and warnings in Dreamweaver MX’s Reference tool. Just choose Reference from Dreamweaver's Windows menu and then select UsableNet Accessibility Reference from the Book menu.

In addition, the World Wide Web Consortium (W3C) provides links to more than 30 accessibility evaluation tools. The W3C also provides free Web-based validators for both HTML and CSS.

Accessibility and simpler management
Although the example presented here is a simple one, it illustrates how easily CSS can be used to start making your site more accessible. However, that’s not the only benefit of using CSS.

A CSS-based site is much easier to manage than an HTML-only site. Style changes made to a CSS file are applied throughout the site without the need to alter any of the site’s HTML files. And using CSS reduces the overall size of each HTML file, since all of the style information is stored in the CSS file.

So if you’ve been putting off improving accessibility, think of it as an opportunity, not an obstacle. To learn more about CSS and accessibility, check out the Web Accessibility Initiative (WAI) from the World Wide Web Consortium.

Editor's Picks

Free Newsletters, In your Inbox