Accessibilité des sites Web de l’UQAM

Définition de l’accessibilité Web

L’accessibilité Web désigne un ensemble de normes et de bonnes pratiques afin de rendre le Web accessible à tous les utilisateurs, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, leur âge ou leurs aptitudes physiques ou mentales.

L’accessibilité Web permet donc d’offrir un accès sans discrimination aux utilisateurs, peu importe les technologies utilisées pour accéder à une information. Par exemple, les personnes non voyantes doivent pouvoir naviguer sur un site Web accessible sur lequel les logiciels de synthèse vocale peuvent interpréter le contenu informationnel des pages Web.

Le W3C, World Wide Web Consortium, est une communauté internationale à but non lucratif de standardisation des technologies liées au Web. Cette communauté promeut et développe des protocoles et des directives permettant la compatibilité des technologies et une croissance à long terme du Web pour « Un seul web partout et pour tous ». Le W3C supervise un ensemble de standards, dont l’accessibilité (WCAG 2.0 et UAAG 2.0), qui compte trois niveaux (A, AA et AAA).

Les sites Web accessibles de l’UQAM

Depuis 2014, le Service de l’audiovisuel (SAV) de l’UQAM porte une attention particulière au respect des normes d’accessibilité dans la production des sites Web de l’université.

Le SAV a recensé, à l’aide de spécialistes, des référentiels et des guides relatifs à l’accessibilité pour se constituer une solide base qui servira à tout nouveau projet pour les intégrateurs, les programmeurs, les concepteurs visuels et les contributeurs éditoriaux.

Aujourd’hui en partenariat avec des services spécialisés de l’UQAM, le Service de l’audiovisuel s’inscrit dans un processus d’amélioration continu et vise un standard AA pour ses sites Web.Normes respectées pour la conception fonctionnelle et graphique

Normes respectées pour la conception fonctionnelle et graphique

Navigation

  • Respect des contrastes de couleur
  • Prévoir un fil d’Ariane
  • Prévoir au moins deux (2) moyens de navigation parmi un menu principal, un plan du site et un moteur de recherche
  • Différencier visuellement la position courante dans les menus
  • Assurer la cohérence visuelle de la navigation

Textes et symboles

  • Conserver les accents sur les lettres capitales
  • Ne pas justifier le texte

Couleurs

  • Assurer un contraste suffisant entre les textes et l’arrière plan ou proposer une alternative contrastée
  • Assurer la compréhension de l’information même en l’absence de couleurs

Liens

  • Prévoir un intitulé explicite pour chaque lien
  • Différencier visuellement les liens présents dans du texte

Tableaux

  • Prévoir un titre pour chaque tableau de données
  • Ne pas utiliser de balises ou d’attributs propres aux tableaux de données dans les tableaux de mise en forme
  • Veiller à l’ordre de lecture des tableaux de mise en forme

Formulaires

  • Prévoir un intitulé explicite pour chaque champ de formulaire
  • Prévoir des intitulés identiques pour les champs dont la fonction est identique
  • Positionner chaque intitulé à proximité de son champ
  • Positionner un bouton de soumission à la fin de chaque formulaire
  • Prévoir un intitulé explicite pour chaque bouton de formulaire
  • Indiquer clairement les champs obligatoires
  • Prévoir des messages d’erreur explicites et des suggestions de correction
  • Prévoir un message de confirmation
  • Permettre à l’utilisateur de revenir en arrière sur les formulaires à étapes multiples
  • Utiliser la balise <label> ainsi que les attributs for et id pour étiqueter les champs avec intitulé visible
  • Utiliser title ou aria-label pour étiqueter les champs sans intitulé visible
  • Mettre à jour le <title> de la page quand celle-ci se recharge pour afficher une erreur ou un message de confirmation
  • Regrouper et titrer les champs de même nature avec <fieldset> et <legend>
  • Ordonner les options de manière logique dans les listes déroulantes

