WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Site review please

for

Number of posts in this thread: 8 (In chronological order)

From: Stephan Wehner
Date: Wed, Nov 17 2010 1:09PM
Subject: Site review please
No previous message | Next message →

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

From: Ro
Date: Wed, Nov 17 2010 1:36PM
Subject: Re: Site review please
← Previous message | Next message →

Sign up was easy with Voiceover. Everything seems really simple, but I
don't really understand the point from the description Basically you
trade song lyrics? You just find the song lyrics online and link the
URL? That's how it appears, just curious. So there's no actual trading
of actual songs, just song lyrics? I didn't really see where you add
friends or followers so I don't know if that's part of it. Just
looking around to see basic functionality. So far so good unless
there's big parts of the site I'm not seeing. I'm using Voiceover with
Leopard and Safari 5.

-Randi and Guide Dog Jayden

I'm not disabled, my eyes are.
http://raynaadi.blogspot.com/

On Nov 17, 2010, at 1:08 PM, Stephan Wehner wrote:

> http://songfountain.com/

From: Terrill Bennett
Date: Wed, Nov 17 2010 3:48PM
Subject: Re: Site review please
← Previous message | Next message →

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
>

From: Stephan Wehner
Date: Wed, Nov 17 2010 5:51PM
Subject: Re: Site review please
← Previous message | Next message →

On Wed, Nov 17, 2010 at 2:46 PM, Terrill Bennett
< = EMAIL ADDRESS REMOVED = > wrote:
> Stephan,
>
Thanks so much. Just what I was looking for!


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

Good. I am guessing you signed up and signed in.

>
> 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.

Ok forced empty alt + title

>
> 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.
>

Heading is now <h3>From [username] Artist -name: Song name Album:Album name</h3>
where names only appear if available. In particular if it is a message
"without song attached"
it just says <h3>From [username]</h3>

I don't think that is that too much in a heading?

> 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:
>

Ok colours are always the hardest. We're redoing that kind of stuff soon.

> === 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/

Thanks for mentioning this tool!

>
> 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.
>

Wouldn't have thought to try that! But the minimalist design makes it
easy to pass such
a test

> 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.

Well, one thing at a time. See above.

If you don't mind, did you manage to locate "Add song" form, and work with it?

Also there's a "bookmarklet" under the account section. I don't know
if something
like that is useful in the context of accessibilty. Please let me know
if you have time.

It lets you post to songfountain when you are on a different site
(presumably like youtube)
super easy.

> 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!
>

Oh thanks. Wasn't my idea :-) Partner Kian's, who contacted me as a
developer. I'll pass it on.

> Hope this helps!

Thanks for all of that! Very helpful.

Stephan

>
> -- 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
>>

From: Stephan Wehner
Date: Wed, Nov 17 2010 6:09PM
Subject: Re: Site review please
← Previous message | Next message →

On Wed, Nov 17, 2010 at 12:35 PM, Ro < = EMAIL ADDRESS REMOVED = > wrote:
> Sign up was easy with Voiceover. Everything seems really simple, but I
> don't really understand the point from the description Basically you
> trade song lyrics? You just find the song lyrics online and link the
> URL? That's how it appears, just curious. So there's no actual trading
> of actual songs, just song lyrics? I didn't really see where you add
> friends or followers so I don't know if that's part of it. Just
> looking around to see basic functionality. So far so good unless
> there's big parts of the site I'm not seeing. I'm using Voiceover with
> Leopard and Safari 5.

No sorry, the friends/followers is coming, not there. Probably a bit
confusing as it is right now

The idea is to compile a link directory, but also have a feed of links
compiled from "friends that you follow" (Facebook / Twitter style)

Links can be for any page related to a particular song, but people
have been almost exclusively linking to youtube videos.

So not necessarily lyrics, but songs, and in practice just videos.

There is a special trading feature, it is actually quite unusual. You
can contact another user
and ask them for a link. The trick is you enter a link into the system
first.Only after the other user
accepts the trade by sending back a link, is your link revealed to them.

