Understanding Motor Impairments (5 minutes)

Key ideas:

• Motor impairments affect:
  • Dexterity
  • Precision
  • Speed
  • Ability to use a mouse or touchscreen
• Many users:
  • Navigate keyboard-only
  • Use alternative input devices
  • Experience fatigue or tremors

Important: “Motor impairments are about interaction difficulty, not understanding.”

Setting the tone:

• Accessibility here is about operability
• Closely tied to WCAG’s Operable principle

2. Keyboard-Only Navigation (10 minutes)

Core concept

• Many motor-impaired users cannot use a mouse
• Keyboard navigation is their primary (or only) method

Cover:

• Tab key navigation
• Logical focus order
• Interactive elements must be reachable
• Everything clickable must be keyboard operable

Common barriers

• Click-only controls
• Custom components that don’t receive focus
• Hidden interactive elements

Teaching emphasis: “If you can’t reach it with a keyboard, it doesn’t exist.”

3. Focus Indication & Focus Visibility (10 minutes)

What is focus?

• Visual indicator showing where the keyboard is currently active

Cover:

• Default browser focus styles
• Why focus visibility matters
• WCAG requirement: focus must be visible

Common failures

• outline: none
• Focus styles removed for aesthetics
• Focus too subtle to notice

Explain:

• Focus is the motor equivalent of sight
• Without it, users are lost

4. Designing Good Focus Styles (8 minutes)

Discussing examples:

• Background colour change
• Border change
• Outline styles
• Combining multiple visual cues

Key points:

• Focus must be:
  • Highly visible
  • Clearly distinct
  • Consistent across the site

Rule of thumb: “Focus styles should be impossible to miss.”

5. Tabindex & Focus Order (7 minutes)

What tabindex does

• Controls the order elements receive focus

Cover:

• Natural DOM order is best
• Avoid positive tabindex values
• Dangers of manipulating focus order

Common mistakes:

• Skipping important elements
• Trapping users in sections
• Jumping focus unpredictably

Teaching message: “Focus order should follow reading order.”

6. Overlays, Modals & Keyboard Traps (8 minutes)

Why overlays are dangerous

• Can trap keyboard users
• Can hide content without notice

Cover:

• What a keyboard trap is
• Why it’s devastating for motor-impaired users
• Requirements for accessible overlays:
  • Focus moves into the overlay
  • Focus stays inside while open
  • Users can close it with keyboard
  • Focus returns to original position

Stressing : “Never take control away from the user.”

7. Pointer Gestures & Hit Areas (6 minutes)

Motor challenges

• Small click targets
• Precision gestures
• Complex interactions

Cover:

• Large hit areas
• Avoiding complex gestures
• Supporting cancellation and undo
• Avoid time-sensitive actions

Relate to:

• Touchscreens
• Voice input
• Switch devices

8. Timeouts, Motion & User Control (4 minutes)

Briefly cover:

• Short timeouts are hostile to motor impairments
• Users may need more time
• Motion-based actions should have alternatives

Key idea: “Speed should never be required to succeed.”

9. Summary & Key Takeaways (2 minutes)

Reinforce:

• Motor impairments affect interaction, not intelligence
• Keyboard accessibility is foundational
• Focus visibility is non-negotiable
• Users must retain control at all times

Closing: “If a user can operate your site slowly, carefully, and entirely by keyboard — you’re on the right path.”

Motor Impairments: Quick Class Quiz

Instructions:
Answer all questions. Choose the best answer.

1. Many users with motor impairments primarily navigate the web using:

A. Screen readers
B. Voice assistants only
C. A mouse with reduced speed
D. The keyboard

2. Why is keyboard-only navigation critical for accessibility?

A. It improves website performance
B. Some users cannot use a mouse at all
C. It replaces the need for screen readers
D. It is required only for mobile users

3. What is “focus” in the context of keyboard navigation?

A. The mouse cursor
B. The currently active keyboard location
C. The highlighted heading
D. The selected text

4. Which of the following is a common focus-related accessibility failure?

A. Using too many colours
B. Removing the default focus outline
C. Using semantic HTML
D. Allowing tab navigation

5. True or False:

If an element looks clickable, it must also be reachable and usable via the keyboard.

6. What is a “keyboard trap”?

A. A shortcut that cannot be disabled
B. A situation where focus cannot move away from an element
C. A browser bug
D. A screen reader issue

7. When a modal or overlay opens, what should happen to keyboard focus?

A. It should remain where it was
B. It should move to the top of the page
C. It should move into the overlay
D. It should be disabled

8. Why are large hit areas important for motor-impaired users?

A. They reduce page load time
B. They improve visual design
C. They make precise movements unnecessary
D. They replace keyboard navigation