Accessibilité Web - Cours PDF

Créé par Elodie Asano x F2i Accessibilité web Rendre son interface accessible à tous Ux design UI Design Methodologie Ergonomie Parcours utilisateur Sommaire Présentation & méthodologie Comment va se dérouler l...

Créé par Elodie Asano x F2i Accessibilité web Rendre son interface accessible à tous Ux design UI Design Methodologie Ergonomie Parcours utilisateur Sommaire Présentation & méthodologie Comment va se dérouler le cours ? Discover Define Accessibilité Develop Deliver Présentation Introduction Introduction à l’accessibilité Introduction Définition de handicap & d’accessibilité Un handicap est défini comme toute limitation à long terme ou permanente affectant les fonctions physiques, sensorielles, mentales, cognitives ou émotionnelles, ce qui entraîne des restrictions sociales ou environnementales. L'accessibilité numérique consiste à rendre les services en ligne accessibles à tous, y compris aux personnes en situation de handicap​ Introduction Statistiques sur le Nombre de Personnes Handicapées en France En France, le nombre de personnes handicapées est estimé à environ 12 millions, ce qui représente environ 18% de la population totale. Handicap Auditif Environ 5,6 millions de personnes en France sont touchées par des troubles de l'audition, dont environ 500 000 personnes sourdes profondes ou sévères. Handicap Visuel Plus de 1,7 million de personnes sont affectées par un handicap visuel, allant de la malvoyance à la cécité totale. Attention, le Daltonisme et l’achromatie ne sont pas incluses dans ces chiffres. Handicap Moteur Environ 2,3 millions de personnes souffrent d'un handicap moteur, incluant les difficultés à se déplacer ou à utiliser certaines parties de leur corps. Lequel choisir ? Handicap Cognitif et Ce groupe inclut les personnes avec des troubles de l'apprentissage, de la mémoire, ou des pathologies Neurologique psychiatriques. Près de 3 millions de personnes en sont affectées. Introduction Les 4 principes de l’accessibilité web Perceptible Utilisable Compréhensible Robuste fournir des alternatives permettre une navigation et offrir des instructions assurer la compatibilité avec textuelles aux images ou une interaction faciles avec claires et éviter la confusion. les technologies contenus audio. le contenu. d'assistance actuelles. Introduction Technologies d’assistance courantes Logiciels de synthèse Lecteurs d’écran et Logiciels de reconnaissance vocale et outils de afficheurs Braille pour les vocale et claviers prédiction de texte pour personnes ayant une ergonomiques pour les aider les personnes ayant déficience visuelle. handicaps moteurs. des défis cognitifs Normes et techniques Référentiels, normes juridiques et techniques Normes & Techniques Le WAI (Web Accessibility Initiative) Le WAI (Web Accessibility Initiative) est un projet du W3C (World Wide Web Consortium) dédié à la promotion de l'accessibilité numérique à l'échelle mondiale. L'objectif principal du WAI est de développer des normes, des directives et des ressources pour rendre le Web accessible à tous, y compris aux personnes en situation de handicap. Normes & Techniques Les WCAG (Web Content Accessibility Guidelines) Les WCAG (Web Content Accessibility Guidelines) sont des directives d'accessibilité pour le contenu web, élaborées par le WAI (Web Accessibility Initiative) du W3C (World Wide Web Consortium). Les WCAG visent à rendre le contenu web accessible à un large public, y compris aux personnes en situation de handicap, en établissant des critères d'accessibilité clairs et mesurables. Une nome Iso a été mise en place pour homogénéisé le process et permettre aux pays qui n’ont pas de guidelines d’en avoir. Niveau A : Conformité de Ce niveau vise à garantir une accessibilité de base et à s'assurer que le contenu est accessible à la plupart des Base utilisateurs, y compris ceux qui utilisent des technologies d'assistance. Niveau AA : Accessibilité Ce niveau représente un niveau plus élevé d'accessibilité, en veillant à ce que le contenu soit accessible à un plus Intermédiaire large éventail d'utilisateurs, y compris ceux avec des besoins spécifiques. Niveau AAA : Accessibilité Ce niveau est le plus élevé en termes d'accessibilité et vise à rendre le contenu aussi accessible que possible, Avancée Lequel choisir ?même pour les utilisateurs avec des handicaps sévères. Il comprend toutes les exigences des niveaux A et AA, ainsi que des critères supplémentaires. Normes & Techniques Loi Française sur l’Égalité des Chances, la Participation et la Citoyenneté La loi française sur l’égalité des chances, la participation et la citoyenneté, promulguée en 2017, vise à garantir l'inclusion sociale et l'accessibilité pour tous les citoyens, y compris les personnes en situation de handicap. Normes & Techniques Et plus particulièrement... En France et en Europe, l'accessibilité numérique est régie par plusieurs lois, telles que les articles 47 et 78 en France, qui obligent les entreprises à rendre leurs services en ligne accessibles à tous, sous peine de sanctions financières importantes. Cela inclut les sites web, les applications mobiles et les interfaces graphiques​ Normes & Techniques Référentiel Général d'Amélioration de l'Accessibilité (RGAA) est un cadre spécifique à la France qui vise à rendre les services numériques accessibles à tous, en particulier aux personnes en situation de handicap. Il repose en grande partie sur les WCAG (Web Content Accessibilité Guidelines) et est essentiel pour les administrations et entreprises ayant une présence numérique. C’est le RGAA qui a créé les 4 principes plus précédemment et le label E Accessible. Cliquez ici pour découvrir les 106 critères. Normes & Techniques Les 13 thématiques du RGAA Couleurs Veiller à ce que les contrastes de couleurs entre le texte et Navigation La navigation doit être simple et accessible via le clavier, l’arrière-plan soient suffisants pour les utilisateurs pour les personnes ayant des limitations motrices. malvoyants ou daltoniens. Consultation Le contenu doit être adaptable, lisible et navigable par Multimedia Rendre les contenus audio et vidéo accessibles via des divers moyens, y compris des lecteurs d’écran. sous-titres, des descriptions audio et des transcriptions. Formulaires C haque champ de formulaire doit être étiqueté clairement, Tableau S'assurer que les tableaux de données sont correctement et des aides doivent être fournies pour faciliter la saisie des structurés et étiquetés pour être compréhensibles sans informations. styles visuels. Elements de Les éléments comme les menus déroulants ou les onglets Liens Les liens doivent être explicites et compréhensibles, même regroupement doivent être structurés de manière à être compréhensibles hors contexte, afin d'éviter les confusions pour les et accessibles par tous. utilisateurs de lecteurs d’écran. r sentation P é Le contenu doit être structuré de fa on à rester accessible, ç Scripts Les scripts doivent être accessibles, ou des alternatives quel que soit le support, avec une distinction claire entre le accessibles doivent être fournies si le script bloque fond et la forme, et adaptable selon les préférences des Lequel choisir ? certaines interactions. utilisateurs. Elements Les éléments interactifs, comme les formulaires, doivent obligatoires être utilisables par tous et fournir des instructions claires et des messages d’erreur accessibles. Normes & Techniques A qui s’adresse le RGAA ? Depuis 2019, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) doit être respecté par toutes les entités publiques, notamment pour les sites web, intranets, et applications mobiles des organismes suivants : Administrations publiques (État, collectivités territoriales, établissements publics). Entreprises privées exerçant des missions de service public. Organismes financés par des fonds publics dépassant un seuil spécifique. Lequel choisir ? Les entreprises privées de plus de 250 millions d'euros de chiffre d'affaires annuel et employant plus de 5 000 salariés Mise en oeuvre Mise en œuvre au sein d’un projet web Mise en Oeuvre Pourquoi s’intéresser à l’accessibilité ? Meilleure Optimisation Audience Image de Innovation expérience SEO élargie Les pratiques L'accessibilité marque accessibles utilisateur Les pratiques permet d'inclure un encouragent d’accessibilité plus grand nombre Une entreprise Rendre les contenus améliorent le engagée dans l’innovation et accessibles améliore référencement d’utilisateurs, y l’inclusion améliore profitent à un large la navigation et naturel, boostant la compris les sa réputation et éventail l’utilisabilité pour visibilité des sites personnes en attire plus de clients. d’utilisateurs, y tous. web. situation de compris les seniors. handicap. Mise en Oeuvre Étapes de travail L’accessibilité doit être prise en compte dès les premières phases d'un projet web, notamment dans la conception (choix des couleurs, typographie, structure), le développement (implémentation des balises alternatives, navigation clavier, etc.), et les tests d'utilisabilité. Mise en Oeuvre Management de l’équipe Le chef de projet doit sensibiliser et former son équipe (designers, développeurs) aux bonnes pratiques de l'accessibilité. Des sessions de formation et des ateliers peuvent être organisés pour garantir que tous les membres connaissent les exigences d'accessibilité Mise en Oeuvre Évaluation du coût financier et humain Coût financier Coût humain L'accessibilité a un coût, notamment pour la mise en Il peut y avoir un impact en termes de charge de œuvre de technologies d’assistance, les tests travail pour les développeurs et designers, surtout utilisateurs, et la formation des équipes. Toutefois, ne lorsqu’il s'agit de mettre à jour des systèmes existants pas respecter les normes peut entraîner des amendes, pour les rendre accessibles comme celles liées au RGAA en France, ce qui rend l'investissement initial crucial. Mise en Oeuvre Les actions possibles pour un UX designer Recherche utilisateurs Identifier les besoins des utilisateurs en situation de handicap (visuel, auditif, moteur, cognitif). Conception inclusive Créer des interfaces accessibles à tous, en tenant compte des couleurs, contrastes, et tailles de texte. Navigation simplifiée Structurer l’information pour que la navigation soit claire et facile, en particulier pour les utilisateurs de lecteurs d’écran. Test d'accessibilité Réaliser des tests avec des utilisateurs en situation de handicap et utiliser des outils comme des lecteurs d’écran pour s'assurer de l'accessibilité. Lequel choisir ? Typographies lisibles Choisir des polices facilement lisibles avec des tailles et des espacements appropriés. Mise en Oeuvre Les actions possibles pour un developpeur HTML sémantique tiliser des balises HTML sémantiques (comme , , , etc.) pour faciliter la navigation avec des lecteurs d'écran. Alternatives textuelles Ajouter des descriptions alternatives pour les images (alt), vidéos, et autres médias. Contrôles accessibles au Assurer que toutes les fonctionnalités peuvent être utilisées uniquement avec un clavier (tabulation, raccourcis). clavier Aria landmarks Utiliser les attributs ARIA pour améliorer l’accessibilité des composants interactifs. Lequel choisir ? Gestion des animations Proposer des alternatives ou limiter les animations pour les utilisateurs sensibles (épilepsie, troubles cognitifs). Mise en Oeuvre Outils et ressources disponibles Outils d’évaluation Ressources de formation Des outils comme WAVE, Axe, ou Lighthouse Le W3C offre des ressources et formations permettent de tester l’accessibilité d’un site et autour des WCAG et des bonnes pratiques pour d'identifier les points à améliorer. intégrer l'accessibilité dans les projets numériques​ Mise en Oeuvre Prenons en main l’audit Nous allons voir ensemble comment faire un audit Activité Mettons en pratique Remplissage Activité Vous allez tester le site Instagram pour effectuer un audit rapide. La présentation doit aborder : Le contexte, les résultats et les recommandations. Deadline : 19 octobre à 14h Livrable : Présentation  Créé par Elodie End :( Merci pour votre participation ! Gardons le contact : linkedin