Accessibility

ÉD Internet Society > Internet Society Standing Group 22 d

Webinaire: Les règles d'Accessibility Web pour les Développeurs

Kawtar Choubari g

Zakari Yama Ingénieure junior en

développement logiciel Ingénieur IT de formation

et créatrice de contenu ; N d

samedi 12 novembre 2022 10h00-11h00 WAT

Les règles d'Accessibility Web pour les Développeurs

12 novembre 2022

ZAKARI YAMA: Bonjour tout le monde. Merci de vous être connectés à ce webinaire sur l'accessibilité Web pour les développeurs. Je vais tout d'abord me présenter. Je suis ingénieur et je suis membre de Internet Society. Comme coanimateur il y a Kawtar Choubari, ingénieure junior en développement logiciel et créatrice de contenu et consultante en formation et sur l'accessibilité Web. Elle aura l'occasion de se présenter avant de prendre la parole.

Sans trop tarder, je vais passer pour qu'on puisse avancer assez rapidement sur le sujet du jour qui est l'accessibilité Web pour les développeurs. Je vais rapidement rappeler ce qu'est le groupe sur l'accessibilité. C'est un groupe permanent créé par ISOC créé en novembre 2021 suite à la réorganisation en supprimant quelques groupes d'intérêt spéciaux. La mission est de promouvoir et de défendre l'inclusion numérique des personnes avec handicap et sensibiliser les entreprises, les communautés des développeurs et les pouvoirs publics sur l'importance de l'inclusion numérique. Elle a aussi pour mission de développer et partager l'expertise en matière d'inclusion numérique. Pour accéder, pour devenir membre du groupe, c'est gratuit, il suffit d'être membre de Internet Society et si la personne ne l'est pas elle peut s'inscrire et c'est gratuit aussi.

Revenons au sujet du jour qui est l'accessibilité Web pour les développeurs. Tout d'abord, qu'est ce que l'accessibilité? On définit l'accessibilité Web comme étant, c'est à dire qu'un site est accessible lorsque l'application et les outils sont développés de façon à ce que les personnes vivant avec un handicap puissent les utiliser de façon autonome, plus précisément, cela veut dire pourquoi? Cela veut dire que les utilisateurs peuvent lire aisément vos contenus et entendre les sons, naviguer aisément et de façon autonome quels que soient les outils qu'ils utilisent, les outils technologiques et ils peuvent aussi interagir avec votre plateforme. || faut savoir aussi que l'égalité d'accès aux services numériques est un droit. C'est un droit fondamental consacré par la Charte des Nations Unies.

Lorsqu'on parte d'accessibilité numérique, cela ne s'adresse pas qu'aux personnes avec handicap, en fait.

Il faut prendre en considération aussi les personnes qui utilisent des petits écrans ou des grands écrans. Ceux qui utilisent des montres connectées ou des téléviseurs connectés. Il faut penser aux personnes âgées et aux connexions lentes ou faible bande passante ou ceux qui se retrouve dans une situation où ils ne peuvent pas écouter les sons de la vidéo ou bien qui se retrouve devant une situation où ils ont un handicap temporaire, par exemple soit une fracture ou autre. Ce que vous pouvez imaginer pouvant empêcher un utilisateur de profiter pleinement de votre plateforme.

Alors, voilà maintenant l'importance de l'accessibilité Web. Vous allez me dire que c'est un site, un site est fait pour être accessible. En vérité, c'est cela, le site est fait pour que les utilisateurs puissent en profiter pleinement. Ceci est d'autant plus important que lorsque la digitalisation se généralise, lorsqu'il y a une mauvaise accessibilité d'une plateforme, cela vous rend [Inaudible]. Pensez à la période de la COVID 19 où toute la population était confinée et tout se faisait en ligne, l'école, les achats, les rendez vous médicaux, les transactions financières. Dans ces condition si vous en tant que développeur votre client qui est en général une entreprise n'a pas une plateforme ou la solution que vous lui fournissez pour lui garantie pas l'accessibilité pour les personnes avec handicap vous mettrez hors jeu votre client et il y a des forte chances que la prochaine il aille chez votre concurrent. Une autre raison pour laquelle l'accessibilité Web est vraiment importante c'est que 15 % de la population mondiale a une forme ou une autre d'handicap. Et ça représente environ six milliards de pouvoirs d'achat.

