Accessibility reffers to the ease at which information can be accessed and consumed accurately, by users. The Web is a great medium for creating accessible information because at its foundation is HTML which allows authors to augment their information with semantics that user agents (web browsers, speech readers, search engines, etc.) can use to better serve both authors and users.
Let's examine and rebuild a webpage to understand some issues that contribute to accessibility on the web. We will not be adressing the design of the site, although design can play a great role in accessibility. We will instead try to maintain the original design and focus on improving the execution of that design to enhance its accessibility.
Because electronic information such as that available on the Web is accessable by a variety of means, it is important that authors understand there is not a single form users will experience their published information. This is in great contrast to traditional, non-electronic, media such as print (from where I think much web design is mis-informed). To illustrate this point, we will look at (and sometimes imagine listening to) the webpage we wish to evaluate for accessibility through a variety of "views".
The following graphical representations were generated by Mozilla Firefox 1.5, the text views by Lynx 2.8, and the audio descriptions by the author's best guess.
The view provided by a "standard" graphical web browser, one working in the following very common (as of 2006) desktop environment defaults.
This view represents the webpage under different font rendering conditions. It should be clear this is a common case where eyes are failing with age, older equipment may be in use, or presentation size is limited. Perceived font size is the product of multiple factors, therefor this view could be the product of any of the following individual deviations from the "Standard" view.
Users may have defined alternate default colors in their environment. This could be due to user needs that deviate from the "norm", such as finding a white background too bright or exagerating flicker, a need for increased contrast, or personal preference. Environmental constrants can also drive color choices that deviate from the "norm", such as limitations of the display device or an unusual lighting environment (outdoors, low light, etc.). This profile is as above except the default background is black and the foreground is white. Remember, this alternative color scheme only shows the ability for the webpages to work under different color defaults; the actual foreground/background color combination a user sees could by anything.
This view obviously comes into play when your informatoin is accessed by a device with limited capabilities, such as mobile phone, PDA, or very old desktop.
More importantly perhaps, it gives you an idea of how your webpage is serialized, and it is serially that your webpage is "read" by search engines and presented to users by screen readers.
I can only imagine how the webpage would be rendered in sound, but it is an important accessibility consideration. Although folks who are blind may be a minority audience, like all accessiblility, proper design help improves access for all. You want your webpage to make sense when an in-car computer reads your webpage to a commuter, don't you? Idealy, your webpage will be read by a speech reader as well as you would communicate the content of your webpage to another person over a telephone.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WebSoSmart Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td colspan="3"> <img src="Pics/WebSoSmart50pct.JPG" vspace=10></td>
<td width="120" valign="bottom"><font color="#C2460A" face="Arial, Helvetica, sans-serif"><strong>
Call:<br>404-313-1500</strong></font>
<br><br></td>
</tr>
<tr>
<tr>
<td colspan="3"> </td>
</tr>
<td colspan="2" align="center"><div align="left"><font color="#000" face="Arial, Helvetica, sans-serif"><strong> We can help you:</strong></font></div></td>
<td colspan="2"> </td>
</tr>
<tr>
<td width="120" rowspan="10" align="center"><p align="left"><font face="Arial, Helvetica, sans-serif"> <br>
</font></p></td>
<td width="59" rowspan="10" align="center"> </td>
<td height="22" align="center" bgcolor="#FFFFFF"> </td>
<td> </td>
</tr>
<tr>
<td width="620" height="22" align="center" bgcolor="#FFFFFF"><div align="left"><font color="#5A8977" size="+1" face="Arial, Helvetica, sans-serif"><strong>Make your site appeal to seniors and boomers, as well as 18-year olds.</strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22" align="center" bgcolor="#FFFFFF"> </td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"><div align="left"><strong><font color="#657F26" size="+1" face="Arial, Helvetica, sans-serif">Display your information so it is usable and recognizable at a glance, <br>maximizing efficiency, ease of use, and</font><font color="#70892B" size="+1" face="Arial, Helvetica, sans-serif"> <font color="#000000">IMPACT.</font></font></strong></div></td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"> </td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"><div align="left"><font size="+1"><strong><font color="#C44010" face="Arial, Helvetica, sans-serif">Ensure that your site speaks to the right audience...by employing <br>
user-centered design techniques to ensure that potential customers: </font></strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22"><div align="left"><font color="#C44010" size="+1"><strong><font face="Arial, Helvetica, sans-serif">- Know WHO you are</font></strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22"><strong><font color="#C44010" size="+1" face="Arial, Helvetica, sans-serif">- Grasp WHAT you can do for them</font></strong></td>
<td> </td>
</tr>
<tr>
<td height="22"><strong><font color="#C44010" size="+1" face="Arial, Helvetica, sans-serif">- and, most of all, understand WHY you are the right choice. </font></strong></td>
<td> </td>
</tr>
<tr>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center" > </td>
<td height="22" align="center"><div align="left"><font size="+1"face="Arial, Helvetica, sans-serif">Contact: markrichman@websosmart.com</font></div></td>
</tr>
</table>
</body>
</html>Code is important to accessibility because it determines:
<em> & <strong>), the text in an image (the alt attribute of <img>), or the context of a table cell (<th>).![["Standard"]](orig-graph-blackonwhite-linewrap.png "A Webpage as viewed in a \"standard\" graphical environment")
<td height="22" align="center"><div align="left"><strong><font color="#657F26" size="+1" face="Arial, Helvetica, sans-serif">Display your information so it is usable and recognizable at a glance, <br>maximizing efficiency, ease of use, and</font><font color="#70892B" size="+1" face="Arial, Helvetica, sans-serif"> <font color="#000000">IMPACT.</font></font></strong></div></td>These interruptions in lines were probably not intended by the author, the author's viewing environment was different such that the problem went unoticed. The source of the problem can be seen in the code—use of the <br> element. Authors should rarely be concerned with line wrapping; line breaks will vary amongst presentations.
![[Text Browser]](orig-lynx-crit-semantic.png "A Webpage as viewed by the character based browser Lynx")
In a strong voice, "Dash know W H O you are!"
<td height="22"><div align="left"><font color="#C44010" size="+1"><strong><font face="Arial, Helvetica, sans-serif">- Know WHO you are</font></strong></font></div></td>In the highlighted excerpt the author has choosen to wrap the text (in fact most all of the text of this webpage) in the HTML <strong> elements. They probably did this for the effect that most graphical browsers render <strong> elements in bold text, but that is a by-product of the element's true purpose—the enclosed element is to be conveyed strongly (there are other ways to enbolded text without changing its semantics). This is why the screan reader is shouting and the text representation is colored fuchsia.
The speech reader also prefixed the line with, "Dash". This happened because there is indeed a dash in the code. But there need not be. The author put it there to present the line as a list item, but HTML provides a means to express this fact, the <li> element. With this information user agents can then present list items that make the most sense for a user: a preceding bullet for a graphical browswer or astrisk for a text browser, or an extended pause between list items by a speech reader. (If one really likes the dash, the list item designation can be changed without effecting semantic through other means).
Finally, the author seems to really want to convey an emphasis when by capitalizing the word "who". Again, HTML semantic markup to the rescue. Had the author used the <em> element on the word "who" (optionally styling it to capitalize to maintian the graphical styling), the audio renderer whould know to emphasize the "who" by vocal flection, and that it's not an acronym (there is other markup for that).
![[Alternate Colors]](orig-graph-whiteonblack-crit.png "A Webpage as viewed with alternate default background & foreground colors")
First, lets look at the two elements with white backgrounds. It's not wrong that theses have a white background, it's necessary to provide contrast for the foreground elements. It's clear though that this was not this creator's intent by the lack of padding between the forground and background edge. It would be better to include padding between the foreground and background, or in the case of the graphic logo, outline the foreground elements with the background color, leaving the rest of the background transparent.
The other three elements fail an important rule. If you're going to set a foregound or background color, you must set both. If you don't, as is clear (literally) in the case of the text that was set to black, a user's default my render your element unreadable.
![[Text Browser]](orig-lynx-crit-imagetext.png "A Webpage as viewed by the character based browser Lynx")
"web-so-smart-fifty-pahcaht. J P G."
Images are not accessible. When images are more than elements of style, when they convey necessary information, there must be a text substitute. This may be done be refactoring the grpahic as styled text (via HTML & CSS) or an <img> element's alt="" attribute.
![["Large" Font]](orig-graph-120dpi-table.png "A Webpage as viewed with large fonts (or small screen)")
![[Text Browser]](orig-lynx-crit.png "A Webpage as viewed by the character based browser Lynx")
"Row one, columns one through 3: web-so-smart-fifty-pahcaht. jay pee gee. Column four: call: 404 dash 313 dash 1500."
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td colspan="3"> <img src="Pics/WebSoSmart50pct.JPG" vspace=10></td>
<td width="120" valign="bottom"><font color="#C2460A" face="Arial, Helvetica, sans-serif"><strong>
Call:<br>404-313-1500</strong></font>
<br><br></td>
</tr>
<tr>
<tr>
<td colspan="3"> </td>
</tr>The "Large" example highlights how layout can change in ways that often a table layout does not accommodate. The element highlighted there wraped because it was in a table cell, but it was probably not the authors intent.
Only graphical browsers, through the use of additional styling information, can present a HTML table as something that can be interpreted by as user non-tabular. All other agents (non-grahical browsers, search engines, screen readers) will respect that information has been marked as tabular by the HTML table element, and present that information to their users in a tabular way. Having each cell present in-turn, line-by-line, is probably not appropriate for this non-tabular information.
Using table when they're not called for also bloats your code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WebSoSmart Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td colspan="3"> <img src="Pics/WebSoSmart50pct.JPG" vspace=10></td>
<td width="120" valign="bottom"><font color="#C2460A" face="Arial, Helvetica, sans-serif"><strong>
Call:<br>404-313-1500</strong></font>
<br><br></td>
</tr>
<tr>
<tr>
<td colspan="3"> </td>
</tr>
<td colspan="2" align="center"><div align="left"><font color="#000" face="Arial, Helvetica, sans-serif"><strong> We can help you:</strong></font></div></td>
<td colspan="2"> </td>
</tr>
<tr>
<td width="120" rowspan="10" align="center"><p align="left"><font face="Arial, Helvetica, sans-serif"> <br>
</font></p></td>
<td width="59" rowspan="10" align="center"> </td>
<td height="22" align="center" bgcolor="#FFFFFF"> </td>
<td> </td>
</tr>
<tr>
<td width="620" height="22" align="center" bgcolor="#FFFFFF"><div align="left"><font color="#5A8977" size="+1" face="Arial, Helvetica, sans-serif"><strong>Make your site appeal to seniors and boomers, as well as 18-year olds.</strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22" align="center" bgcolor="#FFFFFF"> </td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"><div align="left"><strong><font color="#657F26" size="+1" face="Arial, Helvetica, sans-serif">Display your information so it is usable and recognizable at a glance, <br>maximizing efficiency, ease of use, and</font><font color="#70892B" size="+1" face="Arial, Helvetica, sans-serif"> <font color="#000000">IMPACT.</font></font></strong></div></td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"> </td>
<td> </td>
</tr>
<tr>
<td height="22" align="center"><div align="left"><font size="+1"><strong><font color="#C44010" face="Arial, Helvetica, sans-serif">Ensure that your site speaks to the right audience...by employing <br>
user-centered design techniques to ensure that potential customers: </font></strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22"><div align="left"><font color="#C44010" size="+1"><strong><font face="Arial, Helvetica, sans-serif">- Know WHO you are</font></strong></font></div></td>
<td> </td>
</tr>
<tr>
<td height="22"><strong><font color="#C44010" size="+1" face="Arial, Helvetica, sans-serif">- Grasp WHAT you can do for them</font></strong></td>
<td> </td>
</tr>
<tr>
<td height="22"><strong><font color="#C44010" size="+1" face="Arial, Helvetica, sans-serif">- and, most of all, understand WHY you are the right choice. </font></strong></td>
<td> </td>
</tr>
<tr>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td height="22"> </td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center" > </td>
<td height="22" align="center"><div align="left"><font size="+1"face="Arial, Helvetica, sans-serif">Contact: markrichman@websosmart.com</font></div></td>
</tr>
</table>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>WebSoSmart Home</title>
<link title="WebSoSmart Style" rel="stylesheet" href="style.css">
</head>
<body>
<p class="logohead"><img alt="WebSoSmart, Interactive Solutions for All" title="Logo of WebSoSmart" src="../original/Pics/WebSoSmart50pct.JPG"></p>
<p class="callcontact">Call:<br>404-313-1500</p>
<p class="first">We can help you:</p>
<ul class="first">
<li class="first">Make your site appeal to seniors and boomers, as well as 18-year olds.</li>
<li class="second">Display your information so it is usable and recognizable at a glance, maximizing efficiency, ease of use, and <strong>impact</strong>.</li>
<li class="third">Ensure that your site speaks to the right audience…by employing user-centered design techniques to ensure that potential customers:
<ul>
<li>Know <em>who</em> you are</li>
<li>Grasp <em>what</em> you can do for them</li>
<li>and, most of all, understand <em>why</em> you are the right choice.</li>
</ul>
</li>
</ul>
<p class="emailcontact">Contact: <span title="Email Address of Mark Richman at WebSoSmart">markrichman@websosmart.com</span></p>
</body>
<html>