AngularArchitects.io | @ManfredSteyer Alexander Thalhammer | @LX_T Accessibility with Angular 

About me … Hi, it's me à @LX_T à https://alex.thalhammer.name/ 

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 

Why? Why A11y? … and EAA 2025 

Agenda • A legal update • Some tools J • WCAG 2.2 quick ref • Some A11y best practices in Angular Accessibility with Angular 

Legal update 

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) 

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) 

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) 

A11y Tools 

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 

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 

Demo Tools 

Well, no! We still need manual testing But are the tools good enough? 

WCAG 2.2 

WCAG 2.2 The 4 Principles https://www.periscope.com/news/covid-19-accessibility-and-e-comm/ 

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 

WCAG 2.2 https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2 The WCAG 2.2 – Quick Reference 

Well, yes! But we need to start somewhere! But are all rules relevant? 

LX T's 10 commendments 

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 

#1 Semantic 

Let's focus on Angular 

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 

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 

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 … … NG ARIA [attr] 

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 

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 Angular CDK 

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 

Angular Architects - A11y Workshop Google - Code Labs