Et ce nombre va en augmentant. || faut savoir aussi que chaque personne, dans les statistiques, passe 11,5 % de sa vie avec un handicap. C'est les données des Nations Unies.

Donc, passer à côté de cette opportunité ou vous faites passer votre client à côté de cette opportunité, c'est vraiment une question existentielle pour vous, parce que s'il se rend compte de ce qu'il manque avec votre solution qui ne garantit pas l'accessibilité à tout le monde, soyez sûr qu'il Va la prochaine préférer un autre fournisseur à vous. D'où l'importance de vous assurer que vos solutions soient accessibles. Et aussi, demain peut être que cette entreprise ou les pouvoir public à qui vous vendez les solutions seront soumis à des lois d'accessibilité. La plupart des pays aujourd'hui, notamment au sein de l'Union européenne, sont en train de mettre en place des lois garantissant l'égalité d'accès aux services et au contenu numérique, notamment sur les plateformes des transactions et tout ce qui est plateforme gouvernementale. D'un autre côté, un site est bien designé et garantissant une bonne accessibilité est plus facile à référencer et ça facilite aussi la vie en améliorant l'expérience client de l'expérience d'utilisation du client, de votre client, c'est à dire vous qui fournissez des solutions, votre client qui est l'entreprise ou bien étatique, sera plus à l'aise parce qu'il pourra améliorer en fait son bassin d'utilisateurs et potentiellement augmenter ses parts de marché lorsque vous lui fournissez des solutions garantissant l'accès à tout le monde.

Voilà donc des raisons pour lesquels l'accessibilité numérique est très importante. Sans monopoleiser la parole, je vais céder l'écran pour que Mme Choubari puisse faire sa présentation pour les solutions pour garantir l'accessibilité numérique.

: Merci, Zakari pour cette présentation et je remercie Internet Society et le chapitre du Niger pour l'invitation. Je vais d'abord me présenter. Je suis Kawtar Choubari et je suis ingénieure en développement logiciel. Je fais aussi souvent des formations et des webinaires pour les étudiants ou les passionnés par l'informatique. Dans mon temps libre, j'essaie de créer du contenu sur Internet en mettant mes compétences et mes spécialités dans le développement des applications Web et mobile dans la pratique et pourquoi pas partager du bon contenu avec la communauté.

Donc, vous pouvez me trouver sur les différents réseaux sociaux. Je vais aussi partager ces diapositives par la suite dans mon compte Twitter si vous voulez les récupérer. Pour l'agenda aujourd'hui, je vais récapituler un peu sur l'accessibilité Web et son importance et on va parler des bonnes pratiques, comment les implanter. Cette section sera avec des connaissances de base et intermédiaires pour que tous puissent comprendre comment mettre en pratique l'accessibilité et l'améliorer. Puis on va passer à une petite démonstration comment nous les développeurs pouvons appliquer ces bonnes pratiques.

Je pense que le terme « accessibilité » nous dit tous quelque chose; c'est le fait de faire des moyens pour que toutes les personnes, quel que soit leur situation ou leur handicap puissent accéder à une information ou une place ou n'importe quoi.

