1216700 - [meta][Accessibility] New Homescreen has noticeably degraded accessibility.

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect)

Description

[Yura Zenevich [:yzen] (please use "needinfo")]

New home screen has a number of accessibility issues that were not present (worked on) on the old one:

* Each app icon, when focused with screen reader, says Graphic in the beginning. This was not the case, we want to skip graphic (it's for presentation purposes only). We need to make sure that the graphic part is either hidden from screen reader or has role="presentation" (better)

* Dotted page indicators are inaccessible to screen reader. They need to have slider semantics with min max and current values clearly indicated.

* Pages must exclusive from screen reader standpoint. That means that the homescreen must apply aria-hidden="true" to all pages that are not currently visible, and aria-hidden="false" for current page.

* Graphic for pin the web has no alternative textual level.

* #empty-pages is pretty much inaccessible for screen reader. Every time pointer-events: none; is used that content becomes screen reader inaccessible.

* gaia pin card is poorly accessible: lacks any semantics. lacks a good screen reader label.

Comment 1

[Yura Zenevich [:yzen] (please use "needinfo")]

Missed another one, since we land on a graphic for apps, it's not possible to activate any of the apps.

Comment 2

[Julien Wajsberg [:julienw]]

That last one makes the phone totally unusable with a screen reader.

Comment 3

[Chris Lord [:cwiiis]]

Marking this as a meta bug and filing individual bugs (which will block 2.5).

Comment 4

[Chris Lord [:cwiiis]]

I've split these out into separate bugs, except:

"Dotted page indicators are inaccessible to screen reader. They need to have slider semantics with min max and current values clearly indicated."

Yura, this isn't an interactive element, it is just an indicator of the current page, and it already has an aria-label. Is this not what we should be doing? If not, could you be very specific about how this can be fixed?

I'm also uncertain about hiding pages that aren't on the screen - does this make sense, when you can always scroll to reveal either page? Could you elaborate on what the experience should be here?

Comment 5

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Chris Lord [:cwiiis] from comment #4)
> I've split these out into separate bugs, except:
> 
> "Dotted page indicators are inaccessible to screen reader. They need to have
> slider semantics with min max and current values clearly indicated."
> 
> Yura, this isn't an interactive element, it is just an indicator of the
> current page, and it already has an aria-label. Is this not what we should
> be doing? If not, could you be very specific about how this can be fixed?

Hi Chris. Yes, I noticed the aria-label however the way platform a11y works is that it will not be landing (ignores) on generic elements (without any semantics) even if they have labels. By such elements I mean divs and spans. The screen reader user can already scroll (with 2 fingers) right and left between the pages however there's no way for them to discover that there are more than one. I suggest in this case that doing something similar to the very original home screen would be very beneficial to the SR user:

https://github.com/mozilla-b2g/gaia/blob/v2.0/apps/homescreen/index.html#L76-L78
https://github.com/mozilla-b2g/gaia/blob/v2.0/apps/homescreen/js/pagbar.js#L44-L45

> 
> I'm also uncertain about hiding pages that aren't on the screen - does this
> make sense, when you can always scroll to reveal either page? Could you
> elaborate on what the experience should be here?

So what happens here is that we should generally keep stuff hidden from screen reader that is already off screen. The only way to do it is either with visibility hidden, display none or aria-hidden true. This case I believe is similar to the cards view that we have were we only show 1 current card to the screen reader. Users still can, however, scroll horizontally to switch between different cards there. The only thing that we control dynamically is screen reader visibility of current vs other cards via aria-hidden property.

Comment 6

[Chris Lord [:cwiiis]]

Hi Yura,

I've fixed most of the things you've pointed out but I don't think we're quite there yet (Alberto is working on the cards). Things I notice:

- I can't switch focus to any icons other than by long-pressing them
- I can't switch focus between the pinned pages indicator and anything else
- I can't manually focus anything on the empty pinned pages page

That third problem I wasn't experiencing earlier today, so maybe I've broken it with a subsequent change?

I also can't scroll at all, which seems to be a general problem (I've filed bug 1217388), which is making this a real pain to test...

Can you advise on any of this? I'm sure I used to be able to switch focus between icons a while ago and I notice that the icons have tabindex=0 set on them, so shouldn't they be in the focus chain?

I'd love to get this all sorted out before the end of the week, this is currently my top priority.

Comment 7

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Chris Lord [:cwiiis] from comment #6)
> Hi Yura,
> 
> I've fixed most of the things you've pointed out but I don't think we're
> quite there yet (Alberto is working on the cards). Things I notice:
> 
> - I can't switch focus to any icons other than by long-pressing them

