WTF are Accessible Design Patterns?

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/