Du coup, le but de cette présentation, c'est que je pense que nous tous nous avons une idée de l'accessibilité en général, mais le problème qu'on a, c'est que même si on connaît ce terme, on ne le met pas en pratique. On va essayer d'apprendre les bonne pratique durant cette présentation pour éviter de créer des solutions qui pour nous sont accessibles mais en vérité les utilisateurs trouvent des difficultés pour y accéder. Comme Zakari a dit, l'accessibilité Web c'est la mise à disposition pour les utilisateurs quel que soit leur logiciel, infrastructure, langue, culture. Donc, on essaie de supprimer tous les obstacles qui les empêchent d'accéder au contenu Web et à ces services Web et aux différentes ressources numériques. Voici le logo de l'accessibilité Web. On a ici l'icône qui définit les problèmes de mobilité. Par exemple, les handicaps moteurs; on a aussi les problèmes auditifs. Les gens utilisent souvent le langage des signes pour pouvoir communiquer avec les personnes sourdes et muettes. Dans cette partie on a les problèmes cognitifs; généralement ce sont des déficiences physiques ou bien des maladies mentales ou bien des maladies — des déficiences intellectuelles. Par la suite, on ales problèmes de vision. Pour les problèmes de vision, ce n'est pas toujours assez grave; on peut aussi par exemple citer les personnes qui utilisent des écrans de taille petite ou les personnes qui ne peuvent pas lire les textes qui sont petits. Ce sont vraiment les personnes en situation de handicap; tout le monde peut avoir un handicap, non seulement les maladies graves qu'on connaît.

Aussi, l'accessibilité, c'est référencer en abréviation comme a11y. Pour la situation des handicaps dans le monde, voici les statistiques récentes des États Unis; on a une personne parmi cinq qui ont un type de handicap et voici la répartition de ces chiffres là. Donc, vraiment cela constitue une très grande part de notre population.

Le fait de pouvoir donner cette importance et pourquoi l'accessibilité est elle si urgente qu'on doit le considérer dans le développement de notre application? Tout d'abord, c'est un droit humain, toutes les personnes devront avoir l'accès aux applications et aux services Web quel que soit leur handicap. Puis, on a l'accessibilité qui s'intègre dans l'inclusion sociale, l'égalité et la non discrimination. Il y a aussi plusieurs avantages pour les entreprises; savoir certainement renforcer votre marque si vous aidez une grande part du public à atteindre vos services et pouvoir naviguer vos services et vos applications.

Aussi, cela va toucher un public plus large. Qui dit accessibilité dit des nouvelles parts de marché et cela pourrait aider à réduire les risques des complications juridiques comme a mentionné Zakari. Il y a aux États Unis et dans l'Union européenne des lois. L'ADA est une loi américaine qui insiste que toutes les personnes doivent avoir en droit civil la législation pour utiliser Internet avec un accès légal.

Il y a aussi en France, par exemple, certaines lois pour les entreprises qui dépassent un certain chiffre d'affaires que tous leurs services doivent être accessibles aux personnes handicapées. Il n'y a pas de limite, que ce soit des services hors connexion ou bien les services qu'on peut y accéder à travers des applications Web, mobile, etc Il y a aussi le référence RGAA, un guide qui comprend les bonnes pratiques à respecter pour que nos services soient dans les normes.

En dernier lieu, on peut citer aussi l'amélioration du référencement SEO qui permettra dans les pratiques qu'on va voir tout de suite, qui permet non seulement d'augmenter l'accessibilité de notre plateforme mais aussi augmenter le référencement et le rang dans les différents sites de recherche.

Pour pouvoir comprendre tout d'abord comment ces personnes handicapées utilisent Internet, j'ai mis ici quelques images pour voir les différents outils et comprendre mieux comment ces personnes utilisent Internet. Il y a les lecteurs d'écran. Par exemple, une personne qui n'arrive pas à voir, il peut avoir un lecteur qui va tout le contenu de la page et Va pouvoir interagir avec le contenu à travers des claviers spéciaux, par exemple avec les schémas de braille.

On a aussi des mini claviers pour ces personnes. On a, par exemple, ici, les différents points pour l'écriture braille et on a des boutons à configurer et on peut les utiliser pour n'importe quelle situation.

Par la suite, on a les pointeurs qui sont généralement dédiés pour les personnes à mobilité réduite qui sont paralysées où qui n'arrivent pas à bouger leur corps. Ils peuvent utiliser ces outils de pointage de plusieurs formes. Voici différents exemples. C'est une machine à l'aide de laquelle on peut naviguer dans notre appareil. À travers la bouche, on a par exemple cette personne à mobilité réduite qui peut naviguer son curseur à travers cet outil là.

