Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Creating accessible content

Creating accessible content

While the term “accessibility” is often used to specifically indicate content that is accessible for people with disabilities, I use the term here in a broader context—to indicate that a visitor uses a browser with enough technology support to access certain content. Please note that to support accessible content for the disabled, you will have follow a series of best practices while creating both your HTML and Flash content.

Although progressive enhancement theory almost always starts with the basic, non-enhanced version of a website, it is often the most practical approach for Flash projects to make your Flash content the starting point and translate it to HTML content.

When you start defining your basic content, you will first have to decide what content is important for search engines and people with lesser technology support. As a rule, you should try to keep your main navigation, links, content, and functionality accessible at all times, if possible. Keep in mind that if you have a small budget, it is key to keep things simple.

While translating your Flash content to HTML, try to think in terms of headers, text, links, images, and simple forms. You also have to decide how to translate different kinds of rich media content into basic content. This can be quite challenging. For example, how would you best describe a driver’s experience of in racecar while you are sitting in the passenger seat next to someone driving an ordinary sedan?

For Flash video, you could always follow a storyboarded approach, in which you describe the video’s content using a few captured key images and a short description for each one of them. Example 2 (also available in the accompanying ZIP file) illustrates how you could make Flash video content accessible in terms of simple marked-up content.

Example 2 contains the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Flash video using progressive enhancement</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen"
href="styles.css" />
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"ufo_themovie.swf", width:"480",
height:"270", majorversion:"8", build:"0", menu:"false" };
UFO.create(FO, "video");
</script>
</head>
<body>
<ol id="video">
<li><img src="img/frame1.jpg" alt="UFO video still frame" />
It's night-time, a UFO flies over the pasture, cows grazing</li>
<li><img src="img/frame2.jpg" alt="UFO video still frame" />
The UFO tries to abduct a cow using a tractorbeam, however in the
process the cow abducts the UFO instead</li>
<li><img src="img/frame3.jpg" alt="UFO video still frame" />
It's daytime again, cows are still grazing,
one cow looks very relieved</li>
</ol>
</body>
</html>

Styles.css contains the following CSS code:

#video {
width:420px;
}
#video li {
clear:left;
}
#video li img {
float:left;
width:240px;
padding:0 10px 10px 0;
}

The following screen shots show what the different versions look like. Figure 4 shows the basic “decaf” version.

Example 2 web page showing simple HTML content

Figure 4. Example 2 web page showing simple HTML content

Figure 5 shows the CSS-enhanced “cafĂ© latte” version.

Example 2 web page with images enabled and CSS applied

Figure 5. Example 2 web page with images enabled and CSS applied

Finally, Figure 6 shows the Flash-enhanced “double espresso” version.

Example 2 web page showing Flash video content

Figure 6. Example 2 web page showing Flash video content

Comments