1. Keyboard Accessibility
Keyboard Accessibility & .focus() Management in Web Development

2. Relevant Standards Explicitly Implicitly SC 2.1.1Keyboard
SC No keyboard trap
SC Focus order
Implicitly
SC On Focus
SC On Input
SC Error Identification

3. Keyboard users
Can use arrows and paging keys to scroll content and read the page
Use Tab and shift-Tab to jump to interactive elements
Use Enter, Space and arrow keys to interact with “widgets”

4. Screen reader users
Have a large number of keyboard commands to explore and navigate the page
Jump directly between elements of a particular type
Pull up lists of types of elements
Have specific commands to move back and forth and read the DOM
Use Tab and Shift-Tab to navigate interactive components
Use Enter, Space and arrow keys to interact with “widgets”

5. Keyboard interactivity
Keyboard interaction must be implemented to match the role of the element
Defined in the ARIA authoring practices

6. <button> Space: activates the button Enter: activates the button
<button> already implements, just listen for the click event
defaults to submit
reset, button and menu
What happens afterwards, depends on context

7. <a> Keyboard focusable (if href)
Implements ENTER to generate click
Announced as a link, not a button
Navigates to the URL
Turn into a button
Add role=“button”
Call event.preventDefault()
Add JavaScript keydown handler for SPACE

8. <div> Not keyboard focusable No keyboard interaction (scrolls)
Not announced
Turn into a button
Add JavaScript key down listener for SPACE and ENTER
Call event.preventDefault()
Add JavaScript click listener
Add tabindex=“0”
Add role=“button”

9. Common pitfalls
Calling event.preventDefault() for all keyboard events creates a keyboard trap
Cannot tab off the element
No role means screen readers cannot access it

10. ?
Why use anything but a <button>?

11. ?
Why use anything but a <button>?
Why ARIA at all?

12. ? Why use anything but a <button>? Why ARIA at all?
Retrofitting existing applications
Framework choice
More CSS control (sic)

13. Semantic HTML Use a link for a link
Links open other pages or navigate to different locations on the same page
Think teleportation

14. Semantic HTML Use a button for a button Buttons act on things
Think transmogrifier

15. What is focus? Ensuring a user sees important information
Ensuring a user is aware of important updates
Ensuring a user’s point of interaction is maintained/logical
© All Rights Reserved

16. Keep the DOM content order logical
Rules
Keep the DOM content order logical

17. Make sure all “widgets” are focusable
Rules
Make sure all “widgets” are focusable

18. Shift focus to the logical interaction point
Rules
Shift focus to the logical interaction point

19. <button>
If opening dialog, shifts to dialog

20. Logical Interaction Point
Maintaining interaction point becomes an issue under various different scenarios:
One scenario is that a popup appears that requires interaction.
What should happen here?
Firstly, the popup must grab focus so as to inform the user of the required action,
Secondly, when dismissed, the focus must go back to where the user was, so they can carry on

21. <button> If opening dialog, shifts to dialog
If closing dialog usually shifts to opening button
If activating focus does not change context, focus stays on button
If activating causes a change in context, move to next logical point

22. Logical Interaction Point
Another common scenario is where an action will result in the focused element itself disappearing.
What should happen here?
The answer is that the focus should move to the next item in the list so that the user can decide what to do with that item

23. <button> If opening dialog, shifts to dialog
If closing dialog usually shifts to opening button
If activating focus does not change context, focus stays on button
If activating causes a change in context, move to next logical point
If activated through shortcut, focus usually does not move

24. Announce important updates that happen away from the focal point
Rules
Announce important updates that happen away from the focal point

25. Announcements Chat applications Submission errors
Asynchronous errors (e.g. Internet connection loss)
If you would use a toast in a mobile app, announce!

26. Announcement Pitfalls
Over-sharing
Using ARIA live on page load
Making announcements when focus is changing
misusing assertive

27. Advanced Examples

28. Modal Dialog
Maintaining interaction point becomes an issue under various different scenarios:
One scenario is that a popup appears that requires interaction.
What should happen here?
Firstly, the popup must grab focus so as to inform the user of the required action,
Secondly, when dismissed, the focus must go back to where the user was, so they can carry on

29. Modal Dialog Set aria-hidden=“true” on all content outside the modal
Set tabindex=“-1” on all links
Set disabled=“disabled” on all other naturally focusable elements
Input
Button
Textarea
Select …
Reset when dialog closes

30. Questions?

31. Deque’s Full CSUN Schedule:
Sign up to receive
presentation slides:
Deque’s Full CSUN Schedule:
@dequesystems

32. Stump the Accessibility Expert Deque Party + Accessible Karaoke
[ONLY INCLUDE IF YOU’RE PRESENTING ON WEDNESDAY!!]
Stump the Accessibility Expert
Today – 3:30-4:30pm
Deque Party + Accessible Karaoke
Today – 6:30-10pm Palm Foyer
aXe Hackathon
Saturday, March 4th 9am-12pm
Solana Beach AB Room