Accessibility in Angular Angulars features for a better and more inclusive web DB Systel GmbH | Danny Koppenhagen | 16.01.2024

Overview DB Systel GmbH | Danny Koppenhagen | 16.01.2024 3 1. Introduction to a11y 2. Angulars a11y features 3. Angular CDK 4. Linting, Testing & Tools

About me DB Systel GmbH | Danny Koppenhagen | 16.01.2024 4 Danny Koppenhagen GitHub: d-koppenhagen (Twitter): @d_koppenhagen LinkedIn: d-koppenhagen

Introduction to a11y DB Systel GmbH | Danny Koppenhagen | 16.01.2024 5

Types of limitations DB Systel GmbH | Danny Koppenhagen | 16.01.2024 6 type permanent temporary situational controlling only one arm broken arm parents with a child in their arms seeing blindness eye surgery distracted driver hearing deaf ear infection working on noisy machines speaking muteness laryngitis heavy accent thinking cognitive limitations headache distraction, fatigue

W3C, WAI, WCAG DB Systel GmbH | Danny Koppenhagen | 16.01.2024 7 World Wide Web Consortium WAI Web Accessibility Initiative publishes WCAG Web Content Accessibility Guidelines

Semantic HTML DB Systel GmbH | Danny Koppenhagen | 16.01.2024 8

ARIA and Roles – Just a part of the solution DB Systel GmbH | Danny Koppenhagen | 16.01.2024 9 • Prefer always the usage of Semantic HTML elements! • Roles are already embedded in some elements (such as regions, details/summary, dialog, etc.) • ARIA attributes often not needed - aria-required ⟶ required - aria-hidden ⟶ hidden - aria-label ⟶ visual Text - aria-readonly ⟶ readonly - div[role=button] ⟶

Choose your libs wisely DB Systel GmbH | Danny Koppenhagen | 16.01.2024 10 Project A Project B Project C Project N Inaccessible Library

Angulars a11y features DB Systel GmbH | Danny Koppenhagen | 16.01.2024 11

Template Syntax: ARIA Attributes DB Systel GmbH | Danny Koppenhagen | 16.01.2024 12 • Static ARIA attributes can be set directly • Bindings must be made using the attr. prefix

Template Syntax: Deferred Loading DB Systel GmbH | Danny Koppenhagen | 16.01.2024 13 Keep aware, lazy loaded content must maybe announced when loading state changes

@defer(on timer(10000)) { } @placeholder() { Placeholder... } @loading(minimum 1000) { Loading... } @error() { Error... }

Announce whole content within, not only changed parts Set politeness

ARIA Atomic DB Systel GmbH | Danny Koppenhagen | 16.01.2024 14

10 seconds left.

9 seconds left.

„10 seconds left.“ „9 seconds left.“

10 seconds left.

9 seconds left.

„10“ „9“

Track items by unique attribute DB Systel GmbH | Danny Koppenhagen | 16.01.2024 16 • Prevent DOM updates of the whole list • Restore on focus changes when rendering dynamic lists • Prevent errors when array is updated while interacting • Prevent using track $index @for(recipient of recipients; track recipient.id) {

DB Systel GmbH
c/o {{ recipient.fullname }}
Kynaststraße 1
10317 Berlin

}

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 17 Demo: Track list items

Angular Router: aria-current & active page styling DB Systel GmbH | Danny Koppenhagen | 16.01.2024 18 aria-current="page" • Angular Router has built-in mechanism to determine and style active pages • Current page indication with ARIA attribute aria-current

Angular Router: Unique page titles DB Systel GmbH | Danny Koppenhagen | 16.01.2024 19 • Page title can be set in the route config entry • Custom / dynamic titles possible using the TitleStrategy Examples - / ➡ My Awesome Blog: Home - /blog ➡ My Awesome Blog: Latests Blog Posts - /blog/:slug ➡ My Awesome Blog: Dynamic title fetched by service Title prefix added by TitleStrategy

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 20 Demo: Page Title

Angular CDK DB Systel GmbH | Danny Koppenhagen | 16.01.2024 21

Overview DB Systel GmbH | Danny Koppenhagen | 16.01.2024 22 material.angular.io/cdk

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 23 Examples…

