Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

How to make button accessible with keyboard

Avatar

Level 2

Like when user click on the tab button the focus will go on button and if click on enter the button link will open.

3 Replies

Avatar

Level 5

Hi @ssin93 ,

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard

 

https://stackoverflow.com/questions/46836636/how-to-make-my-click-accessible-through-keyboard-tab

Thanks

Avatar

Community Advisor

Hi, 

This is plain JS. One of the options is to use an anchor element (<a>) instead of a button element and style it to look like a button. Otherwise, you just need to add a listener to your button element to react to a key press event, ensuring the key is either the spacebar or enter button, and invoke whatever action is needed. If the button is not part of the document navigation, ensure you include it by using tabindex.
Here you have an example of the latter option:

https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp 

https://stackoverflow.com/questions/8940714/set-tabindex-for-button-not-working

 

Hope this helps



Esteban Bustamante

Avatar

Administrator

@ssin93 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni