Incorrect ARIA is often worse than no ARIA at all. Learn the few attributes that safely improve accessibility and which common ones create more problems than they solve.
#1about 5 minutes
Addressing the negative perception of ARIA
ARIA is often associated with more accessibility errors, but it was created to improve the web when used correctly.
#2about 9 minutes
How ARIA provides semantics for assistive technology
ARIA modifies the accessibility meta-information, including roles, states, and properties, that assistive technologies use to build an interface for users.
#3about 7 minutes
Using ARIA to convey page structure and state
Use landmarks to define key page regions and attributes like `aria-expanded` and `aria-pressed` to communicate the state of interactive controls.
#4about 8 minutes
Providing context with labels and live regions
Use `aria-label` for unlabeled controls, `aria-current` for active items, and `aria-live` to announce important dynamic UI changes.
#5about 4 minutes
Handling complex widgets and decorative content
Complex widgets like menus require careful implementation of roles and keyboard interactions, while `aria-hidden` can remove purely decorative content.
#6about 5 minutes
Common ARIA pitfalls and implementation mistakes
Avoid common mistakes like misinterpreting authoring guides, creating conflicts between ARIA states and the visual UI, or losing focus after an action.
#7about 17 minutes
ARIA attributes to avoid and key takeaways
Be cautious with attributes like `role="application"` and `aria-roledescription` that can break user expectations, and remember that ARIA adds semantics, not behavior.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
04:43 MIN
Using ARIA attributes to make web components accessible
Accessibility with Web Components
10:55 MIN
ARIA usage, web push, and the European Accessibility Act
WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more
06:55 MIN
Understanding WCAG, ARIA, and accessibility standards
The What, Why, Who and How of accessibility on the web
05:33 MIN
Getting started with screen readers and ARIA attributes
Oh S***! There's a New Accessibility Law and I'm Not Ready!
04:20 MIN
Navigating accessibility support across different screen readers
WeAreDeveloper Live: Accessibility in the EU, CSS Gaps and forms with Emma Dawson
05:40 MIN
Implementing ARIA attributes to fix form accessibility
The Cake Is a Lie... And So Is Your Login’s Accessibility
00:59 MIN
Summary of key accessibility best practices
Making Interactions Accessible to All Users
07:40 MIN
Using semantic HTML for a better accessibility tree
Accessibility tip: Detecting reduced motion in one line of JavaScriptAnimation can be a great tool to make apps seem more performant, be more engaging or even just more interesting. There are, however, quite a few groups of people who can not deal with things animating, as it distracts them or can even cause nausea. T...
Amanda Winstead
How Developers Can Focus on Maintaining Satisfaction With AccessibilityNo matter what kind of project you are working on, the principal mission of any web development assignment is always the same: to provide end-users with the best experience possible. When it comes to optimizing end-user satisfaction, however, it can ...
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take partStarting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
Chris Heilmann
Dev Digest 116 - WWWAI?This time, learn how to un-AI Google's search results, what's new on the web, avoid a new security hole and go back to BASICS with us. News and ArticlesWhat a week. Google, Microsoft, OpenAI and many others had their big flagship events announcing th...
From learning to earning
Jobs that call for the skills explored in this talk.