Zur Navigation Zum Inhalt Kontakt Menu Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Aperçu Design Tokens Composants Releases Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Development

Tu programmes le produit.

Utilise des éléments sémantiquement corrects

Utilise toujours des éléments sémantiquement corrects afin d’assurer une prise en charge optimale par les technologies d’assistance. Pour ce faire, définis les différents niveaux de titre, les listes, les tableaux, etc. à l’aide des éléments correspondants et spécifie la langue du document.

Aide pour une sémantique correcte: https://www.accessibility-developer-guide.com/examples

Référence 1: https://www.w3.org/TR/WCAG21/#info-and-relationships
Référence 2: https://www.w3.org/TR/WCAG21/#language-of-page

Utilise des éléments standard

L’usage d’éléments natifs t’épargnera de nombreux désagréments aussi bien dans les documents HTML que dans les applications mobiles. Ces éléments sont déjà optimisés pour l’accessibilité. Si tu utilises d’autres éléments, ces derniers devront reproduire point par point le comportement natif. Préviens ton développeur s’il envisage d’en conserver certains.

Aide pour les éléments non natifs types: https://inclusive-components.design

Référence: https://www.w3.org/TR/WCAG21/#name-role-value

Linéarise correctement les contenus

Veille à ce que tous les contenus d’une page suivent un ordre logique, aussi bien visuellement qu’au niveau du code. Fais en sorte que tout reste compréhensible y compris lorsque l’utilisateur parcourt le document de haut en bas sans activer le CSS.

Comment tester: désactive le CSS dans ton navigateur ou utilise le lecteur d’écran de ton téléphone mobile.

Référence: https://www.w3.org/TR/WCAG21/#meaningful-sequence

Facilite la navigation

Ajoute des liens d’évitement (skiplinks) en début de page et utilise différentes balises (landmark). Ces deux techniques permettent notamment aux utilisateurs de lecteur d’écran d’atteindre facilement les différentes sections du contenu.

Aide pour les liens d’évitement (skiplinks): https://webaim.org/techniques/skipnav
Aperçu des balises (landmark): https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/

Référence: https://www.w3.org/TR/WCAG21/#bypass-blocks

Impressum Contact Paramètres des cookies