Day 38: Accessible Custom Widgets Overview
And, to be honest, after all this reading and Googling, I'm ready to jump back into coding with CodePen, as well as my local environment.
Things I accomplishedPermalink for "Things I accomplished"
- Read Marco Zehe's If you use the WAI-ARIA role "application", please do so wisely.
- Read Keyboard Interaction Accessibility Guidelines (Salesforce).
- Browsed Harvard's Online Accessibility Support Keyboard Accessibility page.
role="application"on one of my own CodePen projects.
In reviewPermalink for "In review"
What I learned through researching accessible interactive content, I need to:
- manage focus
- use semantic HTML
- keep content perceivable at all times
- create device-independent events
- consider DOM order when adding content dynamically
- simplify events
Basic keyboard interactions with a webpage:
- Tab navigates to next focusable element
- Shift + Tab navigates to previous focusable element
- Arrows navigate between related radio buttons, menu items, or widget items
- Enter activates a link or button, or submits a form
- Space activates a button or toggle
- Esc closes menus, modals, and other popover variations
Remember... W3C has a thorough document on ARIA authoring practices, including an extensive section on Design Patterns and Widgets.
What I learned todayPermalink for "What I learned today"
- Tab should focus on the widget; ▲/▼(arrow keys) should navigate within the widget.
- When a custom role is assigned to an element, the custom role completely overrides the native role.
- When creating ARIA widgets, pay attention to the semantic structure of the roles. Some roles have required parent or child roles, or required attributes.
role="application"(MDN) should be used sparingly. It overrides many AT keystrokes, such as ones that allow screen reader users to navigate by headings, landmarks, and tables.
- A screen reader has two modes it uses to access a website:
- focus mode
- browse mode
- Some of the MDN docs about ARIA share vital information about keyboard interaction, available states and properties, and effects on assistive technologies.
Related resource of the dayPermalink for "Related resource of the day"
In Deborah Edwards-Oñoro's The State of the Web: Making the Web More Accessible, she offers her takeaways from a 30-minute video that Google produced about the importance of web accessibility. It's a quick read when you're crunched for time, and a good reminder of just how important accessible websites are. My favorite was takeaway #1:
The more accessible your website is, the more usable it is to everyone.