Day 28: Accessible JavaScript Events

Published on 28 Dec 2018

• journal
• resources
• was
• javascript

Today I sought to learn about JavaScript events. Specifically, in the context of accessibility, I wanted to dig deeper into two ideas that can make or break the interaction of assistive technologies with websites and web apps:

1. there should be no more than one event assigned to an element (some exceptions may apply)
2. create device-independent event handlers

Searched for articles and videos pertaining to proper use of event handlers to optimize accessibility.

As developers, we shouldn't offer interaction with just one type of device or peripheral. Coding device-independent event handlers will open up the experience to a wider audience of users. We know to make our sites keyboard accessible, but we shouldn't build just for keyboard users either. Examples of device-independent event handlers:

• onFocus
• onBlur
• onSelect
• onChange
• onClick (when used with links or form elements)

The examples aforementioned are not unbreakable. Altering default behaviors can present problems.

While searching for articles, I was amazed to go back 10 years (or more!) on the topic of accessible JavaScript. My time in this field is still so fresh and new that I forget how long these conversations have been going on. A huge thank you to all who have initiated these conversations and built an education for the rest of us!

• JavaScript Event Handlers (WebAIM)
• Handling common accessibility problems (MDN)
• Web Accessibility Tutorials (W3C)