Accessible Angular.js

on YouTube ↗49m

" summary

Common Angular accessibility problems are named and fixed: custom md- elements transclude into native buttons so keyboard and semantics work, MD checkbox and radio use tabindex="0", role and aria-checked to expose state, and md-sidenav implements focus management with an md-sidenav-focus hook and skip link. ngAria auto-adds ARIA for ng-disabled and binds keypress/role for ng-click (one bug was found and fixed). Protractor plugin runs Chrome Accessibility DevTools or Tenon checks in CI to catch missing labels and contrast issues.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:15Accessibility is about people.
3. 6:25Material Design for Angular 1.x
4. 25:11Focus management
5. 32:05Notifying the User (code)
6. 43:57Event bindings

" related talks

• 29mAngularJS AccessibilityMarcy Sutton Todd · ng-europe 2014
• 01h 00mBuild more accessible apps in AngularEmma Twersky · Google I/O 2022
• 25mAccessibility! is! important!Emma Twersky, Zach Arend · ng-conf 2022
• 31mReaching Out with AngularNoam Kfir · AngularUP 2017
• 01h 00mBuild more accessible apps in AngularEmma Twersky · Google I/O 2022
• 29mAngular Accessibility Adventures: Navigating the Web for EveryoneMaria Korneeva · NG-BE 2024
• 26mWeb Accessibility 101: An Introduction to A11YLeonardo Graterol · NG Bolivia 2019
• 08mTake your Angular Material components prettier and accessibleEmma Twersky · EnterpriseNG 2021