But no song files (MP3's), only links

Thanks for taking a look, and thanks for the feedback!

Stephan

>
> -Randi and Guide Dog Jayden
>
> I'm not disabled, my eyes are.
> http://raynaadi.blogspot.com/
>
> On Nov 17, 2010, at 1:08 PM, Stephan Wehner wrote:
>
>> http://songfountain.com/
>
>

From: Ro
Date: Wed, Nov 17 2010 7:27PM
Subject: Re: Site review please
← Previous message | Next message →

Oh ok, glad to know the friends/followers isn't there yet haha. Sounds
like a really interesting idea! Will you keep me updated so I can
check out new stuff?

~Randi and Guide Dog Jayden

In the Center of the Roof

http://raynaadi.blogspot.com/

On Nov 17, 2010, at 5:38 PM, Stephan Wehner wrote:

> On Wed, Nov 17, 2010 at 12:35 PM, Ro < = EMAIL ADDRESS REMOVED = > wrote:
>> Sign up was easy with Voiceover. Everything seems really simple,
>> but I
>> don't really understand the point from the description Basically you
>> trade song lyrics? You just find the song lyrics online and link the
>> URL? That's how it appears, just curious. So there's no actual
>> trading
>> of actual songs, just song lyrics? I didn't really see where you add
>> friends or followers so I don't know if that's part of it. Just
>> looking around to see basic functionality. So far so good unless
>> there's big parts of the site I'm not seeing. I'm using Voiceover
>> with
>> Leopard and Safari 5.
>
> No sorry, the friends/followers is coming, not there. Probably a bit
> confusing as it is right now
>
> The idea is to compile a link directory, but also have a feed of links
> compiled from "friends that you follow" (Facebook / Twitter style)
>
> Links can be for any page related to a particular song, but people
> have been almost exclusively linking to youtube videos.
>
> So not necessarily lyrics, but songs, and in practice just videos.
>
> There is a special trading feature, it is actually quite unusual. You
> can contact another user
> and ask them for a link. The trick is you enter a link into the system
> first.Only after the other user
> accepts the trade by sending back a link, is your link revealed to
> them.
>
> But no song files (MP3's), only links
>
> Thanks for taking a look, and thanks for the feedback!
>
> Stephan
>
>>
>> -Randi and Guide Dog Jayden
>>
>> I'm not disabled, my eyes are.
>> http://raynaadi.blogspot.com/
>>
>> On Nov 17, 2010, at 1:08 PM, Stephan Wehner wrote:
>>
>>> http://songfountain.com/
>>
>>

From: Stephan Wehner
Date: Thu, Nov 18 2010 2:21AM
Subject: Re: Site review please
← Previous message | Next message →

On Wed, Nov 17, 2010 at 6:26 PM, Ro < = EMAIL ADDRESS REMOVED = > wrote:
> Oh ok, glad to know the friends/followers isn't there yet haha. Sounds
> like a really interesting idea! Will you keep me updated so I can
> check out new stuff?
>

Yes, of course. Thanks for your interest!

The site blog is at http://blog.songfountain.com which has an RSS feed as well.

("Friends + followers" is not there yet in the sense that you're presently
following everyone, and you can't unfollow.)

Stephan

> ~Randi and Guide Dog Jayden
>
> In the Center of the Roof
>
> http://raynaadi.blogspot.com/
>
> On Nov 17, 2010, at 5:38 PM, Stephan Wehner wrote:
>
>> On Wed, Nov 17, 2010 at 12:35 PM, Ro < = EMAIL ADDRESS REMOVED = > wrote:
>>> Sign up was easy with Voiceover. Everything seems really simple,
>>> but I
>>> don't really understand the point from the description Basically you
>>> trade song lyrics? You just find the song lyrics online and link the
>>> URL? That's how it appears, just curious. So there's no actual
>>> trading
>>> of actual songs, just song lyrics? I didn't really see where you add
>>> friends or followers so I don't know if that's part of it. Just
>>> looking around to see basic functionality. So far so good unless
>>> there's big parts of the site I'm not seeing. I'm using Voiceover
>>> with
>>> Leopard and Safari 5.
>>
>> No sorry, the friends/followers is coming, not there. Probably a bit
>> confusing as it is right now
>>
>> The idea is to compile a link directory, but also have a feed of links
>> compiled from "friends that you follow" (Facebook / Twitter style)
>>
>> Links can be for any page related to a particular song, but people
>> have been almost exclusively linking to youtube videos.
>>
>> So not necessarily lyrics, but songs, and in practice just videos.
>>
>> There is a special trading feature, it is actually quite unusual. You
>> can contact another user
>> and ask them for a link. The trick is you enter a link into the system
>> first.Only after the other user
>> accepts the trade by sending back a link, is your link revealed to
>> them.
>>
>> But no song files (MP3's), only links
>>
>> Thanks for taking a look, and thanks for the feedback!
>>
>> Stephan
>>
>>>
>>> -Randi and Guide Dog Jayden
>>>
>>> I'm not disabled, my eyes are.
>>> http://raynaadi.blogspot.com/
>>>
>>> On Nov 17, 2010, at 1:08 PM, Stephan Wehner wrote:
>>>
>>>> http://songfountain.com/
>>>
>>>

From: Terrill Bennett
Date: Thu, Nov 18 2010 7:18AM
Subject: Re: Site review please
← Previous message | No next message

*** Good. I am guessing you signed up and signed in.

Yes, I did. (KrashTestDumby, but that's a secret, don't tell anyone!)

*** With the avatars on the main page, you:

1) Forced empty ALT and TITLE attributes to avatars - they're now
totally silent, and no longer links to the user profile. Awesome (see next)!

2) Removed user name under avatars. Ditto the "Awesome" above (see next).

3) You added "From User Name" to all entries and made them heading
level 3, and further (all good news):
a. Made the user name a link to that user's profile
b. If link to media was entered as part of the message, you also
made links to discuss the artist (under construction)
c. If link to media was entered as part of the message, you also
made links to discuss the song (under construction)
d. On both b and c, a pop-up window opens and gains focus. NVDA
read the "coming soon" contents, and the "Ok" button.

*** Colours are hardest

Yes, how true! Another link you may find helpful in selecting an
accessible color (colour for our Continental friends) scheme:
http://www.dasplankton.de/ContrastA/

*** Did you manage to locate "Share song" form, and work with it?

Yes, I tested it this morning and successfully added a song ("The F -
ing Blues," Kirt Lorange, on SoundClick.com - free song download):
http://www.soundclick.com/player/single_player.cfm?songid=3783555&;q=hi&newref=1

1) A pop-up form opens, and focus given to first edit box (Recipient,
optional) and NVDA read the label correctly. All edit boxes I
specifically looked at in the HTML have proper label tags with
"for=" attributes and NVDA had no issues with any edit box on the form.

2) When returning to the form after navigating away from the window
(to get artist info from another window I had open), NVDA correctly
re-reads the document name AND label of the field that had (and has)
focus when I left the page.