Par la suite, on a des types spéciaux de moniteur. Par exemple, celui là, il est fourni avec un écran et aussi avec une caméra ici. Cette caméra va essayer de détecter l'angle de la vision de l'œil. À travers l'angle, on peut focaliser l'œil sur l'écran et naviguer sur Internet. On a aussi les assistances par la voix, Amazon et autres qui sont très accessibles pour les utilisateurs.

Revenons maintenant à l'accessibilité.

En ayant une considération à propos de ces outils de navigation qu'utilisent les personnes vivant avec un handicap, on peut conclure qu'on n'a pas les mêmes moyens de naviguer Internet. Par exemple, nous comme développeurs, on essaie de créer des interfaces Web. On ne pourra pas faire ça sans avoir communiqué avec notre ordinateur, avec notre vision, avec notre voix. Mais pour les utilisateurs pour lesquels notre plateforme sera dédiée ils n'auront pas le même accès pour utiliser le contenu. Pour les développeurs, ils essaient d'utiliser des outils d'évaluation pour augmenter la performance de l'application et les utilisateurs essaie d'utiliser le navigateur ou ces outils de l'accessibilité.

On va maintenant enchaîner vers les bonne pratique de l'accessibilité. Je vais les regrouper en plusieurs parties. Je vais commencer par le contenu. Comment peut on rendre notre contenu accessible? J'ai mis des images pour mieux illustrer chaque point.

On va commencer, par exemple, pour ce site Web. On a cette en tête qui contient une phrase en anglais et c'est une plateforme pour pouvoir télécharger les illustrations et les icônes et les différentes images pour le site Web. Les soucis qu'on a avec ce titre là, c'est que si on utilise un lecteur d'écran, et ce lecteur va nous dicter les menus et ce grand titre. On n'aura pas une grande information à propos du contenu de ce site Web ou à quoi il sert ou quels sont les services qu'on peut avoir avec ce site Web. On propose donc utiliser des grands titres significatifs. Ici, on donne clairement dans notre titre que cette plateforme est pour les icônes pour l'utilisation pour pouvoir les télécharger. Lorsqu'on va utiliser le lecteur d'écran, on va comprendre le but de cette plateforme en passant par ce grand titre là. La chose qui était un peu difficile pour la première illustration. Concernant le contenu, on a aussi les boutons d'action qu'on utilise. Ce sont des termes génériques et il vaut mieux utiliser des étiquettes qui sont bien précise et qui montre le but de chaque action qu'on va enchaîner en cliquant sur le bouton. Par la suite, on a sur Internet en général, que ce soit Twitter, ou n'importe quel réseaux sociaux, on a du contenu, des images, des vidéos. Ces réseaux sociaux proposent d'insérer un texte alternatif pour les personnes qui utilise les lecteurs d'écran ou pour les personnes qui

n'arrive pas à voir une autre interface Web. Il vaut mieux de fournir du texte pour le contenu qui est non texte, une image, une vidéo, etc

On doit être vraiment bref dans la description de nos titres et ils doivent être bien précis et aller jusqu'au point et doivent être clairs et simples, et ne démontre pas des problèmes de complexité pour les personnes aux prises avec des problèmes cognitifs ou de vision. On peut utiliser et fournir du texte pour le contenu non textuel. Par exemple, on trouve certains sites Web difficile à lire.

Voici une illustration qui montre une comparaison entre les deux sections. On a par exemple ici un texte blanc qui est sur un fond multicolore. On peut avoir dans cette image des parties dans l'image qui sont avec la même couleur de notre texte et qui va mettre la lisibilité du texte assez compliquée. On suggère de créer un contraste entre les différentes couleurs et aussi si c'est difficile de le faire on ajoute quelque chose pour séparer les items.

Ce problème peut être confronté par les personnes qui ont des troubles de vision ou les personnes dyslexiques. Il vaut mieux créer un contraste entre les différents éléments de notre plateforme.

