Improve web accessibility with CSS (2005-02-21-10:13:09)

css| Access

Recently, I had to update an old website of one of my clients so that it could meet the accessibility standards. The idea of digging up old code three or four years ago is simply not appealing, mainly because many of the programming conventions I used were no longer applicable, especially in terms of accessibility. I used to use absolute font size, fixed page width and table to do layout design and space allocation.

Like many sites that were constructed at that time, my client's Web site uses the cascading Style Sheets (CSS) to format the text. It does not use any of the more powerful layout features of any CSS, nor does it allow HTML devices to be independent, which is one of the main advantages of CSS accessibility.

How did the problem come about?

Before I outline a way to make a site more accessible, it may be helpful to understand the causes of today's numerous accessibility problems:

A superficial understanding of HTML: During the 1990 's great Internet development, everyone began to build websites. The WYSIWYG editor makes it easy for almost everyone to build a Web site without having to bother learning HTML. Unfortunately, this ease of use has led to some lame code, which has hampered accessibility.

The limitations of HTML in design: Developers and designers often deliberately mistakenly use HTML tags, especially <table> tags, to overcome the limitations of HTML in layout and design. This design approach can also lead to code that hinders accessibility.

What makes CSS more accessible?

CSS emerged in 1996 to address the above problems. By using CSS, you can separate the content of an HTML file from the information about its presentation or style. This allows you to apply accurate formatting and achieve the desired layout without using HTML code that might confuse screen readers and specialized browser software.

For example, although HTML tables are used to arrange tabular data, they are often used to align elements on a page. But the reader and the software for example speech Synthesizer require valid HTML code. So when they encounter a page that incorrectly uses elements such as a table, the resulting results can be confusing to the user.

Another advantage of CSS's accessibility is that it allows users to define their own style sheets, which work with the site's style list. So, for example, a user can set that all text defined through <p> tags should be 1.5em Arial, even if the style sheet of the site says it should be 18px Verdana Bold.

It is important to note that the user-defined style works only when the user's style name matches the label in the HTML page. This will ensure that the responsibility for compatibility is handed to the developer. For example, if the user's style sheet designation <p> label should display 1.5em Arial text, but the HTML page does not use the <p> tag to invoke a style from the style sheet (perhaps it uses <font class= "BodyText" >) , the user's style of <p> label definition will be ignored. So make sure you use standard HTML tags on your headings and paragraphs, which will reduce the chance that user-defined styles are ignored.

Start

If you're building a new site from scratch, it's easy to improve accessibility through CSS. But you can still easily turn your existing Web site into a CSS form.

Step 1: Check Existing code

To better illustrate, I'll use this simple HTML code in table A to represent a page that uses CSS. This example assumes that the page has not yet used CSS, but you can also use a similar approach to evaluate a CSS based site. The main difference is that most of the changes will occur in the CSS file rather than in the HTML file.

Step 2: Remove all the special style tags from the HTML

To add CSS to this page, I first need to get rid of all the labels that control the performance of the content. The sample code uses a font label to define the font appearance, style, and color. Remove these elements and make the sample code as shown in table B.

Step 3: Remove and replace any misplaced labels from HTML

Now I'm going to remove any HTML tags that are wrong. In the sample code, a table is used to create a 15 pixel edge on the content of the page, and the code uses the <br> tag to create the paragraph.

After I remove the forms and <br> tags, I replace them with the appropriate labels. For example, I use

Step 4: Construct a CSS file to overwrite style information

Now that I've removed all the styling information from the HTML file, I need to move this information to a CSS file. A CSS file is simply a text file that is saved as a. css extension, so it can be created in any text editor. I'm using the Dreamweaver MX.

To make it easy to apply CSS files in HTML, I used the style named P and H2 to correspond to the standard HTML tags. I use a variable font size that makes it easy for the user to increase or decrease the font size in the browser. Using absolute size prevents the browser from resizing the font (it will not consider absolute font size except for Netscape 6 or later). I also specified the type, weight, and color of the font, where needed.

To recreate the layout created by the HTML markup code, I need to set the <p> and

Table D shows the CSS file I created. I named it mystylesheet.css and placed it in a style folder in the root directory of the site.

Step 5: Attach a new style sheet to the HTML file

After I created the CSS file, I inserted its style in the HTML file. Because the HTML file already includes all the tags referenced in the CSS file (

Step 6: Verify the Code

The final step in the process is to verify the accessibility of the HTML code. If you are a novice to CSS, you'd better validate the CSS code as well. There are a variety of tools that can help you verify both.

I use the Dreamweaver MX to check the accessibility of my sample code. You can do this by selecting Check page in the File menu and then selecting Check Accessibility. Any errors or warnings will be displayed, along with the line number of the occurrence and a brief explanation of the problem. You can find out more about these errors and warnings in the Dreamweaver MX reference tool. All you have to do is choose Reference from the Dreamweaver Windows menu and choose Usablenet Accessibility Reference from the book menu.

In addition, the World Wide Web Consortium provides links to more than 30 accessibility assessment tools. The consortium also provides web-based free validators for HTML and CSS.

Accessibility and Simple administration

While the examples given here are simple, they illustrate how easy it is to make your site more accessible with CSS. Moreover, the use of CSS is more than this one advantage.

A Web site based on CSS is much better managed than just HTML sites. The stylistic changes in the CSS file can be applied to the entire site without changing any HTML files in the site. and the use of CSS reduces the overall file size of each HTML file, because all the style information is stored in the CSS file.

So if you want to improve accessibility, think of it as an opportunity, not an obstacle. To learn more about CSS and accessibility, you can take a look at the Web accessibility in the World Wide Web Consortium Initiative