Explore web accessibility

Event Handling

Goal: attaching device-independent event handlers to interactive elements.

When using semantic html tags, these are generally taken care of. But when we use non-semantic html for tags for creating interactive elements, like using div to create buttons or dropdowns, etc., we need to attach explicit event handlers to make them accessible to assistive technologies.

Demo:

With onMouseUp event

With onKeyDown event

Best practices:

Use onkeyup instead of onmouseup
Use onkeydown instead of onmousedown
Use onclick instead of onkeypress

Sample code (taken from Keyboard event keys)

  window.addEventListener("keydown", function (event) {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }
  
    switch (event.key) {
      case "Down": // IE/Edge specific value
      case "ArrowDown":
        // Do something for "down arrow" key press.
        break;
      case "Up": // IE/Edge specific value
      case "ArrowUp":
        // Do something for "up arrow" key press.
        break;
      case "Left": // IE/Edge specific value
      case "ArrowLeft":
        // Do something for "left arrow" key press.
        break;
      case "Right": // IE/Edge specific value
      case "ArrowRight":
        // Do something for "right arrow" key press.
        break;
      case "Enter":
        // Do something for "enter" or "return" key press.
        break;
      case "Esc": // IE/Edge specific value
      case "Escape":
        // Do something for "esc" key press.
        break;
      default:
        return; // Quit when this doesn't handle the key event.
    }
  
    // Cancel the default action to avoid it being handled twice
    event.preventDefault();
  }, true);

Explore Web Accessibility (a11y)

Event Handling

Demo:

Best practices:

Sample code (taken from Keyboard event keys)

Resources: