Accessibility with Angular

This slide deck introduces core accessibility concepts and practices tailored for Angular applications. It reviews the legal landscape (like the European Accessibility Act), highlights essential tools for testing accessibility (such as axe-core and Angular ESLint), and outlines practical Angular-specific best practices—such as semantic HTML, proper ARIA attribute usage, and effective focus management—to help ensure compliance with WCAG 2.2.

Transcript

1. AngularArchitects.io | @ManfredSteyer Alexander Thalhammer | @LX_T Accessibility with Angular
2. About me … Hi, it's me à @LX_T à https://alex.thalhammer.name/
3. What does accessibility (A11y) mean? • "Accessibility is the design of products, devices, services […] so as to be usable by people with disabilities. The concept of accessible design and practice of accessible development ensures both "direct access" (i.e. unassisted) and "indirect access" meaning compatibility with a person's assistive technology (e.g. screen readers)." -- https://en.wikipedia.org/wiki/Accessibility
4. Why? Why A11y? … and EAA 2025
5. Agenda • A legal update • Some tools J • WCAG 2.2 quick ref • Some A11y best practices in Angular Accessibility with Angular
6. Legal update
7. Legal - EU directive from April 2019 (!) - Europäisches Gesetz zur Barrierefreiheit (EGB) - regulations for the accessible use of certain products and services such as - computers - mobile phones - ticket machines in public transport systems - payment terminals and cash machines - e-books and - e-commerce European Accessibility Act 2025 (EAA)
8. Legal - DE – July 2022 national application of the EAA - All private web services must be accessible too - Starting from June 28th 2025 all new products & services - 5 to 15 years for migration of existing products / services - Includes online services like banking & shops - Small bus. (<10 emp. or <2 M. € sales) excluded Barrierefreiheitsstärkungsgesetz (BFSG)
9. Legal - AT – June 2023 national application of the EAA - All private web services must be accessible too - Starting from June 28th 2025 all new products & services - 5 to 20 years for migration of existing products / services - Includes online services like banking & shops - Small bus. (<10 emp. or <2 M. € sales) excluded Barrierefreiheitsgesetz (BaFG)
10. A11y Tools
11. Tools - NG Lint - @angular-eslint/template/accessibility - Testing - axe-core JS plugin - axe DevTools Chrome Extension - Jest-axe package - StoryBook Addon - Lighthouse Chrome DevTools - Accessibility Insights Chrome Extension - WAVE Website for testing properties / Chrome Ext A11y – Tools I
12. Tools - Screenreader - NVDA (Windows,free) - Narrator (Windows, built-in) - Jaws (Windows) - Voice Over (Mac / iOS) - Orca (Linux) - TalkBack (Android) - Read Aloud Chrome Extension - Other tools - Web Developer Chrome extension - HeadingsMap Chrome extension - whocanuse.com Website for color contrasts - Polypane Dev-oriented browser A11y – Tools II
13. Demo Tools
14. Well, no! We still need manual testing But are the tools good enough?
15. WCAG 2.2
16. WCAG 2.2 The 4 Principles https://www.periscope.com/news/covid-19-accessibility-and-e-comm/
17. WCAG 2.2 - A - Minimum level, addressing basic accessibility features - AA - Addresses common and significant barriers, benefiting a wider range of users - AAA - Highest level, includes all Level A and AA criteria, providing the most comprehensive accessibility The 3 Levels Of Conformity EU standards
18. WCAG 2.2 https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2 The WCAG 2.2 – Quick Reference
19. Well, yes! But we need to start somewhere! But are all rules relevant?
20. LX T's 10 commendments
21. LX T's 10 best practices 1. Semantic HTML & Structure 2. Keyboard A11y & Navigable 3. Text Alts 4. Media 5. Tables 6. Forms 7. Font Size 8. Tap Targets 9. Color & Contrast 10. Language A11y – Best Practices
22. #1 Semantic
23. Let's focus on Angular
24. NG Router - Add unique page titles to your routes - dynamic titles can be set via inject(Title) export const appRoutes: Route[] = [ { path: 'home', component: HomeComponent, title: 'Home - NG A11y' }, ] - Active links identification - The RouterLinkActive directive provides the ariaCurrentWhenActive input to set the aria-current Angular Router I
25. NG Router - Focus management after navigation - Avoid relying solely on visual cues by making sure routing updates focus after page navigation - Use the NavigationEnd event from the NG Router service to know when to update focus inject(Router).events.pipe( filter((e) => e instanceof NavigationEnd) ).subscribe(() => { this.document.querySelector('main')?.focus(); }); Angular Router II
26. NG ARIA [attr] - ARIA attributes enable modifying - an element's states and properties as defined in the A11y tree - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes - When binding to ARIA attributes in Angular, you must use the "attr." prefix <!-- Use attr. when binding to an ARIA attribute --> <button [attr.aria-label]="myActionLabel">…</button> <!-- Static ARIA attributes require no extra --> <button aria-label="Close">…</button> NG ARIA [attr]
27. NG Material - Angular Material library is a suite of reusable UI components that aims to be fully accessible - If you're building your own Design System, you can copy what Angular Material is doing J Angular Material
28. NG CDK - Angular CDK includes the a11y package that provides tools to support various areas of accessibility - LiveAnnouncer is used to announce messages for screen-reader users using an aria-live region - cdkTrapFocus directive traps Tab focus in an element <div class="gdpr-dialog" cdkTrapFocus> <!–- Yay, focus won't leave this element! --> </div> Angular CDK
29. Conclusions • Be prepared for the legal changes • Use A11y tools to test your app today J • Check the WCAG 2.2 quick ref for details • Apply the best practices for A11y in Angular J Accessibility with Angular
30. Angular Architects - A11y Workshop Google - Code Labs