Accessibility 101:
Focus

Accessibility

What is focus?

What is focus?

  • A browser's awareness of which on-screen control is currently receiving input from the keyboard, clipboard or other means.
     
  • Link / button
  • Checkbox / radio button
  • Input field
  • Custom control

Who does it help?

Who does it help?

  • Switch users
    • movement trackers
    • puff & suck pipes
    • buttons (head/foot/arm)
    • etc.
  • Keyboard users
    • screen reader enabled
    • arthritis / RSI / injury
    • mouse not working
    • shortcuts

* screen readers also have own "focus/cursor" for reading

How can you see/use it?

How can you see/use it?

  • Browser default style
  • Web page styles
  • Announced by screen reader
     
  • Tab
  • Shift + Tab
  • Space / Enter

* Safari requires Option + Tab unless you change settings

Try it out!

  • Go to your favourite site and see if you can navigate using only the keyboard.
  • What works?
  • What doesn't work?

* it doesn't have to be BBC

Design

  • Don't rely on the default style
  • Include styles for interactive elements hover, focus, active and visited/used states
  • Decide if hover and focus could/should look the same
  • Annotate the order focus should follow
  • Make it clear to the developer and tester what should happen

Development

  • Ensure all interactive/actionable elements can receive focus
  • Use taborder="0" or "-1" to include or exclude elements from focus order
  • Use HTML order to define focus order
  • Make sure other page styles do not obscure the focus style (LVFHA)
  • Define :focus style
  • Identify controls that could/should behave as a single element
  • Ensure you don't trap the user

Testing

  • Try to do everything using only a keyboard
     
  • Which elements
  • Visibility
  • Order
  • Traps

Accessibility