Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📝 docs(table): ajout de documentation #1072

Open
wants to merge 6 commits into
base: feat/documentation
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/dsfr/component/table/_part/data.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
id: table
39 changes: 39 additions & 0 deletions src/dsfr/component/table/_part/doc/accessibility/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: Accessibilité du tableau
---
# Tableau

:::dsfr-doc-tab-navigation
- [Présentation](../index.md)
- [DĂ©mo](../demo/index.md)
- [Design](../design/index.md)
- [Code](../code/index.md)
- Accessibilité
:::


## Accessibilité

Le composant **Tableau** utilise le motif de conception ARIA WAI "Table" et suit les critĂšres du RGAA.

### Interactions clavier

Aucune interaction clavier n'est liée au composant.

### RÚgles d'accessibilité

Sur ce composant plus qu’ailleurs, le respect des rĂšgles de gestion de l’accessibilitĂ© est primordial pour assurer la bonne utilisation par les technologies d’assistance. Les prĂ©-requis sont :

- Le tableau propose une balise caption contenant un titre pertinent.
- Les en-tĂȘtes de lignes et de colonnes `<th>` doivent ĂȘtre dĂ©clarĂ©es comme telles :
- Elles doivent ĂȘtre associĂ©es aux cellules de donnĂ©es :
- Pour les en-tĂȘtes de ligne avec un attribut `scope="row"`.
- Pour les en-tĂȘtes de colonne avec un attribut `scope="col"`.
- Dans les tableaux dits complexes :
- L’utilisation de cellules fusionnĂ©es en en-tĂȘte ou dans le corps du tableau implique de prĂ©ciser la composition du tableau dans le caption afin d’aider un utilisateur Ă  apprĂ©hender son contenu.
- Il faudra Ă©galement lier les cellules de contenu aux cellules d’en-tĂȘte via l’attribut `headers` et les `id` des cellules d’en-tĂȘte sĂ©parĂ©s par un espace. Dans ce cas, les attributs d’en-tĂȘte de ligne et colonne scope n’ont plus lieu d’ĂȘtre ajoutĂ©s ([Source Access42](https://access42.net/tableaux-donnees-complexes-integration-html-accessible-rgaa/)).

### Références

- [https://www.w3.org/WAI/ARIA/apg/patterns/table/](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
- [https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5)
Loading