Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Accessibility

Accessibility means making digital products/content easy to use and understandable for users in general

last modified: 13/04/2021 16:15:03

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: 08/06/2022 11:30:04

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.

Status

We are reviewing all assets to make them accessible. Please find the components status here.

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: checkboxes date picker radio buttons search field select text fields

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: 19/02/2021 11:50:03

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

Google Chrome - Built-in Accessibility Audit

Google Chrome has a built-in Accessibility Audit function which you can access via the DevTools (F12), in the "Audits" tab.

More info

Google Chrome - Extensions

2 extensions perform a similar analysis compared to the built-in one described above, but they can be a little easier to use and read.

WAVE Evaluation Tool - Chrome Web Store

axe - Web Accessibility Testing - Chrome Web Store

Colors contrast checker

2 extensions perform a similar analysis compared to the built-in one described above, but they can be a little easier to use and read.

Web aim colors contrast checker


Resources

Some interesting extra resources on Accessibility:

Accessibility - Learn web development | MDN 

Google Accessibility 

Accessibility Cheatsheet — Practical approaches to Universal Design 

Medium article on the European legislation and the impact it has on companies

For documents (PDF, Word, ...) offered on the website:

Creating Accessible Documents in Microsoft Word | Accessible Technology

Make your Word documents accessible to people with disabilities - Office Support

Make your Excel documents accessible to people with disabilities - Office Support

Adobe PDF Accessibility Overview

PDF Accessibility Guide on Medium