Digital accessibility Luxembourg data visualization components

Image d'abstraction — Photo by Logan Voss on Unsplash

Welcome

This page presents seven diagrams created in CSS using semantic and accessible content, coded using only the following HTML tags:

<table>
<dl>, <dt>, <dd>
<ul>, <li>

These HTML elements are then “repainted” using CSS.

This project comprises four files:

index.html: the content;
main.css: a few elements to style the page and, optionally, the modules (tables, lists and definition lists) when the modules.css file is disabled;
charts.css: the style sheet that performs transformations on tables, lists and definition lists, turning them into infographics;
main.js: an optional script that allows you to enable/disable the charts.css style sheet and animates the infographics when they enter the viewport. This feature, which uses the IntersectionObserver API, may eventually be replaced by the CSS animation-trigger property once it is supported by all browsers. If you prefer to do without it, simply ignore the .hideChart and .animChart statements.

This project is open source, licensed under CC0, and therefore freely reusable.

These visualisations were tested as part of an accessibility audit carried out in late 2025. No issues were identified, in line with the Observatory’s accessibility statement.

These visualisations are currently active on the Digital accessibility observatory.

You can get access to the code on our GitHub repo.

They are inspired by the work of Gaël Poupard, a front-end developer based in Nantes. We invite you to visit his page and, more specifically, his Chaarts project for further information.

Table to table and bar chart

Websites / apps ranking by compliance level.
Synthesis of data established during in-depth audits in 2025
Rank	Website / app	Level
1	Observatoire de l'accessibilité numérique	100 %
2	Institut national de recherches archéologiques	90 %
3	Centre commun de la sécurité sociale	89 %
4	Accessibilité infrastructure - Luxembourg	86 %
5	Sécurité alimentaire	82 %
6	Portail du Grand-Duché de Luxembourg	82 %
7	Trésorerie de l'Etat	77 %
8	Portail de la fonction publique	61 %
9	Bee secure	59 %
10	Hospices Civils de la Ville de Luxembourg	55 %
11	Devenez acteur de votre transition énergétique \| Klima-Agence	52 %
12	CITA - Contrôle et information du trafic sur les autoroutes	51 %
13	Orientation.lu	47 %
14	Guichet Unique PME	42 %
15	Digital Learning Hub - Affordable IT Courses in Luxembourg	40 %
16	SNHBM - Société nationale des habitations à bon marché	39 %

See the Pen Table to table and bar chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Definition list to column chart

Number of websites / apps, divided into percentiles.
Synthesis of data established during in-depth audits in 2025

0 - 10%: 0
11 - 20%: 0
21 - 30%: 0
31 - 40%: 2
41 - 50%: 3
51 - 60%: 4
61 - 70%: 0
71 - 80%: 1
81 - 90%: 5
91 - 100%: 1

See the Pen Definition list to column chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Table to column chart

Compliance rate by administrative level in percent.
Synthesis of data established during in-depth audits in 2025
State	Cities	Others
69%	55%	49%

See the Pen Table to column chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Table to pie chart

Type	Proportion
with a statement	63 (33%)
without a statement	127 (67%)

See the Pen Table to pie chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Theme	Proportion
social protection	452 (18%)
health	503 (20%)
transport	427 (17%)
education	628 (25%)
employment	503 (20%)

See the Pen Table to pie chart v2 by OpenData Luxembourg (@opendataluxembourg) on CodePen.

List to multibar chart

State
- 331 statements
- 476 sites / apps
Cities
- 109 statements
- 297 sites / apps
Others
- 85 statements
- 255 sites / apps

See the Pen List to multibar chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Definition list to bar chart

Missing accessible version of office documentscriteria 13.3 in the framework: 13
Script incompatible with assistive technologiescriteria 7.1 in the framework: 13
Inappropriate heading structurecriteria 9.1 in the framework: 13
Tag misused for presentation purposescriteria 8.9 in the framework: 12
Badly structured listcriteria 9.3 in the framework: 12
Focus is barely visible or invisiblecriteria 10.7 in the framework: 11
Information incomprehensible without CSScriteria 10.3 in the framework: 11
Insufficient text contrastcriteria 3.2 in the framework: 11
Badly structured web pagecriteria 9.2 in the framework: 11
Rendered decoration criteria 1.2 in the framework: 11
Missing language changecriteria 8.7 in the framework: 11
Insufficient component contrastcriteria 3.3 in the framework: 10
Insufficient input correction suggestioncriteria 11.11 in the framework: 9
Irrelevant page titlecriteria 8.6 in the framework: 9
Inexplicit linkcriteria 6.1 in the framework: 9
Insufficient input error managementcriteria 11.10 in the framework: 9
Ineffective automatic field completioncriteria 11.13 in the framework: 8
Loss of information when zoomingcriteria 10.4 in the framework: 8
Unable to control script with keyboard and mousecriteria 7.3 in the framework: 7
Information provided solely by colorcriteria 3.1 in the framework: 7

Ranking of non-compliances according to their frequency.
Synthesis of data established during in-depth audits in 2025

See the Pen Definition list to bar chart by OpenData Luxembourg (@opendataluxembourg) on CodePen.

Digital accessibility Luxembourg data visualization components

Welcome

Table to table and bar chart

The accessibility ranking: best websites in 2025

Definition list to column chart

Distribution of compliance rates: websites in 2025

Table to column chart

Compliance rate by administrative level: websites in 2025

Table to pie chart

Apps with an updated statement within the last three years

Number of public sites per theme

List to multibar chart

Statements by administrative level

Definition list to bar chart

Top non-compliance issues: websites in 2025