WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: An attempt at an accessible web site...Please review

for

From: Hall, Kevin (K.M.)
Date: Oct 6, 2004 8:38AM


















0
DocumentEmail

6 pt



<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:553679495 -2147483648 8 0 66047 0;}
@font-face
{font-family:"Arial Unicode MS";
panose-1:2 11 6 4 2 2 2 2 2 4;
mso-font-charset:128;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-1 -369098753 63 0 4129023 0;}
@font-face
{font-family:"\@Arial Unicode MS";
panose-1:2 11 6 4 2 2 2 2 2 4;
mso-font-charset:128;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-1 -369098753 63 0 4129023 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;
text-underline:single;}
p.MsoAutoSig, li.MsoAutoSig, div.MsoAutoSig
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
pre
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Arial Unicode MS";}
span.EmailStyle17
{mso-style-type:personal-reply;
mso-ansi-font-size:10.0pt;
mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;
mso-bidi-font-family:Arial;
color:navy;}
span.start-tag
{mso-style-name:start-tag;}
span.attribute-name
{mso-style-name:attribute-name;}
span.attribute-value
{mso-style-name:attribute-value;}
span.end-tag
{mso-style-name:end-tag;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->



<body lang=EN-US link=blue vlink=blue style='tab-interval:.5in' id="role_body"
bottomMargin=7 leftmargin=7 topmargin=7 rightMargin=7>



<font size=2 color=navy face=Arial
id="role_document"><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
font-family:Arial'>John,

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>It's good
that you are interested in making the site more accessible, so please take
everything that follows in the spirit of constructive criticism.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>You should
check out the W3C Accessibility Guideline Resources at <a
href="http://www.w3.org/WAI/Resources/">http://www.w3.org/WAI/Resources/

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>A few
notes on your code. I see that you are trying to use CSS in your page design,
that's good. You should be able to remove any remaining font tags by styling a
few elements in the CSS. That's usually the first step people take in using
CSS.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Consider making
your main navigation an unordered list:

<font size=2 color=navy
face="Courier New"><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
font-family:"Courier New"'><;ul>;

<font size=2 color=navy
face="Courier New"><span style='font-size:10.0pt;mso-bidi-font-size:12.0pt;
font-family:"Courier New"'><;li>;<font size=2
color=navy face="Courier New"><span style='font-size:10.0pt;mso-bidi-font-size:
12.0pt;font-family:"Courier New";color:navy'><;a<span
class=attribute-name> href=&amp;quot;who.html&amp;quot;>;Who
We Are<;/a>;<;/li>;<font
size=2 color=navy face="Courier New"><span style='font-size:10.0pt;mso-bidi-font-size:
12.0pt;font-family:"Courier New";color:navy;mso-color-alt:windowtext'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:"Courier New";
color:navy'><;li>;<;a<span
class=attribute-name> href=&amp;quot;services.html&amp;quot;>;Services<;/a>;<;/li>;<font
size=2 color=navy face="Courier New"><span style='font-size:10.0pt;mso-bidi-font-size:
12.0pt;font-family:"Courier New";color:navy;mso-color-alt:windowtext'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:"Courier New";
color:navy'>&amp;#8230;<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:"Courier New";
color:navy;mso-color-alt:windowtext'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:"Courier New";
color:navy'><;/ul>;<span style='mso-fareast-font-family:
"Arial Unicode MS";color:navy;mso-color-alt:windowtext'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>It will
cut down on markup and is semantically useful. You can remove the bullets in
the style sheet by using list-style-type: none;

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>See <a
href="http://www.w3schools.com/css/css_list.asp">http://www.w3schools.com/css/css_list.asp
for info on styling lists.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Consider removing
the marquee tag that creates the scrolling ticker as Chris suggested. The
marquee tag is deprecated in current specs and moving text can be a problem for
users with some disabilities.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Consider
making the images at the top into styled text. There are many techniques
available for making this more attractive such as sIFR, see <a
href="http://www.mikeindustries.com/blog/archive/2004/10/sifr-2.0-release-candidate">http://www.mikeindustries.com/blog/archive/2004/10/sifr-2.0-release-candidate
for more information on one good accessible technique.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Also, keep
working on your CSS to remove any tables that are used for layout. Tables are
meant to display tabular data (in rows and columns). While yours are not too
bad there are plenty of resources online that will walk you through converting
a table based layout to CSS. Search on Google for:' converting tables CSS '
without the quotes and you'll find plenty of information.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Again, it's
good that you are thinking about this so don't be discouraged, you are on the
right track but there is plenty that still needs to be done.

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>Regards,

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>-Kevin
Hall

<span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Arial'>

<span style='font-size:
10.0pt;font-family:Tahoma;color:black'>