Il ÿ a aussi par exemple pour les personnes dyslexiques, il faut séparer avec un bon espacement. Ce n'est pas toujours une bonne pratique d'utiliser la même taille d'espacement. Pour séparer le titre du paragraphe, il vaut mieux créer une bonne marge d'espace pour qu'on puisse séparer visuellement ces contenus et comme je l'ai dit, par exemple, pour les personnes qui trouvent et qui ont des problèmes de vision ou les personnes dyslexiques, elles trouvent souvent des problèmes en naviguant les contenus sur Internet.

En parlant aussi du contraste, voici un mauvais exemple du contraste des couleurs. On a par exemple un fond en rouge avec un texte en bleu. Cela crée vraiment un mauvais contraste. On ne pourra pas lire ces textes avec une grande difficulté. Même les personnes qui n'ont aucun souci vont trouver des difficultés pour lire ces textes.

On a aussi, concernant les troubles de vision, on a plusieurs maladies. Par exemple, les personnes qui ont des troubles de couleur, qui ne peuvent pas différencier les différentes

couleurs sont less personne daltonien. Par exemple, le rouge cela ne va pas être vu par eux comme la manière dont les personnes normales peuvent le visualiser.

Il y a plusieurs personnes qui sont daltoniennes et qui trouvent des troubles pour voir les couleurs. On peut voir ici le spectre des couleurs pour une personne normale et son équivalent pour les différentes maladies. Ça va, par exemple, si on utilise des couleurs pour différencier deux types de catégories. Ici, l'équipe A et l'équipe B, ce sera difficile pour les autres personnes de différencier ces deux catégories à travers les couleurs. Il faut prendre ça en considération.

Pour conclure cette partie de la conception visuelle, il vaut mieux utiliser des polices cohérentes et de minimiser le nombre des polices utilisées et aussi vérifier que la taille est assez grande pour l'utilisateur. Ainsi, on doit choisir les bonnes couleur, créer un bon contraste et ajouter des espaces plans si c'est nécessaire.

Avant d'enchaîner, j'aimerais bien vous montrer un site Web qui est très pratique. Ce site va nous aider lorsqu'on est dans le design d'une plateforme et dans la conception à choisir les bonnes couleur. Par exemple, si je choisis une autre couleur, par exemple celui là, on peut voir clairement que ce n'est pas un grand contraste qui est créé et voici les différents types de maladie, comment ils vont voir cette couleur. Et avec les bonnes pratique de l'accessibilité, avec les normes internationales, cela ne va pas passer. Sinon, pour enchaîner la section suivante, c'est à propos de la navigation. On peut voir dans cette diapositive un exemple de plateforme Web où on a plusieurs menus et on peut accéder à une certaine page avec plusieurs menus. Le souci avec cette plateforme c'est que lorsqu'on a choisi un menu dans la navigation, on ne peut pas savoir quel menu on a choisi. On n'a pas une différenciation de couleur dans le titre, donc il vaut mieux. Par exemple, ici lorsqu'on sélectionne le menu d'accueil, on peut voir clairement que le menu d'accueil est bien sélectionné. Pour les personnes qui ont des soucis cognitifs et des problèmes de mémoire, de bien repérer le menu qu'ils ont sélectionné.

On a aussi — dans la navigation, par exemple, lorsqu'on veut insérer un lien, on met souvent afficher plus et des termes génériques, mais le souci, c'est que lorsqu'on passe à un lecteur d'écran, il va lire le texte et après il va nous lire « cliquez ». Lorsque le lecteur d'écran va lire « cliquez », l'utilisateur ne va pas comprendre sur quoi cliquer. Donc il faut utiliser des liens intégrés au texte du lien et utiliser des liens significatifs.

Pour conclure ici, cette partie, il vaut mieux utiliser une navigation cohérente avec différent menu sélectionné et éviter les liens significatifs et utiliser des grands boutons qui vont être bien repérés à travers l'utilisateur.

