# Keyboard Events to support A11y using React

**URL:** <https://forum.kirupa.com/t/keyboard-events-to-support-a11y-using-react/638144>\
**Category:** web dev\
**Created:** [April 26, 2018, 1:05pm UTC](https://forum.kirupa.com/t/keyboard-events-to-support-a11y-using-react/638144 "2018-04-26T13:05:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kishore1288](https://avatars.discourse-cdn.com/v4/letter/k/9de0a6/32.png) [@kishore1288](https://forum.kirupa.com/u/kishore1288)\
**Post date:** [April 26, 2018, 1:05pm UTC](https://forum.kirupa.com/t/keyboard-events-to-support-a11y-using-react/638144/1 "2018-04-26T13:05:45Z")

</div>

Keyboard Events to support Accessibility .

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [April 26, 2018, 5:16pm UTC](https://forum.kirupa.com/t/keyboard-events-to-support-a11y-using-react/638144/2 "2018-04-26T17:16:30Z")

</div>

I’m not sure I am going to give you the answer you need. Let me know, and/or ask again.

First it’s a good idea to run through tab key events on your app. React can allow for multipage, and modals that will sometimes sit outside or are hidden from the tab order. Be sure to use **tabIndex=“0”** on elements. Also you can create **focus()** when a **componentDidMount().**

Make sure that when a user tabs to an element that has an expected action (link, button, toggle) that a keyboard spacebar or enter key action will be associated as an event trigger on that element.

One can use **aria-label** or **aria-labelledby** attribute to give better **A11y** labeling support though I’m not an expert so be sure to read the documentation like at MDM Web Docs.

**onKeyDown={this.handleKeyPress}** can be added as an event listener to a focused container/div. You can then assign arguments based on keys you would want to assign to keyboard shortcuts.

**handleKeyPress = (ev) =\> {**  
**ev.stopPropagation()**  
**if (ev.key === ‘ArrowRight’) {**  
**this.handleNext(ev)**  
**}**  
**}**

React’s synthetic events make it fairly simple.  
Hope that helps 🙂