Listbox – General Focus Strategies DB Systel GmbH | Danny Koppenhagen | 16.01.2024 24 Roving Tabindex Dropdown

• #1
• #2
• #3

Aria active decendant Dropdown

• #1
• #2
• #3

CDK Listbox DB Systel GmbH | Danny Koppenhagen | 16.01.2024 25 Dropdown

• #1
• #2
• #3

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 26 Demo: Listbox

Overlay DB Systel GmbH | Danny Koppenhagen | 16.01.2024 27 … is mounted in the apps element Two strategies: • GlobalPositionStrategy: specific viewport position (for modals, appl-level notifications, etc.) • ConnectedPositionStrategy: placed relative to the origin (for menus, pickers, tooltips, etc.) • CDK Overlay is the most generic and flexible implementation • It‘s used / implemented by other CDK features such as Menu or Dialog

Live Announcer DB Systel GmbH | Danny Koppenhagen | 16.01.2024 28 • Creates a visually hidden aria-live region in the apps element and inserts/updates conent within so the content/changes will be announced by screenreaders @Component({ //... }) export class MyComponent { constructor(liveAnnouncer: LiveAnnouncer) { liveAnnouncer.announce("Hello Angular Berlin Meetup!"); } }

Strategies for hiding elements DB Systel GmbH | Danny Koppenhagen | 16.01.2024 29 For screenreaders For all Only visual .visually-hidden:not(:focus):not(:active), .sr-only:not(:focus):not(:active) { height: 1px; overflow: hidden; width: 1px; position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } shrink to 1px size remove visualiy (e. g. background) prevent wrapping content

CKD helper: cdk-visually-hidden DB Systel GmbH | Danny Koppenhagen | 16.01.2024 30 @use '@angular/cdk'; @include cdk.a11y-visually-hidden();

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 31 Demo: Overlay + Live Announcer

Trees DB Systel GmbH | Danny Koppenhagen | 16.01.2024 32 • Build (expandable) tree structures • Sets role="tree", role="treeitem" automatically Demos: https://k9n.dev/blog/2020-11-twa (Open the navigation on the right site) https://material.angular.io/cdk/tree/examples

DB Systel GmbH | Danny Koppenhagen | 16.01.2024 33 Demo: Tree

Linting, Testing & Tools DB Systel GmbH | Danny Koppenhagen | 16.01.2024 34

ESLint DB Systel GmbH | Danny Koppenhagen | 16.01.2024 35 ng add @angular-eslint/schematics npm run lint .eslintrc.json is created and pre-configured including the following accessibility rules: "@angular-eslint/template/alt-text": "error", "@angular-eslint/template/click-events-have-key-events": "error", "@angular-eslint/template/elements-content": "error", "@angular-eslint/template/interactive-supports-focus": "error", "@angular-eslint/template/label-has-associated-control": "error", "@angular-eslint/template/mouse-events-have-key-events": "error", "@angular-eslint/template/no-autofocus": "error", "@angular-eslint/template/no-distracting-elements": "error", "@angular-eslint/template/role-has-required-aria": "error", "@angular-eslint/template/table-scope": "error", "@angular-eslint/template/valid-aria": "error",

e2e Tools DB Systel GmbH | Danny Koppenhagen | 16.01.2024 36 • Lighthouse-ci • @axe-core/playwright • cypress-axe • jest-axe • pa11y

Storybook DB Systel GmbH | Danny Koppenhagen | 16.01.2024 37 npx storybook@latest init && npm install @storybook/addon-a11y -D

Its about the human! DB Systel GmbH | Danny Koppenhagen | 16.01.2024 38

Slides & Demo DB Systel GmbH | Danny Koppenhagen | 16.01.2024 39 https://techstories.dbsystel.de/blog/2024/2024-01-16-Accessibility-in-Angular.html

Contact Danny Koppenhagen Platforms for New Mobility (PlaNeMo) [email protected] DB Systel GmbH Kynaststr. 1 | 10317 Berlin Thank you for your attention www.dbsystel.de GitHub d-koppenhagen X (Twitter) @d_koppenhagen LinkedIn d-koppenhagen Slides and Source Code