display:none; is a problem for screen-readers - http://drupal.org/node/58941

Users with accessibility issues need to be able to login via Jaws, etc, so this is a critical problem for the adoption of openid.

The included patch mostly works, although if you cancel the openid login the normal user/password form does not show up for some reason.

Please review this patch and let us know if the offscreen approach works for you. Also, really like some ideas about the cancel link not working.

CommentFileSizeAuthor
openid_accessibility.patch3.83 KBmgifford

Comments

johnbarclay’s picture

johnbarclay commented

+1. Works for me. I'm not using openid, but the ui passes my accessibility tests now.

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
commented
Status: Needs review » Needs work

I see a small problem with the JavaScript-enabled version :

When clicking on "Cancel OpenID login", the username and password fields stay invisible.

To reproduce:
1- enable OpenID.
2- log out.
3- Press "Log in using OpenID"
4- Press "Cancel OpenID login"

You need to load manually the page to show again the username and password fields. You might need to add another line in the JS part.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +CSS, +jQuery

Just opening this up to some other tags since the collapsible fields use both.

mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented

hi.

I have just used Jaws, Window Eyes, and NVDA on that open id form, and I see no problem in the current implimentation:

I first get the 2 boxes for username and password, followed by a link labled "login using open ID". I click that and my screen reader puts focus on the text box labled "login using open ID:" and after that the usual "what's Open ID?" afterwards I get "cancel Open ID login", which if I click the open ID box changes back to the normal login and password fields.

just to be just, NVDA's support for IE in the offical version wasn't worked on, so there's some confusion in dealing with the form. however, with firefox, NVDA deals with it very nicely. it has even has advantages over jaws and window eyes, in that it reports: "login using ID" field has auto complete".

so, what is the problem that you seek to solve here?

mgifford’s picture

mgifford
he/him
Primary language English
commented

openid uses display:none to expand/collapse the fields. It does not seem to be the best practice - http://webaim.org/blog/hiding-content-for-screen-readers/

Also, more traffic on this in the groups - http://groups.drupal.org/node/20584

Jeff Burnz’s picture

Jeff Burnz commented

I can confirm mohammed76 user experience with OpenID login. In this instance it appears that display: none is appropriate to reduce confusion. It does not make sense for a screen reader to read out "What is OpenID?" and "Cancel OpenID login", when one has not yet chosen to use it.

@mohammed76 - do you think it would make sense to move the "Cancel OpenID login" link to above the login button? This would change the tab order so you did not have to tab past the login button to cancel.

If not, then my vote would be to close this issue.

mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented

hello Jmburnz,

as long as the "cancel open ID" is hidden because I haven't chosen to use it anyway, I won't care where the link is located in respect to tab order. however, if I did *choose* to use it, then it would make sense to find it in its current tab order.

Voting to closing this issue too.

thanks.

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
commented
Status: Needs work » Closed (won't fix)

Agreed since this patch is causing more issues than solving ones.