Accessibility

...

ARIA

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more.

A11y validation

Accessibility tooling

We recommend some extensions:

• ARIA DevTools
• Color contrast checker

Screen readers

• Microsoft Edge : use Ctrl + Shift + U to activate it.

Visual validator for WebComponents

Attention!

This is still a WIP PoC. Only a few attributes are working!

Using @zurich/web-components, we can use a visual tooling during the development to check if we cover all the accessibility requirements. We just need to import the a11y.css stylesheet:

@import "@zurich/web-components/a11y.css";

This will display this frames in the web components indicating the issues: