1. 28
    WTF are Accessible Design Patterns?
    1m 44s

WTF are Accessible Design Patterns?

Erin Doyle
InstructorErin Doyle

Share this video with your friends

Send Tweet

Although elements that are natively keyboard accessible should be used when possible, there are times when HTML falls short and custom "widgets" are necessary. Complex menus, sliders, dialogs, tab panels, etc. must all be built to support keyboard and screen reader accessibility.

Widget behavior expectations

  • For more complex widgets there are expectations by keyboard and screen reader users as to how these specific widgets will behave and can be navigated
  • Interactions must be intuitive and predictable
  • Events triggered by mouse clicks should also be able to be triggered via keyboard
  • The state of the widget should always be clear

References

  • https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex
  • https://inclusive-components.design/
  • https://a11yproject.com/patterns/
  • https://webaim.org/techniques/keyboard/
Eddie Henrique
Eddie Henrique
~ a year ago

Amazing, I also agree that focus on the tittle sometimes is a much better user experience than focusable elements. Thank you very much for this !

Erin Doyle
Erin Doyleinstructor
~ a year ago

I also agree that focus on the tittle sometimes is a much better user experience than focusable elements.

Thank you! And to back up my assertion here's why I think that focusing on the title can be a better experience in some scenarios: https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/