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

https://slides.com/emmajpr/a11y101-focus

Accessibility

https://www.youtube.com/watch?v=EFv9ubbZLKw

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/summary