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:

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:

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

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