Accessibility | Pxs Design System .dev

last modified: 01/01/1601 01:00:00

Perceptible, operable, understandable and robust

In 2016, European Commission voted the directive (EU) 2016/2102 on the accessibility of the website and mobile applications of public sector.

This directive requires websites and applications to be: perceptible, operable, understandable and robust for users with disabilities. Those 4 categories have been extensively documented in a very large publication made by W3C. It is called the Web Content Accessibility Guidelines (WCAG).

Right, but what is it concretely?

Accessibility means making digital products/content easy to use and understandable for users in general. Especially for people with a disability. Disability can be low vision or blindness, people with cognitive and learning disabilities or conditional disabilities such as a broken arm or sitting in a loud restaurant.

These can be examples where someone may benefit from these accessibility practices. Because a disability impacts how people process informations, a series of accessibility guidelines were set. These can be seen as a range of recommendations with one shared vision: use technology to provide opportunities for people to interact with content and process information in ways that are more usable for them.

All our components are accessible and meet the AA requirement of the WCAG!

What does that mean?

As of now, all the assets that are being created or reviewed will go through a series of validation and consideration at each step in order to offer a state of the art experience to all our users, starting at the UX side, followed by the UIs and finally with the HTML deliveries.

All the aspects will be carefully studied in order to meet a comprehensive behaviour, a proper colour contrast ratio and a good readability, a predictable behaviour and seamless experience on all types of browsers.

And then?

Then, we count on you to be the ambassadors of accessibility. To spread the word around you and to develop (if not yet) an inclusive design mentality

last modified: 01/01/1601 01:00:00

Overview

Detailed rules for the components are available in each article, and important accessibility information are indicated with a box like this one:

Accessibility

Contains specific information about accessibility.

Utilities

Please find all utility classes for the accessibility here.

You can find here below all the basic rules to apply to be accessible:

Image

Informative images must have alt containing a short description of the essential information presented by the image.
Decorative images images must have an empty alt="")

(WAI detailed information (new window))

Iframe

All iframe should have a title

Iframe/Plugin

For all unreadable content by screenreader (like google map) an alternative content/functionality should be provided and hidden using a container with the aria-hidden="true" attribute

Design

Information cannot be displayed/given only by colours
Minimum contrast ratio between text and background should be, for regular size 4.5:1, and for large text 3:1

More info:

background colors

text colors

colors

Video

All video should have an audio-transcription
All video should have subtitles
All media should have a clear identification
For youtube videos: aria-label and title with video title or short description should be added to <iframe> containing video source.

Media/PDF reader

All non temporal media should have alternative solution as a text, a word, or an accessible PDF

Media player

All media players should be compatible assistance technologies

Table

All tables element should have a title
In table, headers should be correctly declared and used

Scripts

Each script supporting a functionnality should be compatible with assistive technology
Each functionnalities built with a script should be useable the keyboard and mouse

HTML

Each page should use the lang attribute correctly set
An element cannot be used only for layout
Title structure must be respected and relevant
The page should be correctly structured

Lists (ul)

List should be correctly structured

More info:

lists

Zoom

Text must be readable when zoomed at 200%

Tabulation

When navigating with TAB, the focus on element must be visible
The hidden/display content in accordion, or tab system should be hidden/display for a assistive technology

Icons/promos/striketrough

Information cannot be given only by layout/size, position, or colour

More info:

price

icons

Forms

All form elements should have a label
All labels used for an element in form must be relevant
Instructions to help users understand how to complete the form should always be visible (in parentheses with the label or below the form field but not as placeholder).
Information of same type should be grouped
Button label must be relevant
Mandatory field must be clearly indicated and before the field
Captcha technic is not compatible with assistive tech
Field control must be done with a relevant help

(WAI Form instructions (new window))

More info:

Nav

Each page should have at least 2 ways for navigation

Links

Links should be explicit, an alt or title attribute filled with self explanatory content, clear, not repeated, label.
Group of links, menu, nav, should be clearly identifiable in HTML structure
Shortcut to avoid big HTML part like header should be available
Warn the user when a link open a new window
When SVG is used as a link, use a title tag with clear label
The href attribute is mandatory

More info:

links

Downloadable files

Provide info about type and weight for each downloadable file
Each downloadable document must be provided in an accessible version. If not, the user must be able to ask for an accessible version via email.

More info:

links

last modified: 01/01/1601 01:00:00

Accessibility guidelines developed by Passe Muraille

www.inclunet.be

Tools

There are a few tools you can use to check your content for Accessibility issues. These tools cannot cover 100% of issues, and a proper audit should be done when you think you've fixed the most glaring issues, but they give a good indication on the most common defects.

BOSA Accessibility Check bookmarklet

Check that your HTML code conforms to accessibility standard.

More info

Screen readers

You should take the time to check out your pages with a screen reader, to hear how your page is experienced by someone whose only way to visit your page is through the.

Use the popular NVDA screen reader