Design Your Web Content for Accessibility
By Bryan D. Caplovitz
Introduction
Of course you have a web site. Doesn’t everyone? And you probably want to reach as wide an audience as possible. As more people gain access to the internet, and as connections become faster, the demand for universal access to information continues to increase.
Designers and users alike appreciate new technologies that offer improvements to their browsing experience. There’s always the possibility, however, that users will find themselves getting frustrated when new technologies can sometimes seem to make things worse. So the dilemma for designers is how to maximize their efforts. How do we design for the latest and greatest features offered (which often speed up development time) without causing problems for our end-users?
Designing two or more “versions” of a site may seem too difficult or too time consuming. But if you could, you’d be serving your entire audience well. Instead of starting from scratch, however, you can use style sheets appropriately to design a site that works well for almost any user.
Who Should You Design For?
In the early days of the web (5 years ago), there was one kind of browser: a PC. Over the past few years, the devices used to access the web have continued to evolve so that it’s impossible to anyone to keep up with all of the different variations.
Your audience IS accessing your site now through a variety of user agents (browsers), including desktop browsers, voice browsers, mobile phones, PDAs, and automobile-based PCs, just to name a few. They may be accessing your site through a number of environmental constraints, including noisy surroundings, poor illumination, and hands-free environments.
Your users may not be able to see or hear your content. They may not have a mouse or keyboard. They may have a small screen, a slow connection, or be in a situation where their eyes, ears, or hands are busy or interfered with.
In fact, the “average” internet user in the not-so-distant future may be considered to be an audience of people with disabilities.
Is it economically feasible to design for all these audiences? If you design using stylesheets effectively, it’s really not as difficult as one might think.
The Stylesheet MEDIA TYPE Property
Style sheets have been around for some time, but I’ve found them to be far underutilized. When used correctly, style sheets can make your like as a developer significantly easier. Basically, good web design guidelines recommend separating the presentational aspects from the rendering instructions of HTML code. The layout and presentation should be left to stylesheets.
Most developers are familiar with the formatting capabilities of stylesheets, and focus primarily on colors and fonts. Most developers don’t know, however, that multiple stylesheets can be attached to the same document.
Link multiple stylesheets to a document as follows:
<HEAD>
<TITLE>Style Sheet Example</TITLE>
<LINK rel="stylesheet" type="text/css"
href="main.css" media=”screen”>
<LINK rel="stylesheet" type="text/css"
href="print.css" media=”print”>
</HEAD>
Browsers will only download the stylesheet that is going to apply the most relevant assistive technology. Notice that “media” property at the end of the Link tags above? That’s how the browser knows which stylesheet to use.
The media types are defined by the World Wide Web Consortium (W3C) guidelines as follows:
Simplicity
By keeping the presentational elements of an HTML document in the control of stylesheets, it becomes easy to create multiple “versions” of your document. By adding a simple style tag such as “NoPrint” to a SPAN tag, you can keep certain elements from appearing in different media. An appropriate stylesheet for Braille browsers may, for example, only need to interpret a text-only version of your site.
Guidelines
The W3C offers several guidelines to help you make sure your content is accessible to all audiences. You can access them directly at http://www.w3.org/WAI/References/.
Validation
Once you’ve created all types of different stylesheets, how do you test them? Of course, you can use several browsers yourself, including screen readers, self-voicing systems, etc. Chances are, however, that you don’t have access to all of the different browser types. Invite people with disabilities to help, as well as other users who access the web using browsers of all types. The Center for Applied Special Technology (CAST) “is a not-for-profit organization that uses technology to expand opportunities for all people, including those with disabilities”. They offer an automated helper, BOBBY, who will review submitted pages and offer advice on making them more accessible. BOBBY can be found at http://www.cast.org/Bobby.
Summary
All audiences are served by a well-designed site that is accessible to multiple audiences. The proper use of the MEDIA TYPE property in stylesheets will make your development efforts considerably easier. Keep in mind that there are guidelines, and there are others to turn to if you need help reviewing your site.