1347084 - [a11y] Feedback needed for Form Autofill UX design

Status: RESOLVED FIXED

(Firefox :: Disability Access, enhancement)

Description

[Vance Chen [:vchen][skype:vance.lucida][[e-mail]]]

Need a11y review on the Form Autofill UX design :

Profile autofill : https://mozilla.invisionapp.com/share/AP8TFZ22G#/screens

Credit Card autofill : https://mozilla.invisionapp.com/share/7ZA4WEK9W#/screens

Comment 1

[Vance Chen [:vchen][skype:vance.lucida][[e-mail]]]

Hi Eitan/Marco/David/Yura, 

Could you help to provide feedback on the Form Autofill UX spec ?

Comment 2

[Marco Zehe (:MarcoZ)]

I'm afraid I'm out of the game at this stage. The design is graphic only, and since I'm the blind guy here, there's nothing I can comment on. There is no textual alternative.

Comment 3

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

So a couple of comments and notes:

* It would be just amazing if input field (when in focus) had also a background colour style in addition to the border (similar to preview).

* Keybaord activation of the form field is always two step: first - focus on the input field, second - press down to expand autofill (unless the user starts typing and it shows up automatically).

* When autofill opens up, keyboard focus should remain on the input field and should not go into the dropdown. Keyboard navigation and selection within the drop down should be done with arrow keys and not tabbing. Current active element in the drop down should always be shown/tracked (impl. detail - aria-activedescendant should be used).

* Since suggestions list can be big (and scrollable) there should be a way to get to the fixed bottom part without having to go through the whole list with the keyboard.

* Saved profile prefs have low contrast overall.

* Saved profile prefs are displayed as modal dialog. We need to be careful with keyboard interactions and focus handling there to make sure that the user does not get themselves into a keyboard trap.

* Icons for creditcards (and other ones) must have textual description too.

Comment 4

[Juwei Huang[:juwei]]

Hi Yura, 
Thanks for all the useful feedback! Super appreciate it :)
Please see my comment inline:

(In reply to Yura Zenevich [:yzen] from comment #3)
> So a couple of comments and notes:
> 
> * It would be just amazing if input field (when in focus) had also a
> background colour style in addition to the border (similar to preview).

Juwei: we don't have plan for it since the drop down suggestion already indicates that the autofill is activated.
However, I'm still interested on your point of view if you can elaborate more.

> 
> * Keybaord activation of the form field is always two step: first - focus on
> the input field, second - press down to expand autofill (unless the user
> starts typing and it shows up automatically).

Juwei: yes. This is to prevent the drop down shows up immediately where some users might feel bothersome.
> 
> * When autofill opens up, keyboard focus should remain on the input field
> and should not go into the dropdown. Keyboard navigation and selection
> within the drop down should be done with arrow keys and not tabbing. Current
> active element in the drop down should always be shown/tracked (impl. detail
> - aria-activedescendant should be used).

Juwei: that's a good point.
> 
> * Since suggestions list can be big (and scrollable) there should be a way
> to get to the fixed bottom part without having to go through the whole list
> with the keyboard.

Juwei: you're right. We do have a fixed bottom which direct to autofill settings, so I guess it won't be a problem here.
> 
> * Saved profile prefs have low contrast overall.
Juwei: the visual spec is here: https://mozilla.invisionapp.com/share/GD8ND99QZ#/222029806_Manage_Profile_Autofill
Let me know if it's still low contrast.
> 
> * Saved profile prefs are displayed as modal dialog. We need to be careful
> with keyboard interactions and focus handling there to make sure that the
> user does not get themselves into a keyboard trap.
Juwei: Indeed. I'll try to test it once implementation is done.
> 
> * Icons for creditcards (and other ones) must have textual description too.
Juwei: I'll add the description to the icon, thanks for reminding!

Need info myself for further ux update.

Comment 5

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

Hi Juwei, here are some more comments:

* I tried looking at contrast styles but some background vs font colours are missing. In any case we should make sure that all font/background contast passes a AA accessibility guideline. You can see/check/verify the styles here: http://webaim.org/resources/contrastchecker/

* Regarding the background for focus form fields: long standing convention is to just use an outline of the field to indicate focus. However it has been the reason for many complains from accessibility community because just outlining fields is often hard to see for persons with low vision for example. It's not really a strict requirement but a nice to have, as long as the form field outline is clearly visible.

Comment 6

[Juwei Huang[:juwei]]

Hi Yura,
Thanks for sharing the link, very helpful! I'll compare the color and text in the visual spec. As for the second questions, I'm afraid we don't have good solution for now. It's more like a general component issue. But thank you for letting me know!

Comment 7

[Eitan Isaacson [:eeejay]]

Just got back from leave, looks like Yura helped out here!

Comment 8

[Matthew N. [:MattN]]

Hello Juwei and Fang, can you please resolve this bug once the feedback has been incorporated? Thanks

Comment 9

[Fang Shih [:fang]]

This is the latest visual spec. 
https://mozilla.invisionapp.com/share/GD8ND99QZ
We've updated the color contrast in order to pass AA accessibility guideline. 
Thanks.

Comment 10

[Juwei Huang[:juwei]]

Since visual is updated, I guess we can close the bug :)