WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility and Form Autofocus on a Login Page

for

From: Moore,Michael (Accessibility) (HHSC)
Date: Jun 10, 2016 2:15PM


This is pretty common in applications and I don't see placing focus in the log-in field as a serious problem. It is very easy to navigate back to the top of the page if I need more information but in most cases what I want to do is to log in so I am right where I want to be.

When the page refreshes and an error message is displayed you could add it to the User ID field description using aria-describedby.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of England, Kristina
Sent: Friday, June 10, 2016 2:22 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Accessibility and Form Autofocus on a Login Page

Hi Everyone,

We are implementing an updated single sign on login page. There were too major issues that arose, one around form autofocus. Basically, when a person navigates to the login page, the screen reader begins reading the page at the User ID field as it's set to autofocus. This means that the screen reader skips a few things - the page name and header, a ticker that alerts people of any expected and unexpected downtime, and also, if they enter their username or password wrong, when the page refreshes, the error is above the User ID field, so it isn't read. Has anyone encountered this issue before? What is the recommended standard and potential solutions?

Thanks!



:: Kristina England, Communications Specialist, PMP
:: Strategy, Research, and Communications
:: University Information Technology Services (UITS)
:: University of Massachusetts Office of the President
:: 774-455-7874
:: <EMAIL REMOVED>

University of Massachusetts : 333 South St. : Suite 400 : Shrewsbury, MA 01545

University of Massachusetts Website: http://www.massachusetts.edu UMass Office of the President Website: http://www.umassp.edu UMass Innovation & Efficiency News: http://www.umassonthemove.net