Pagination

La pagination est un système de navigation qui permet à l’usager de naviguer entre les différentes pages d’une liste d’éléments.

Le composant Pagination est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

Aucune interaction au clavier spécifique au composant.

Règles d’accessibilité

Structuration

• La pagination est un système de navigation secondaire. Elle doit être structurée dans un élément nav role="navigation".
• L’attribut aria-label="pagination" est utilisé pour donner un contexte explicite à la navigation.

Liens de la pagination :

• Les liens de la pagination sont structurés dans une liste <ul><li>.
• La page en cours dans la pagination est identifiée avec l’attribut aria-current="page" et n’est pas cliquable.
• Les liens (numéro de page) disposent d’un attribut title pour expliciter leur fonction.
• Les liens désactivés n’ont pas d’attribut href et possèdent les attributs aria-disabled="true" et role="link".

Contrastes de couleurs

Le composant Pagination est suffisamment contrasté en thème clair et en thème sombre.

---

Restitution par les lecteurs d’écran

Attribut disabled

L’attribut disabled est restitué différemment selon les lecteurs d’écran :

• VoiceOver macOS et iOS : « estompé »
• NVDA et JAWS : « non disponible »
• Narrateur et Talkback  : « désactivé »

Attribut aria-current

L’attribut aria-current="page" est restitué différemment selon les lecteurs d’écran.

• VoiceOver macOS, Narrateur : « page actuelle »
• NVDA, JAWS : « page courante »
• Talkback, VoiceOver iOS : « page active »

À noter : VoiceOver iOS et Narrateur ne restituent pas aria-current sur un élément a sans attribut href.

La page courante est alors indiquée implicitement aux personnes aveugles car celle-ci n’est pas structurée dans un lien, contrairement aux autres pages.

Critères RGAA applicables

• Couleurs : 3.2, 3.3
• Liens : 6.1, 6.2
• Scripts : 7.1, 7.3
• Structuration : 9,2, 9.3
• Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.8, 10.11, 10.12
• Navigation : 12.2, 12.6, 12.8, 12.9
• Consultation : 13.9, 13.11

Références

• Référentiel général d’amélioration de l’accessibilité (RGAA 4.1.2)