3) The ONLY potential issues I found are:
a. The "Close" link is at the top of the form. Since focus is
given immediately the first edit box, I didn't know it was present.

b. If I decided I didn't want to complete the form or opened it by accident:

i. tabbing through the form I do land on an "Add" button, but
there's no "Cancel" button
ii. tabbing past the "Add" button I go to links on the main
page. A non-sighted user won't know the form is still open. Worse, a
low-vision user with a screen magnifier may have difficulties because
the form is still open, potentially adding confusion to the entire
page, and that "x" link may be difficult to find.

c. The link to close the windows is named "x".

Suggestion: Add a "Cancel" button that closes the form.
Suggestion: Title the link "Close" or "[Close]" or something more meaningful.

FYI: in NVDA and JAWS, I can open a List Of Links dialog box. The
Close link in that list is called "x". What does "x" do? If you
change the link to "Close" what does "Close" close?

Helpful Hint: If you downloaded Firefox, and installed the WAVE tool
from a place called WebAIM, then right-click the page when the form
is open and disable styles. You'll see the Tab Order problems! The
form is near the top of the document with the "X" at the beginning of
the form, followed by the form, the Add button, and then "Start New
Trade" link.
http://wave.webaim.org/toolbar

*** New issue: this morning, after my third cup of coffee, I noticed
that when moving to the tabs (e.g. Friends, Trading, My Messages)
that it was impossible to visually tell the tab had focus. NVDA read
the links, so I knew they had focus. A low vision user not using
screen reading technology would probably not know, and wonder where
the focus went. You need some sort of communication - a change in
color, or at the very least, the normal dotted outline so commonly
seen on tabs.

*** I'm still waiting for someone to add a message WHILE I'm on the
site with NVDA open. No idea if the list gets updated, but I assume
it does. I do know there are no WAI-ARIA roles on the site. So I'm
anxious to know if the new message gets announced. Adding WAI-ARIA
live might be a bit of a challenge, and you'd need to test it on a
development site. A future improvement, I think.
http://www.w3.org/TR/wai-aria-primer/
http://www.w3.org/TR/wai-aria/
http://www.w3.org/TR/wai-aria-practices/
http://accessibleajax.clcworld.net/


*** Thanks for all of that! Very helpful.

No problem! This is, of course, one persons opinion. I'm hoping we
hear from others with their thoughts.

Speaking of thoughts: at this stage of your site, it may be
beneficial to add a "Feedback", "Suggestions" or "Contact Us" link in
the footer (or elsewhere) on your pages. User's have ideas - some of
them may even be useful! :-)

-- tb --