Et pour notre dernière partie, c'est les formulaires. On utilise souvent des formulaires comme cela. On trouve souvent sur Internet des formulaires où on a la signification du champ dans ce conteneur. Le souci, c'est que lorsqu'on utilise un lecteur d'écran on n'arrive pas à connaître à quoi sert le champ. Il vaut mieux utiliser des libellés avant chaque champ pour pouvoir, pour permettre au lecteur d'écran de lire le libellé et donner l'accès à l'utilisateur d'insérer ses données dans ce champ. Voici un exemple de comment on peut améliorer notre formulaire. Même si le design cela va, par exemple, certains vont trouver que c'est plus simple et plus cohérent, mais en réalité, le dernier design est plus accessible pour tous les utilisateurs. On peut voir à travers le lecteur d'écran, comprendre les libellés de chaque champ et par la suite aussi, gérer les erreurs. Par exemple, si l'utilisateur n'arrive pas à confirmer un champ, on peut lui permettre de lire l'erreur significative de chaque erreur et par la suite, donc, comme on a dit, on doit faciliter la navigation de ces formulaires et s'assurer que les formulaires sont accessibles par le clavier. On doit identifier clairement les champs obligatoires et aussi traiter les erreurs du formulaire en le rendant accessible par les différents outils d'accessibilité.

Sinon, voici, c'était en général les bonne pratique à utiliser, qu'on doit savoir étant développeur, étant designer, quelle que soit notre expérience. On va voir maintenant comment implanter ces bonne pratique dans notre code. On a le sémantique html. Ce sera identifié un titre qui est unique dans notre site Web et on va utiliser les titres de premier niveau dans le document qui est la balise H1 et le titre doit être H2 et ainsi de suite. Lorsqu'on veut mettre notre texte en gras, on doit utiliser la balise correspondante et ainsi de suite. Ainsi, on a les différentes balises HTML pour les listes, les énumérations, etc Il faut au maximum éviter d'utiliser des [Inaudible] partout parce que les outils d'accessibilité n'arrivent pas à comprendre les headings [Inaudible]. Par la suite, on a le ARIA. Ce sont des conventions qui sont utilisées dans le Web pour voir et pour permettre aux utilisateurs qui utilise les outils d'accessibilité à mieux navigue sur Internet. Donc, à travers ces codes on peut intégrer des attributs pour donner des outils d'accessibilité pour que l'utilisateur puisse naviguer dans notre plateforme.

Les attributs sont regroupés en trois catégories, ce sont les rôles, les caractéristiques de l'élément et le statut, l'état actuel.

J'aimerais d'abord vous expliquer comment l'utilisateur navigue. Notre code va être utilisé pour remplir le DOM arbre qui contient les objets que nous avons dans nos balises et qui vont être utilisées par les navigateurs pour créer le contenu dans notre navigateur.

Donc, la chose que peut être que vous ne connaissez pas, c'est qu'il n'y a pas que l'arbre dedans, mais l'arbre de l'accessibilité qui aussi va être rempli à travers les informations récupérées par l'arbre DOM et récupéré par notre code. Les utilisateurs qui utilisent les navigateurs d'une manière normale vont voir à travers le visuel mais les utilisateurs avec un handicap vont interagir avec l'arbre de l'accessibilité et non pas avec l'arbre de DOM.

Le but d'utiliser les normes et les bonnes pratique, c'est que pour pouvoir remplir l'arbre de l'accessibilité le maximum pour donner le maximum d'informations à ces outils d'accessibilité pour pouvoir permettre à l'utilisateur d'interagir avec notre plateforme d'une manière correcte. Je vais vous montrer maintenant une petite démonstration sur comment remplir l'arbre d'accessibilité en utilisant les attributs d'ARIA.

Donc, voici un exemple d'une plateforme que j'ai faite. Dans cette plateforme on a trois menus. Lorsqu'on clique sur chaque menu on va se diriger vers une section qui contient un titre et une description. Voici le code en html de chaque partie. On a le titre, notre liste de navigation et on a aussi une section pour chaque section.

