mozilla / high-fidelity

HTML5 podcast app (for the Web, including FirefoxOS)
https://marketplace.firefox.com/app/podcasts
108 stars 40 forks source link

Make the search results and episode list work with the screen reader #56

Open MarcoZehe opened 9 years ago

MarcoZehe commented 9 years ago

The screen reader built into Firefox OS can be used by blind people to gain access to the screen via synthesized speech. An introduction to it can be found here.

The Podcasts app has two areas where the screen reader cannot activate items.

  1. The list of search results after performing a podcast search.
  2. The list of episodes after opening a podcast item from the main screen.

To reproduce this:

  1. Start the Podcasts app.
  2. Activate the screen reader via the quick toggle (Firefox OS 2.0 and later), as shown in the overview linked above.
  3. Touch a podcast and double-tap. It will open a list of episodes.
  4. Touch any episode and double-tap to activate.

Result: The podcast episode will not load, or anything else.

Expected: The episode should start downloading, playing, or whatever the app is supposed to do. I'm blind myself, so cannot tell what will actually happen.

Same in the search results:

  1. Perform a search.
  2. Touch, then double-tap any of the search results.

Expected: Should bring up the dialog that asks if I want to subscribe.

Actual: Nothing happens.

I found out the latter by toggling the screen reader off, then tapping blindly where the search result approximately was, then toggled the screen reader back on.

The reason for this problem is most likely that both instances don't use links to mark up the individual items. In the main screen, on the other hand, each podcast item is a link, so activation comes for free, along with any other proper semantics. The way the episode and search result items sound, they appear to be clickable spans or something similar.

As a solution, as can also be found in various places in Gaia itself, proper semantics should be used like links in list items within lists to actually make these workable with the screen reader automatically. This will also cause the screen reader to properly read these out as what they are: links. :)

@yzen also has more info if needed, he does a lot of accessibility work on Gaia.

fwenzel commented 9 years ago

Thank you for this detailed bug report, Marco! That's extremely helpful and as a bonus, it looks like this is also easy to fix!

tofumatt commented 9 years ago

Yeah, this is awesome. I might not be able to get to this right away, but rest assured it’s super helpful to have such detailed bug reports :-)