WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Site review please

for

From: Terrill Bennett
Date: Nov 17, 2010 3:48PM

Stephan,

0) Great use of heading levels. Mostly easy to navigate with a screen
reader. I also had little trouble navigating using the keyboard only.

1) On the main site, and I'm guessing here, it seems that users who
upload an avatar that the graphic inherits the users name. For users
that don't upload one, the graphic gets read as the name of the image
- which is REAL ugly!

Suggestion: On user avatars and other decorative images (of which
there are few), force an empty ALT attribute on the image ( e.g.
alt="" ) . We don't need to hear the user's name twice (once for the
avatar, once for their name under the avatar) if they've uploaded an
avatar, and the ugly name is even worse.

2) Seems the song titles become headings - sweet for navigational
purposes! But, a user named "Adam" broadcast a message with no song
link. Therefore, no heading. Once I start navigating using headings,
I miss plain-old messages.

Suggestion: Add a heading saying "Tweet" or "Message" or "Extra!
Extra! Read All About It!" or... well, something. If you don't want
it cluttering up your interface, make it off-page text using CSS so
sighted users don't see it.

3) The white letters on a light blue background on selected tabs
could be an issue for some. You may want to view your pages through
the eyes of others. A set of colorblind tests (still under
development, but useful):
http://colorfilter.wickline.org/

JuicyStudio color and contrast tests had the following failures:

=== Home Page (before login) ==Luminosity Contrast Ratio: 5
Difference in Brightness: 5
Difference in Colour: 7

=== Main Page (after login) ==Luminosity Contrast Ratio: 46
Difference in Brightness: 46
Difference in Colour: 102

Get your own JuicyStudios toolbar for FireFox:
https://addons.mozilla.org/en-US/firefox/addon/9108/

4) The a11y tool gave your site (after login) an overall grade of
"B." F's were given on link purpose (28 violations), contrast (104
elements in violation, and 127 that need manual checking, which I
didn't), and use of deprecated elements (<b>) (23 total).

Get your own A11Y Inspector, here (requires the Firebug tool):
(1) http://getfirebug.com/
(2) http://code.google.com/p/ainspector/

5) I zoomed using Firefox WELL beyond 200% and your site didn't fall
apart! I didn't have to scroll left and right using the arrow keys
until about 600% in a 1024x768 window.

6) The site maintains structure when styles are turned off.

While the some of the above may sound like things have gone horribly
wrong, I had little problems with navigation, forms, etc. Some people
with colorblindness and others with certain forms of visual issues
may have difficulty. I certainly would hit the panic button, but
there's room for improvements.

I have links to numerous tools and browser plugins, if you're interested, here:
http://bennett1.org/j15/accessibility/accessibility-links

It wasn't a complete evaluation by any means, but the best I could do
for ya in an hour - the cats are looking at me with hunger in their
eyes and licking their lips!

Nice site - good idea - wish I'd though of it!

Hope this helps!

-- terrill --



At 03:08 PM 11/17/2010, you wrote:
>We're just building a website called songfountain.com ... in short,
>it's a cross between delicious, twitter and
>reddit, but only for song links (I don't even know if twitter,
>delicious, or reddit are accessible.) We just launched on
>the weekend, and trying to keep up a strong pace with respect to
>adding features, fixing problems.
>
>Could you provide pointers to improvements with respect to
>accessibility? It does require signing up to see the
>functionality at the moment.
>
>The full web address is http://songfountain.com/
>
>Help is much appreciated!
>
>Stephan
>
>--
>Stephan Wehner
>
>-> http://stephan.sugarmotor.org (blog and homepage)
>-> http://loggingit.com
>-> http://www.thrackle.org
>-> http://www.buckmaster.ca
>-> http://www.trafficlife.com
>-> http://stephansmap.org -- http://blog.stephansmap.org
>-> http://twitter.com/stephanwehner / @stephanwehner
>