Login Page - Tab Order

[dubrod]

For compliance with Web Content Accessibility Guidelines (WCAG)

The tab order is mostly right, but the language selector in the bottom left corner is out of order. It should be moved in the source code so that it is the last thing on the page in the tab order, both when the login screen is in its default state and when the "forgot your login" feature is activated. I noticed that tabindex is used on some of the links and fields. It's best to not use tabindex with any positive numbers because it overrides the default browser tab behavior in ways that are often undesirable to keyboard users (tabindex="0" is acceptable to put something in the normal tab flow, and tabindex="-1" is acceptable to make something focusable via JavaScript, but tabindex="1" or more is not best practice, but neither of those is necessary in this case). One problem with tabindex of positive numbers is that if you forget to add a tabindex value to a link or form field -- such as the "forgot your login" link and on the "username or email" field and the "send activation email" button -- you run the risk of putting things out of proper order, and that is what has happened here.

The recommendation is to simply put things in the correct tab order in the DOM to begin with and not alter the tab order with tabindex at all.

See accessibility to-do list at https://dequeuniversity.com/modx-accessibility.html#login

[dubrod]

I believe I answered this in #23 but I'll leave it open for now.