Si on veut commencer la liste d'accessibilité, je vais vous montrer l'arbre de l'accessibilité. On peut cliquer sur inspecter et on peut voir un menu d'accessibilité. On peut voir que le menu maintenant, cette page là, c'est la page qui ne contient pas les attributs d'accessibilité. On peut voir qu'on a des types génériques, le type DIV qu'on peut voir ici. La balise. Le type générique est une mauvaise utilisation des balises qui sont interprétées par l'arbre de l'accessibilité. Notre but est d'améliorer le contenu de l'arbre de l'accessibilité à travers les éléments d'ARIA. Je vais commencer ici par la liste. Cette liste, c'est notre menu de navigation. Cela va avoir comme rôle le tab liste. Et par la suite, chaque élément de notre liste devra avoir le rôle Tab.

Pour ces conventions d'ARIA c'est disponible dans la documentation sur Internet. Ce sont des conventions qu'on utilise pour remplir l'arbre DOM qui va remplir par la suite l'arbre de l'accessibilité.

Par la suite, on va aussi définir un rôle de chaque section de DIV. Le rôle de chacun est un tab panel. Je vais essayer de le mettre dans toutes les sections qu'on a. Et donc, maintenant, on a défini le rôle, le but de chaque élément. On doit par la suite définir, par exemple, le statut. C'est plus facile, c'est l'état actuel de l'élément. Par défaut, on a le menu Home qui est sélectionné et c'est le premier qui est sélectionné. On va ajouter un attribut qui s'appelle ARIA Selected. Et pour les autres, on va donner false. Ceci va permettre aux différents outils d'accessibilité de savoir que le menu Home est le premier sélectionné par défaut. Du coup, par la suite, on a défini les statuts et on va définir les propriétés et les caractéristiques de chaque élément.

Pour définir ceci, on peut dire que, par exemple, cette liste là, l'élément est le menu de navigation et c'est cette balise qui contrôle la partie DIV, si on ne clique pas sur un élément de la liste, on ne peut pas voir le DIV. On va ajouter un autre attribut qui s'appelle ARIA contrôle et cela Va permettre de dire à notre outil d'accessibilité que cette liste va contrôler cette section de DIV. Et il va prendre en paramètre l'identifiant.

Par la suite, on peut ajouter les différents ID des différentes sections.

On a mentionné, on a rempli ces paramètres dans l'arbre de l'accessibilité que chaque liste va contrôler un certain élément des autres balises div. Par la suite, on va ajouter une autre caractéristique à ces div. Chaque div a un libellé qui est cette liste d'items. Pour mieux visualiser ça dans le navigateur, on a cette section et elle va avoir comme libellé le titre du menu dans la navigation. Pour voir, pour identifier ça, on va ajouter un attribut qui s'appelle ARIA [Inaudible] et ajouter un identifiant. || vaut mieux les définir. On peut faire ici un tab et on va créer des identifiants pour chaque élément de notre liste. Et par la suite, on va remplir notre ARlAlabelledby avec les identifiants de la liste.

Je pense que c'est tout.

On a rempli les bons attributs, que ce soit les attributs du rôle, des caractéristiques ou de l'état.

On peut actualiser notre page Web et je vais aussi refaire l'inspection et voir dans le menu accessibilité. On n'a pas le type générique puisqu'on a montré au navigateur que ce div voici son but et son rôle. Son rôle c'était les tab panel et définit aussi les rôles de notre navigation.

Ceci va donner une meilleure pratique et suivre les normes internationales pour l'utilisation de ces outils d'accessibilité.

Un dernier point que j'aimerais mentionner, c'est qu'en naviguant dans cette accessibilité menu dans le développeur outils, cela va être difficile de naviguer entre les différentes sections. On peut cocher cette case pour pouvoir voir tout cet arbre d'accessibilité comme l'arbre DOM qu'on a ici. On peut cocher cette case et redémarrer l'outil. Par la suite, on aura accès à l'accessibilité. On peut cliquer sur ce bouton et on peut voir tout l'arbre de l'accessibilité.

