Accessibility Examples - Keyboard Interface (MAS 36)

Bad

Tab Index

Mouse/Click Events

I can be clicked with the mouse but I am not focusable and cannot be activated by the keyboard.

Adding the tabindex attribute set to 0. This achieves keyboard focus but does not handle the ENTER keypress.

I can be focused and clicked with the mouse but keyboard will not activate me.

Good

Tab Index

Mouse/Click Events

Use native elements unless you are creating a composite control. Here we replace the span with an anchor and set the href so mouse/keyboard events are handled.

I can be focused, clicked with the mouse and activated by the keyboard