Demystifying Designing Web Sites to Meet Accessibility Standards<br />
Part 3: Toolbar Evaluation <br />Part One
Dick Banks<br /> EASI
Toolbars and Stylesheets
IE Developers Toolbar
IE AIS/WAT-C Toolbar
FireFox Web Developers Toolbar
Firefox Accessibility Extension
Web Accessibility Toolbar Consortium
http://wat-c.org/
Inline, Head and Linked Style
INLINE
<body>
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
HEAD sometimes called inline style
<head>
<style type="text/css">
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
color: #000000;
text-align:center;
}
</style>
</head>
LINKED
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>EASI: Equal Access to Software and Information</title> <link rel="stylesheet" href="../../styles/style1.css" type="text/css" media="screen">
Linked Stylesheet
Use Relative
Not absolute
TopStyle Lite
http://www.newsgator.com/Individuals/TopStyle/Default.aspx
Evaluating CSS
IE Developers Toolbar - allows you to disable ALL CSS under the Disable menu.
AIS Toolbar - allows you to Disable CSS, Disable inline style, Show stylesheet
Mozilla Accessibility Extension - allows you to Disable Tag Styling and Disable CSS
FireFox Web Developers Toolbar by far the most versatile.
AIS - Juicy Studio
http://juicystudio.com/
Links (continued)
Title attribute in link can help in links
GSA = General Services Administration
Javascript for links
<a href="#" onclick="openpopup()" onkeypress="openpopup()" title="terrible pop-up window">Probably won't get you there</a>
onkeypress - onclick - title
Links (continued)
<script type="text/javascript"> function opennastypopup() { window.open("home.html", "", "toolbar=no,height=100,width=200"); return false; } </script>
<a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Homepage</a>
