Elements cannot be focused

Priority: 1

Introduction

All interactive elements — buttons, links, form controls — need to be focusable by keyboard. If they cannot be focused they cannot be activated, meaning users who depend on the keyboard for navigation will miss out on functionality.

Common mistakes include using <div> or <span> elements as substitutes for <button>s and links. Or using a link as a button and omitting its href which makes it a ‘placeholder link’ that does not receive focus.

WCAG criteria

• 2.1.1 Keyboard (level A)
• 2.4.3 Focus Order (level A)

Scope of the issue

Join site

There are instances of links being used to trigger JavaScript events, with their href omitted. Critically, the “Switch now” button (found on the “Switch now” page, and pictured below) cannot be focused.

The “See tariff details” control below it suffers the same issue. Here is the code (note the lack of href):

In addition, the “Continue to the next step” control in the “Is your email address correct?” dialog (pictured) is a <span> with a ng-click handler, meaning it is not focusable and not communicated as an interactive element in assistive technologies.

Fixing the issue

Join site

The “Switch now” button should remain a link, because it navigates the user to a new screen. It is recommended the href provided is the URL of the page to which the JavaScript transports the user. The “See tariff details” control below it should be a <button> since it invokes an in-page dialog screen.

The “Continue to the next step” control in the “Is your email address correct?” dialog should be a link with an href pointing to the “next step”. See Routing for the related issue about different screens in the Join site using the same URL.