hub.eb?material_id=514&track_id=516
Login
Back

Accessible Interactive Elements

Where possible don’t add client-side onclick event handlers to controls that aren't typically interactive (e.g. a Panel Control).

If you do want to do this, you should also add a tabindex=0 attribute and onkeypress event handlers so the functionality is also available to users navigating the page using just the keyboard.

As an alternative, you could add phrasing content such as Text Controls and Image Controls to a Button Control to create the same effect.

Steps

1

Create a form and add Panel Control.

2

Add an onclick HTML event handler to the panel with the following code:

alert("Hello!");
3

Add an onkeypress HTML event handler to the panel with the following code:

// check which key was pressed
if(event.code == "Enter"){
  alert("Hello!");
}
4

Add tabindex=0 to the panel as a custom attribute.

5

Run the form and press tab, focus will shift to the empty panel.

Click the panel or press enter to trigger the alert.

Previous PageNext Page

Current Module

Accessibility Best Practices
view
Accessible Page Configuration
view
Alternative Texts
view
Accessible Styling
view
Accessible Interactive Elements
Accessible List Fields
view

Related

Keyboard Navigation
view
ARIA Roles
view
Accessible Zoom
view
ARIA Required
view
Accessible Structure
view
Previous PageNext Page