Signup: Accessibility fixes

[scruffian]

We had someone test the signup flow from an accessibility perspective. @davidakennedy made the following suggestions:

I took a quick look at this. Here are a few spots where we can improve the experience:

It told me to pick a theme but they don't have any meaning to me so I found the skip button.

This is because the screen shots have no alt attributes, which help describe images to users with assistive technology. See this article for more: http://webaim.org/techniques/alttext/

One way to fix this is adding the theme description as the alt attribute for the theme screenshots. This wouldn't be the perfect alt text for the screenshots, but better than nothing.

Typed kevinrjtesting in to the search field and found the screen confusing. There was one instance of kevinrjtesting then it said "end of search". VoiceOver seemed to find many more kevinrjtesting instances which at first I wasn't sure if it had found those or what that meant. Then I re-found the end of search text so figured it didn't matter.

There are a few issues here:

• The open search button is a div and the close search button is a span. Both of these would work better as button elements since that's the better semantic element, and because of that, various information is communicated to assistive technology APIs. Plus, users hear the words "Close button" so they know they can press it, and something will happen. That's not the case as it is now.
• The search input needs a label. This can either be done with a normal label element or aria-label attribute.
• In order to solve the feedback problem, we could use aria-live to communicate the info in to users. It could return something like "Five search results" or "No search results, try again. See: http://heydonworks.com/practical_aria_examples/#offline-alert as an example.

This is just some of the basics and larger issues that the user was having with the domain page. It's a good place to start.

[fabianapsimoes]

Typed kevinrjtesting in to the search field and found the screen confusing. There was one instance of kevinrjtesting then it said "end of search". VoiceOver seemed to find many more kevinrjtesting instances which at first I wasn't sure if it had found those or what that meant. Then I re-found the end of search text so figured it didn't matter.

@scruffian is this about the Domain step?

[scruffian]

is this about the Domain step?

I believe so.

[albacoretuna]

I tried reproducing this but seems like it's at least partially fixed if I'm not mistaken.

On http://calypso.localhost:3000/start/domains:

• The search box has aria-label="Search"
• The close button aria-label="Close Search"
• Seems like there are always some results shown, regardless of the user input. So the no result part is not happening anymore, besides isn't this part a duplicate of Signup: Screen reader issues with domain picker step #21658
• I couldn't find out the "open search" button
• I can't find the theme selection part

I hope this update help to push this forward, or close it :)

Screenshot:

[lcollette]

This has been fixed.