Donc, pour conclure notre présentation, j'aimerais bien présenter quelques outils d'accessibilité qui vont vous aider en tant que développeurs à créer des plateformes bien accessibles. Le premier outil est Wave qui est une extension. En cliquant ici, on aura un rapport sur notre plateforme. On peut voir les bonnes pratiques qui sont utilisées et les erreurs à corriger. On peut voir si on a bien inséré les attributs d'ARIA et on peut voir si on a des alertes et si les couleurs utilisées dans la page ont un bon contraste et s'ils passent le test.

On a l'extension du lecteur d'écran. Il faut les tester et il permettra de lire le contenu des pages Web dans notre navigateur et avoir une visibilité de comment les autres utilisateurs naviguent le Web. On a aussi une autre extension qui contient beaucoup de fonctionnalités pour bloquer le CSS ou le Java script et voir si on a fourni du texte alternatif pour chaque image. Il contient beaucoup de sections. || y a plusieurs catégories pour pouvoir utiliser et voir chaque outil, son but et comment il est utilisé par une large partie des utilisateurs.

Si on souhaite conclure cette présentation, c'est que pour mieux comprendre l'accessibilité, on peut le résumer dans le mot « pour » : Perceptible, opérable, compréhensible et robustesse. Pour le perceptible, le contenu doit être accessible aux utilisateurs par la vue, le toucher, par la voix. Sinon, pour opérable, cela veut dire exploitable. Notre produit doit être accessible par le clavier et les différentes méthodes de saisie. Pour compréhensible, cela veut dire que le contenu doit être lisible et prévisible avec des étiquettes et des instructions bien claires. Les titres doivent être simples et clairs pour que tous les utilisateurs puissent comprendre le contenu de la page. Et à la fin, on a robustesse; cela veut dire que le produit doit fonctionner avec une variété des technologies d'assistance, soit avec les navigateurs ou les dispositifs qu'on a VU.

Après, nous, comme développeurs, comment peut on utiliser et implanter toutes nos connaissances d'aujourd'hui? On doit utiliser les meilleures balises et les attributs d'ARIA et fournir du texte pour le contenu non textuel à travers le sous titrage ou à travers des descriptions. On peut aussi utiliser par exemple des fonctionnalités comme le vibreur pour pouvoir aider et on peut aller vraiment jusqu'au prochain étape à travers d'utiliser des outils qui vont fournir des fonctionnalités supplémentaires. Par exemple, j'ai trouvé dans ce site qui contient beaucoup de formation en ligne à propos de l'informatique en général. J'ai trouvé dans ce site un bouton de l'accessibilité qui contient plusieurs fonctionnalités. Par exemple, on peut utiliser le lecteur d'écran à travers cette extension, augmenter la taille du texte, afficher les polices, changer les couleurs et le contraste. Il y a plusieurs outils dont on peut bénéficier dans ce site. On peut aussi par exemple utiliser les fonctionnalités du texte vers la voix, à travers ces outils ou à l'aide de solutions existantes comme plusieurs services de cloud. C'était tout pour moi. Je vous remercie pour votre attention. J'ai listé aussi dans cette dernière diapositive des liens très utiles à propos de l'accessibilité si vous souhaitez voir d'autres informations à propos de ce sujet.

Merci pour votre attention. Si vous avez des questions, n'hésitez pas.

ZAKARI YAMA Je crois qu'on va devoir arrêter là s'il n'y a pas de questions. On se dit à la prochaine fois. Voilà, merci beaucoup et merci à tous ceux qui ont assisté et qui ont visionné cette présentation.

KAWTAR CHOUBARI : Merci à vous. Comme vous avez dit, la présentation sera partagée avec tous ces liens. Il y a beaucoup d'illustrations et d'exercices sur les bonnes pratiques. Merci pour l'invitation.

ZAKARI YAMA : Merci à toute l'équipe qui a facilité l'organisation de ce webinaire et à la prochaine fois. Merci. Au revoir.