Multimédia

  • Prévoir des moyens pour contrôler l’avancement et le volume sonore de chaque vidéo et contenu audio
  • Prévoir un moyen pour stopper chaque contenu animé
  • Ne pas lancer de son automatiquement
  • Normes respectées pour l’intégration technique HTML, CSS et JavaScript

Structure générale

  • Structurer les menus de navigation avec des listes
  • Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>
  • Écrire le code HTML en suivant la logique de l’ordre de lecture
  • Veiller à la cohérence de l’ordre du flux HTML d’une page à l’autre

Titre de la page

  • Renseigner un <title> précis sur chaque page

Langues

  • Renseigner la langue principale de la page avec l’attribut lang sur la balise <html>
  • Utiliser l’attribut lang pour signaler les changements de langue

Grammaire HTML et sémantique

  • Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé
  • Employer les balises HTML pour leur valeur sémantique

Liens et boutons

  • Différencier les boutons des liens
  • Compléter les liens et les boutons non explicites avec du texte caché, aria-label ou title
  • Ne pas utiliser les attributs title et aria-label sur des liens ou boutons explicites

Images et icônes

  • svg (images vectorielles)
  • Balises <img />

Listes

  • Baliser les listes non ordonnées avec <ul> et <li>
  • Baliser les listes ordonnées avec <ol> et <li>

Usage des CSS

  • Utiliser CSS pour mettre en forme les textes
  • Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères
  • Garantir la lisibilité des contenus même lorsque la taille du texte est doublée
  • Garantir la lisibilité des contenus lorsque les images ne sont pas affichées
  • Garantir la compréhension de l’information

Navigation au clavier

  • Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture
  • Garantir la visibilité de la prise de focus au clavier

Normes respectées pour l’accessibilité éditoriale

Mettre en forme les contenus de manière accessible

  • Ne pas justifier le texte
  • Éviter les sauts de lignes multiples

Utiliser correctement la hiérarchie des titres

Écrire des liens de manière accessible

  • Rédiger des intitulés de liens explicites
  • Savoir utiliser les titres de liens, en dernier recours

Utiliser les images de manière accessible

  • Images décoratives/illustratives : ne pas rédiger de texte de remplacement
  • Images informatives : rédiger un texte de remplacement
  • Images-liens : rédiger un texte de remplacement qui décrit la fonction du lien
  • Images informatives complexes : rédiger un court texte de remplacement ainsi qu’une description détaillée

Utiliser correctement les listes à puces et listes numérotées

Écrire les contenus de manière accessible

  • Conserver les accents sur les lettres capitales
  • Expliciter les abréviations
  • Déclarer les citations en ligne et les blocs de citations
  • Ne pas faire référence à un élément en se basant uniquement sur sa couleur, sa forme ou sa position

Utiliser correctement les couleurs et les contrastes

  • Veiller à ce que les contrastes entre le texte et la couleur d’arrière-plan soient suffisants
  • Veiller à ce que les couleurs ne soient pas le seul moyen pour véhiculer de l’information

Utiliser correctement les contenus riches et multimédias

  • Vérifier la possibilité de mettre en pause les contenus en mouvement

Consultez nos documentations de référence.

Les limites de l’accessibilité des sites Web de l’UQAM

Plusieurs limites d’accessibilité sont à prendre en compte pour les sites Web de l’UQAM :

  • Tous les sites Web de l’UQAM ne sont pas produits par le Service de l’audiovisuel.
  • Les sites Web produits par le Service de l’audiovisuel sont sous la responsabilité du commanditaire du site. Malgré les recommandations, certaines normes d’accessibilité ne sont pas une obligation, elles sont donc appliquées selon les demandes et besoins du commanditaire.
  • Les sites Web produits avant 2015 par le Service de l’audiovisuel ne respectent qu’en partie les normes mentionnées précédemment.

Nous recommandons d’utiliser un navigateur à jour pour une meilleure expérience.

Vous pouvez transmettre vos commentaires ou suggestions reliés à l’accessibilité d’un site de l’UQAM par courriel à l’adresse audiovisuel@uqam.ca.