Ensure simulated controls are keyboard accessible - Signup

Description

The Meeting Details view of the environment provides a feature to allow the user to add additional participants to the currently selected meeting. However, the control to add participants is created by placing an onclick event handler on an HTML <label> element that does not receive keyboard focus. As such, keyboard-only users have no way of navigating to or activating the control.

Developers must ensure that all simulated controls implemented in the environment are keyboard accessible. As this control is created by placing an onclick event handler on a <label> element, a <tabindex> attribute with a value of "0" must be placed on the <label> to ensure that it can receive keyboard focus. Further, device-independent event handlers must be provided to allow the control to be activated by the keyboard as well as a mouse click.http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/82119d3e-4a6e-4b26-8cee-5b95a366fef6/organizer/orgSignupMeeting#A84dfddfb4fa546594fb0a95ead23702-HTML

Attachments

1

Activity

Show:

Matt Clare April 24, 2017 at 1:48 PM

This area is the problem:

The problem stems from onClick being a mouse dependent event handler. There are details here http://webaim.org/techniques/javascript/eventhandlers

If everything else is easy, then my advice is re-implement as a <button> and it will solve a lot of issues! If that's a lot of chance, perhaps the event logic can be more forgiving to tabbing in?

Fixed

Details

Priority

Affects versions

Fix versions

Components

Assignee

Reporter

Created August 2, 2016 at 3:24 PM
Updated April 25, 2017 at 12:59 PM
Resolved April 25, 2017 at 12:59 PM