Web Accessibility Design Review
Design files checked:
http://www.yellowinc.net/mit/MIT025_OMEsite1.pdf
http://www.yellowinc.net/mit/MIT025_OMEsite2.pdf
Date: 2/14/05
Checked by: Stephanie Norton
Overall comments:
Overall the color/contrast issues are minor and can be easily fixed. I prefer the
left subnavigation in the first design and the top subnavigation in the 2 nd design.
The language on the homepage: “Click Here For More Dates” creates an
accessibility barrier. Avoid using phrases such as ‘click here’ as users with
assistive technology have no concept of where ‘here’ is. It is better to simply
have the link read “More Dates” or “More Upcoming Events”. It could even read
“For more upcoming events visit our calendar” where ‘calendar’ links to the
appropriate page.
1. Colors: do pages have sufficient contrast and appropriate color
combinations?
Comments:
Some color combinations in the design do not have sufficient contrast to be seen
well by users with color blindness or other visual limitations. Color
combinations which are low contrast are:
- MIT025_OMEsite1.pdf
o Homepage
 ‘What’s coming up’: White text on orange background
o Page 4/5
 Left navigation: White text on orange background
-
MIT025_OME2.pdf
o Homepage
 ‘What’s coming up’: White text on orange background
o Page 2
 Top sub navigation:
 Blue text on blue background
 White text on light blue background
o Page 4
 Left sub navigation: Light orange text on dark orange
background
Recommendations:
- MIT025_OMEsite1.pdf
-
o Add an effect to the ‘What’s coming up’ such as a drop shadow to
make it stand out a little more.
o I prefer this subnav option over the second design. I’m assuming
the underline represents the on or hover state. Add padding-left to
the subnav to make it more noticeable in the initial state.
MIT025_OMEsite2.pdf
o Add an effect to ‘what’s coming up’
o I prefer this tabbed navigation over the previous design. Same
color combinations are difficult to achieve proper contrast.
Consider incorporating the orange used for the logo either for the
background color for the tab or to replace the blue text (For Current
Students). Add an effect to the subnav such as an underline for the
initial state to make the white stand out more against the light blue.
o Again same color combinations make achieving proper contrast
difficult. Consider using blue for the subnav or adding an effect
such as underline for the initial state.
2. Font Sizes: are the default fonts sufficient in size?
- Font sizes look great. Make sure they are coded using em or % to
ensure users can resize them in any browser.