There are 2 ways of focusing on things with a screen reader:
* by long pressing items (as you described)
* by swiping left/right with 1 finger. This will result in sequential navigation (in context of a DOM tree) to the previous/left focus-able item.

> - I can't switch focus between the pinned pages indicator and anything else

Do you switching between apps and pinned stuff pages by swiping. If so, I believe you should be able to do that with 2 finger swipe left or right (fast as a swipe, not slow as a scroll).

> - I can't manually focus anything on the empty pinned pages page

I noticed there was something landed today that implements points-events: none on the pin web page. That would make the whole block screen reader inaccessible. Is that what you experience?

> 
> That third problem I wasn't experiencing earlier today, so maybe I've broken
> it with a subsequent change?
> 
> I also can't scroll at all, which seems to be a general problem (I've filed
> bug 1217388), which is making this a real pain to test...
> 
> Can you advise on any of this? I'm sure I used to be able to switch focus
> between icons a while ago and I notice that the icons have tabindex=0 set on
> them, so shouldn't they be in the focus chain?
> 
> I'd love to get this all sorted out before the end of the week, this is
> currently my top priority.

Thanks for driving this!

Comment 8

[Chris Lord [:cwiiis]]

Huh, this is odd - I unlocked my phone this morning and everything is working as expected... This is the same build and phone I was using yesterday, but now none of the problems I highlight in comment #6 are manifesting and it works perfectly :/

I'm going to do some more testing, but assuming this is either a transient problem, or some silly thing easily fixed, we'll be done after bug 1217033 :)

Comment 9

[Chris Lord [:cwiiis]]

Looks like the issue I was having happens when you install the homescreen via install-gaia while it's running... Not sure why this is, but restarting the b2g service on the phone fixes the issue. Possibly a window management issue?

Anyway, this is almost fixed now, one last bug.

Comment 10

[Chris Lord [:cwiiis]]

I think we may be good here now - with the screen reader, I can switch between all elements, activate homescreen icons, switch between panels, activate pinned pages, read the empty pinned pages text.

Edit mode remains inaccessible from the screen reader, meaning apps can only be uninstalled from the Settings and bookmark titles can't be edited (I don't think?).

n?yzen to see if there are any further issues we need to fix before marking this closed, and any tips on how to fix them if so.

Comment 11

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Chris Lord [:cwiiis] from comment #10)
> I think we may be good here now - with the screen reader, I can switch
> between all elements, activate homescreen icons, switch between panels,
> activate pinned pages, read the empty pinned pages text.
> 
> Edit mode remains inaccessible from the screen reader, meaning apps can only
> be uninstalled from the Settings and bookmark titles can't be edited (I
> don't think?).
> 
> n?yzen to see if there are any further issues we need to fix before marking
> this closed, and any tips on how to fix them if so.

Thanks for the effort. It looks waaay better now! A couple of things to address to make it absolutely rock:

* Role main for #panels is not necessary. It just makes things too verbose
* Can we add to both apps panel and pages panel container aria-labelledby="page-indicator-header" since it contains a nice and up to date label for what the page has.
* Page indicator values make little sense to the user: 0 and 1 is something developer would understand (list starting at index 0) but not an average user. I would update 0 and 1 for min and max to 1 and 2. And can we add a aria-valuetext for the slider as well that would have something like Page {{x}} of {{y}}. The valuetext would need to be updated together with valuenow. The screen reader then will pick up valuetext and give it preference over valuenow.

Thanks again!

Comment 12

[Yura Zenevich [:yzen] (please use "needinfo")]

Just to clarify aria-labelledby="page-indicator-header" would need to be on both containers (for apps panel and for pages panel).

Comment 13

[GitHub Autolander Bot]

Attachment: [gaia] Cwiiis:bug1216700-homescreen-a11y-polish > mozilla-b2g:master

Comment 14

[Chris Lord [:cwiiis]]

Comment on attachment 8678443 [details] [review]
[gaia] Cwiiis:bug1216700-homescreen-a11y-polish > mozilla-b2g:master

Make all the changes suggested in comment #11 and add an extra unit test for the page indicator accessibility.

Comment 15

[Guillaume Marty [:gmarty]]

Comment on attachment 8678443 [details] [review]
[gaia] Cwiiis:bug1216700-homescreen-a11y-polish > mozilla-b2g:master

Looks good!

Comment 16

[Carsten Book [:Tomcat]]

https://github.com/mozilla-b2g/gaia/commit/8ff28da654e3454e907bf7d996c614f5d6267fdc