Natal n’est pas une "innovation réelle issue de Microsoft", c’est un projet acheté à une boite qui l’a d’abord proposé à Nintendo (qui a décliné l’offre).
D’autre part depuis l’E3, les éditeurs qui s’étaient engagés sur Natal commencent à déchanter et les annonces d’arrêt de projet se font de plus en plus nombreuses : la technologie n’a pas l’air d’être si au point que ça.
L’accessibilité, un droit fondamental
« Par personnes handicapées on entend des personnes qui présentent des incapacités physiques, mentales, intellectuelles ou sensorielles durables dont l’interaction avec diverses barrières peut faire obstacle à leur pleine et effective participation à la société sur la base de l’égalité avec les autres. »
Article premier — Convention relative aux droits des personnes handicapées de l’ONU (13 décembre 2006)
Ratifiée par plus de 180 États.
Comprendre la situation de handicap
On parle de situation de handicap lorsqu’une personne ayant une déficience se trouve empêchée de faire quelque chose du fait de l’inadaptation de son environnement à ses capacités.
C’est donc le manque d’adaptation qui crée la situation de handicap et non la déficience elle-même.
Exemples de différents besoins pour naviguer sur le web
- Naviguer seulement au clavier
- Naviguer seulement à la souris
- Lire les descriptions des éléments visuels
- Lire les descriptions des éléments audios
- Maîtriser son environnement et naviguer à son rythme
- Personnaliser l’affichage (couleurs, taille des caractères, police…)
- Besoins liés au vieillissement des utilisateurs
Pour aller plus loin : « Personnes handicapées et navigation sur le Web » du guide « Défauts d’accessibilité : impacts sur les utilisateurs ».
Technologies d’assistance
Permettre l’accès par un autre moyen.
Quelques exemples :
- plage braille ;
- clavier monomanuel ;
- headstick ;
- eye-tracking ;
- clavier visuel ;
- lecteur d’écran ;
- contacteur au souffle ;
- trackball ;
- contrôle par la pensée ;
- etc.
Qui est concerné ?
Secteur public
Administrations, collectivités territoriales, etc.
Organismes affiliés
Organismes de mission de service public ou ayant une mission d’intérêt général
Entreprises privées
CA en France égal ou supérieur à 250 millions d’euros ou selon secteur d’activité
Quels secteurs ?
- Banques
- Téléphonie
- Livre numérique
- Commerce électronique
- Audiovisuel
- Transports
Note : Les micro-entreprises (moins de 10 personnes et CA inférieur à 2 millions d’euros) ainsi que les entreprises B2B ne sont pas concernées.
Que doit-on rendre accessible ?
- Sites web
- Applications mobiles
- Applications métiers, progiciels (uniquement web)
- Mobilier urbain numérique (borne interactive)
Exemptions : consulter le détail pour les entités publiques et les entreprises privées concernées en raison de leur CA ou le décret pour les entreprises privées concernées en raison de leur secteur d’activité.
Testez vos connaissances
Répondez à 4 questions sur quiz.access42.net
Respect de la sémantique du balisage [A]
Thématique RGAA : Éléments obligatoires
Utiliser les balises pour leur rôle prévu par la spécification.
Exemples de détournements :
<div>pour créer des paragraphes<hx>pour créer des légendes d’images (référencement).
Ressource :
- Références RGAA :
- 8.9 [A]
Configuration de la touche Entrée avec le plugin CKEditor
L’outil d’édition de texte CKEditor permet de configurer les balises HTML générées lors de l’utilisation des touches Entrée et Maj + Entrée.
La structure du document (HTML5) [A]
Thématique RGAA : Structuration
Obligatoires :
-
<header><nav><main><footer> <main>est unique dans la page<nav>est réservé aux zones de navigation principales et secondaires.
- Références RGAA :
- 9.2 [A]
<nav> [A]
Thématique RGAA : Structuration
- Obligatoire
- Éléments de navigation principaux :
- la navigation principale ;
- les navigations secondaires :
- menu de sous-rubrique
- navigation dans les collections de pages
- navigation dans les résultats de recherche
- le fil d’ariane
- les liens d’évitement
- Le bouton "burger" doit être inclus dans l’élément
<nav>.
- Références RGAA :
- 9.2 [A]
<header> [A]
Thématique RGAA : Structuration
- Obligatoire pour l’en-tête du document
- Contenus d’introduction
- Peut contenir des titres, de la navigation
- Références RGAA :
- 9.2 [A]
<footer> [A]
Thématique RGAA : Structuration
- Obligatoire pour le pied de page du document
- Contenus de pied de page, d’articles ou de contenus regroupés par
<section>
- Références RGAA :
- 9.2 [A]
<main> [A]
Thématique RGAA :Structuration
- Obligatoire
- Unique dans la page
- Regroupement du contenu principal de la page (les éléments répétés - navigation, publicité - ne devraient pas être structurés avec).
- Références RGAA :
- 9.2 [A]
<aside>
Thématique RGAA : Structuration
- Optionnel
- Contenus indirectement reliés au contenu principal, peuvent être consultés de manière indépendante
- Références RGAA :
- 9.2 [A]
Lien d’accès rapide [A]
Thématique RGAA : Navigation
- Accès rapide au contenu principal
- Visible à la prise de focus
- Doit se trouver en premier dans le code HTML de la page
tabindex="-1"sur l’élément cible
<a href="#main">contenu</a>
<main id="main" tabindex="-1">
....
</main>
- Référence RGAA :
- 12.7 [A]
Exemple conforme : sur le site France Travail, le lien d’accès rapide est rendu visible à la prise de focus.
Exemple conforme : sur le site access42.net, le lien d’accès rapide « contenu » est toujours visible (en haut à gauche)
Landmarks ARIA [A]
Thématique RGAA : Navigation
- Uniques dans la page :
-
role="banner" -
role="main" -
role="contentinfo" -
role="search"
-
role="navigation": plusieurs occurrences autorisées pour les navigations principales et secondaires
Depuis RGAA 4 : Il est également possible d’utiliser une autre méthode de navigation rapide entre les zones d’une page : liens d’accès rapides, titres, mécanisme pour masquer la zone….
- Référence RGAA :
- 12.6 [A]
Systèmes de navigation [AA]
Thématique RGAA : Navigation
Deux systèmes de navigation au moins :
- Menu de navigation ;
- Plan du site ;
- Moteur de recherche.
Le moteur de recherche doit indexer tous les contenus.
- Référence RGAA :
- 12.1 [AA]
Exemple conforme : le site toulouse.fr dispose d’un menu de navigation principal et d’un plan du site.
Menu et barre de navigation [AA]
Thématique RGAA : Navigation
- Même place dans chaque ensemble de pages.
- Présentation cohérente dans chaque ensemble de pages.
- Référence RGAA :
- 12.2 [AA]
Exemple conforme : le menu du site toulouse.fr est toujours a la même place dans la présentation et il a toujours la même place relative dans le code source.
Exemple conforme : le plan du site toulouse.fr est toujours présenté à la même place, il est toujours atteignable au moyen de la même fonctionnalité (lien) et il est toujours dans le même ordre relatif du code source.
Plan du site [AA]
Thématique RGAA : Navigation
- Représentatif de l’architecture générale du site
- Liens fonctionnels :
- site W3C Link checker ;
- extension « Broken Link checker » (sur Mozilla Firefox ou sur Chrome).
- Intitulés des liens pertinents
- Référence RGAA :
- 12.3 [AA]
Listes [A]
Thématique RGAA : Structuration
- Liste non ordonnée :
ul li - Liste ordonnée :
ol li - Liste de définition :
dl dt/dd role="list"role="listitem"- Les suites de liens devraient être structurées avec des listes.
- Référence RGAA :
- 9.3 [A]
<p>
- Favoriser l’information…
<br />
- Permettre aux personnes…
</p>
Citations [A]
Thématique RGAA : Structuration
- Citation en ligne
<q> - Citation en bloc
<blockquote>
- Référence RGAA :
- 9.4 [A]
<blockquote>
<p>Tant qu’à jouer à marcher, éteignez votre ordi et allez marcher dehors</p>
</blockquote>
Cadres iframe et frame [A]
Thématique RGAA : Cadres
- Assurer l’identification des balises
iframeetframeavec un titre pertinent - Pas de titre dans le cas de cadres techniques (Google Analytics, etc.) mais cacher avec
aria-hidden="true".
Ressources : Le principe de non-interférence
<iframe title="Publicité"></iframe>
<p>Des contenus vidéos sur le Web
(<span lang="en">on</span>
et <span lang="en">offline</span>).
</p>
Quiz
Lequel est un titre de niveau 2 ?
<h3 aria-level="2">Les Aventures d’Alice au pays des merveilles</h3>
<h2>De l’autre côté du miroir</h2>
<p role="heading" aria-level="2">La Chasse au Snark</p>- A - Les Aventures d’Alice au pays des merveilles
- B - De l’autre côté du miroir
- C - La Chasse au Snark
- D - Les 3
Réponse : les 3 !
Le premier, bien qu’il soit déclaré avec un élément HTML <h3>, est bien un titre de niveau 2 puisque la propriété aria-level="2" y est déclarée.
Quiz
Que faire avec la portion de texte qui n’est pas en français dans le texte qui suit ?
Et il lui demanda : tlhIngan Hol Dajatlh'a'?
- A - Déclarer un changement de langue.
- B - Déclarer un changement de direction.
- C - Déclarer un changement de langue et de direction.
- D - Ne rien faire.
Réponse : Ne rien faire.
Le texte est en klingon, une langue imaginaire. Il s’agit d’un cas particulier des changements de langue (tout comme les langues mortes).
Traduction : Parlez-vous klingon ?
Tableaux de mise en forme [A]
Thématique RGAA : Tableaux
- Compréhensible si linéarisé
role="presentation"sur la balisetable- HTML 4 :
summary=""si présent - Pas de balises ou d’attributs de tableaux de données :
<th><thead><tfoot><caption>scopeheaderscolgroupaxisrole="columnheader"role="rowheader"
<table>
<caption>Parc et fréquentation des autres hébergements collectifs touristiques en 2018</caption>
<tr>
<th scope="col">Type d’hébergement professionnel</th>
<th scope="col">Nombre d’établissements</th>
[...]
</tr>
<tr>
<th scope="row">Résidences de tourisme</th>
<td>2 426</td>
[...]
</tr>
</table>
<caption>
Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie manufacturière par type en 2016
<span>
Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA) sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers de tonnes le pourcentage. Une troisième colonne présente le total des deux industries, en milliers de tonnes et en pourcentage.
</span>
</caption>
Tableaux complexes [A]
Thématique RGAA : Tableaux
Identifier les cellules d’en-têtes via un attribut id et lier les cellules de données via l’attribut headers.
Exemple : headers="id_1 id_2".
- Référence RGAA :
- 5.7 [A]
<tr>
<td></td>
<th id="entete1" colspan="2">Industries agroalimentaires (IAA)</th>
<th id="entete2" colspan="2">Industries manufacturières (hors IAAA)</th>
<th id="entete3" colspan="2">Ensemble</th>
</tr>
<tr>
<td></td>
<th id="entete4">Quantités (en milliers de tonnes)</th>
<th id="entete5">en %</th>
<th id="entete6">Quantités (en milliers de tonnes)</th>
<th id="entete7">en %</th>
[...]
</tr>
<tr>
<th id="entete8">Déchets banals</td>
<td headers="entete8 entete1 entete4">1 147</td>
<td headers="entete8 entete1 entete5">31</td>
<td headers="entete8 entete2 entete6">9 795</td>
<td headers="entete8 entete2 entete7">97</td>
[..]
</tr>Quiz
Que pouvez-vous dire sur ce tableau ?
<table class="a42-text-small">
<tr role="presentation"><td><a href="#">1</a></td><td><a href="#">2</a></td><td><a href="#">3</a></td><td><a href="#">4</a></td><td><a href="#">5</a></td><td><a href="#">6</a></td><td><a href="#">7</a></td><td><a href="#">Dernière</a></td></tr>
</table>- A - Les en-têtes sont correctement reliées
- B - Il manque les propriétés
headerspour la liaison des en-têtes - C - Il manque un titre pertinent (balise
<caption>) - D - Le tableau n’est pas un tableau de données
Images de décoration [A]
Thématique RGAA : Images
Pour les éléments <img>, empêcher la restitution au moyen de :
altvide- ou
aria-hidden="true" - ou
role="presentation"
- Référence RGAA :
- 1.2 [A]
<img src="image.png" alt="" />
<img src="image.png" aria-hidden="true"/>
<img src="image.png" role="presentation"/>
Images de décoration [A]
Thématique RGAA : Images
Pour les éléments <svg>, empêcher la restitution au moyen de :
aria-hidden="true"
De plus :
- Aucun des attributs suivants ne doit être présent :
aria-label,aria-describedby,aria-labelledby,role="img",title - Les balises
<title>et<desc>doivent être vides ou absentes
- Référence RGAA :
- 1.2 [A]
<svg aria-hidden="true">
…
</svg>
<img src="img.png" alt="2019 EESC Civil society prize Award ceremony 12 december 2019"/>
<img src="img.png" aria-label="2019 EESC Civil society prize Award ceremony 12 december 2019"/>
<img src="img.png" title="2019 EESC Civil society prize Award ceremony 12 december 2019"/>
<img src="img.png" aria-labelledby="image-desc"/>
<p class="sr-only" id="image-desc">2019 EESC Civil society prize Award ceremony 12 december 2019</p>
- Nom donné à un élément d’interface utilisateur et exploité par les TA.
- Déterminé par une propriété visible (par exemple un texte) ou invisible (par exemple attribut
alt). - « Alternative » d’image, « intitulé » de lien/bouton, « étiquette » de champ de formulaire = nom accessible.
Attention, en cas d’implémentation multiple :
- Algorithme de calcul du nom accessible
- Restitution sur la base de référence
Exemple 1 - Conforme
<img src="logo_access42.png" alt="Access42">Le nom accessible de l’image est "Access42"
Exemple 2 - Non conforme
<img src="logo_access42.png" alt="Access42" aria-label="Logo">Le nom accessible de l’image est "Logo". ("Access42" n’est pas restitué).
Décorative ou porteuse d’information ?
Images porteuses d’information [A]
Thématique RGAA : Images
Pour les éléments <svg>, définir une alternative au moyen de :
role="img"- et
aria-labelouaria-labelledby.
- Référence RGAA :
- 1.3 [A]
<svg role="img" aria-label="Profil renseigné à 90 %">
…
</svg>
ou
<svg role="img" aria-labelledby="title_svg">
<title id="title_svg">Profil renseigné à 90 %</title>
…
</svg>
Image map
<img src="" alt="Carte de France" usemap="#LIEUX" />
<map id="lieux" name="LIEUX">
<area href="regi42" alt="Alsace">
<area href="regi53" alt="Bretagne">
</map>
Image SVG
<svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="id-map">
<title id="id-map">Carte de France</title>
<a xlink:title="Région 1" xlink:href="region1.html">
<path>[...]</path>
</a>
</svg>
Attention, les attributs natifs xlink:title et xlink:href sont dépréciés avec la version SVG 2. Par conséquent, il faut les remplacer par les propriétés role="link" et aria-label="[...]" pour s’assurer du support et de la présentation cohérente par les technologies d’assistance.
<a aria-label="Région 1" href="region1.html" role="link">
<path>[...]</path>
</a>
Note : Le contenu d’un élément <svg> n’a pas les mêmes attendus qu’en HTML, il n’y a pas de nécessité à structurer des suites de liens sous forme de liste dans le code source.
Images description détaillée [A]
Thématique RGAA : Images
- Description détaillée adjacente ;
- ou bien lien adjacent.
Également possible d’utiliser les attributs aria-label ou aria-labelledby.
Note 1 : aria-label et aria-labelledby ne sont exploités que par les lecteurs d’écrans.
Note 2 : L’attribut longdesc est obsolète.
Quiz
Quel est le nom accessible de cette image ?
<img src="img_slide/quizz/astronaute.jpg" alt="un astronaute perdu dans l’espace" title="un astronaute en mission de réparation">- A - un astronaute perdu dans l’espace
- B - un astronaute en mission de réparation
- C - un astronaute perdu dans l’espace en mission de réparation
- D - il n’y a pas de nom accessible
Réponse : un astronaute perdu dans l’espace.
L’algorithme de calcul du nom accessible donne la priorité au contenu de la propriété alt="" s’il est renseigné. Le contenu du title, dans cette configuration, constitue la description accessible.
Quiz
Quel est le nom accessible de cette image ?
<img src="img_slide/quizz/moonlanding.jpg" alt="une prise de vue par Stanley Kubrick" aria-label="un astronaute après un alunissage">- A - un astronaute après un alunissage
- B - une prise de vue par Stanley Kubrick
- C - il n’y a pas de nom accessible
Réponse : un astronaute après un alunissage.
L’algorithme de calcul du nom accessible donne la priorité au contenu de la propriété aria-label s’il est renseigné. Le contenu de l’attribut alt ne sera jamais pris en compte et ne sera jamais présenté aux technologies d’assistance.
Quiz
Quel est le nom accessible de cette image ?
<p id="id_cat">un chat dans l’espace</p>
<img src="img_slide/quizz/chatespace.jpg" alt="un chastronaute" aria-labelledby="id_cat" aria-hidden="true">- A - un chat dans l’espace
- B - un chastronaute
- C - il n’y a pas de nom accessible
un chat dans l’espace
Réponse : aucun.
Bien que des propriétés de nommage soient définies sur l’image, la présence de la propriété aria-hidden="true" suffit à rendre l’image décorative et à permettre qu’elle soit ignorée par les technologies d’assistance.
Image captcha [A]
Thématique RGAA : Images
L’alternative de l’image doit permettre
d’identifier la nature de l’image
- Référence RGAA :
- 1.4 [A]
<img src="" alt="Code de confirmation à saisir"/>
Image captcha [A]
Thématique RGAA : Images
Alternative non graphique :
- captcha sonore ou logique
- envoi du code par email / SMS
Pour aller plus loin :
- Inaccessibility of CAPTCHA
- Captcha et accessibilité : Les personnes handicapées ne sont pas des robots !
- Référence RGAA :
- 1.5 [A]
Texte en image [AA]
Thématique RGAA : Images
- Texte en image remplacé par du texte stylé
- ou mécanisme de remplacement
- Référence RGAA :
- 1.8 [AA]
Exemple non conforme : l’image contient du texte en image qui peut être réalisé en HTML/CSS.
Exemple conforme : l’image contient du texte en image mais il n’est pas reproductible en CSS (texte manuscrit).
Exemple de mécanisme de remplacement
Images légendées [A]
Thématique RGAA : Images
Légende : texte adjacent à une image
- qui contient des informations sur l’image (copyright, date, auteur…) ;
- ou est destiné à compléter les informations apportées par l’image (texte associé à une image dans une galerie d’images)
Associer la légende à l’image par une relation de structure pour que les technologies d’assistance traitent l’image et sa légende comme un ensemble unique.
- Référence RGAA :
- 1.9 [A]
Exemple :pages article du Figaro.
Quiz
Quel est le nom accessible du lien ?
<a href="#" aria-label="La vie au bureau"><img src="img_slide/quizz/chevres.jpg" alt="Venez rencontrer les chèvres !" aria-label="Des chèvres et des hommes."></a>- A - Venez rencontrer les chèvres !
- B - La vie au bureau
- C - Des chèvres et des hommes
Réponse : La vie au bureau.
Bien que l’image contenue dans le lien ait une alternative donnée par aria-label, l’algorithme de calcul du nom accessible donne la priorité au contenu de la propriété aria-label définie sur le lien pour créer le nom accessible. Le contenu du lien (ici le aria-label de l’image), ne sera jamais pris en compte et ne sera jamais présenté aux technologies d’assistance.
Quiz
Quel est le nom accessible du lien ?
<a href="#" title="Promenade dans la jungle"><img src="img_slide/quizz/tigre.jpg" alt="Venez rencontrez les chats !" ></a>- A - Venez rencontrez les chats !
- B - Promenade dans la jungle
Réponse : Venez rencontrez les chats !
L’algorithme du nom accessible, en l’absence de propriétés de nommage aria sur le lien, prend en compte en priorité le contenu du lien, ici le contenu du alt de l’image. Le title défini sur le lien ne constitue que la description accessible dans cette configuration.
Quiz
Que pouvez-vous dire du lien suivant ?
La grande question sur la vie, l’Univers et le reste
<a href="#" aria-label="La réponse à la grande question sur la vie est 42">La grande question sur la vie, l’Univers et le reste</a>- A - L’intitulé du lien devrait indiquer la destination du lien de manière plus précise
- B - Le texte du lien devrait être dans une balise de citation
- C - Le nom accessible ne reprend pas le nom visible
- D - Le nom visible ne reprend pas le nom accessible
Réponse : Le nom accessible (constitué par le contenu de la propriété aria-label) ne reprend pas le nom visible.
Exemple conforme : sur le site P&G, les liens « Consulter le site » ont tous le même intitulé visible et le même contexte (titre précédent ici) mais la propriété aria-label permet de les rendre explicites.
Note : le nom accessible reprend le nom visible, aria-label="Consulter le site: Fairy".
Limite de temps de session [A]
Thématique RGAA : Consultation
- L’utilisateur doit pouvoir supprimer ou augmenter la limite de temps ;
- La limite de temps est de vingt heures au moins ;
- Cas particulier lorsque la limite de temps est essentielle.
- Référence RGAA :
- 13.1 [A]
Rafraîchissement [A]
Thématique RGAA : Consultation
- L’utilisateur peut arrêter et relancer le rafraîchissement ;
- L’utilisateur est alerté de l’imminence d’un rafraichissement et peut augmenter le délai de 10 fois au moins.
- Référence RGAA :
- 13.1 [A]
<meta http-equiv="refresh" content="9000">
Exemple conforme : une liste d’événements présentés dans un tableau se met à jour automatiquement lorsqu’une session est terminée. L’utilisateur peut choisir de désactiver ces mises à jour automatiques en désactivant le bouton switch « Live event updates »
Nouvelles fenêtres [A]
Thématique RGAA : Consultation
- Pas de nouvelles fenêtres sans action de l’utilisateur
- Référence RGAA :
- 13.2 [A]
Documents en téléchargement [A]
Thématique RGAA : Consultation
- Document accessible ;
- Ou alternative accessible : HTML, .doc, .odt structurés.
Exemption : Les fichiers publiés avant le 23 septembre 2018, sauf s’ils sont nécessaires à l’accomplissement d’une démarche administrative relevant des tâches effectuées par l’organisme concerné.
Ressources : Référentiel PDF, Liste des critères Documents bureautiques en téléchargement (Le Grand-Duché de Luxembourg, docx, 66 ko, basé sur RGAA 3).
Outils : PAC 2024 (PDF Accessibility Checker), Vérificateur d’accessibilité de Word.
Exemple : sur le site de la ville de créteil, les magazines sont proposés au format PDF et une alternative est disponible au format HTML.
Contenu cryptique (art ASCII, émoticône, syntaxe cryptique) [A]
Thématique RGAA : Consultation
- Les contenus cryptiques ont une alternative textuelle ;
- Ou une description dans le contexte adjacent.
Ressources :
Exemple non conforme
Sur cette application bancaire, les montants négatifs sont présentés avec des traits d’union (-) et non des signes moins (−). En l’absence de configuration spécifique, les traits d’union sont ignorés de la plupart des lecteurs d’écran.
Les emojis sont lus comme du texte.
- Pour donner un sens pertinent à un emoji, utiliser par exemple :
<span role="img" aria-label="[signification]">📱</span> - Pour ignorer un emoji, utiliser par exemple :
<span aria-hidden="true">🚀</span>
Exemple non conforme
Exemple de restitution avec NVDA :
coche, Rendez-vous le mardi 16 septembre à 16 heures à la Gare pour échanger avec la SNCF sur vos déplacements, station de métro, bicyclette
flèche vers le bas, flèche vers le bas, Découvrez tous les détails ci-dessousClignotement et contenus en mouvement [A]
Thématique RGAA : Consultation
L’utilisateur doit pouvoir :
- Arrêter et relancer ;
- Masquer et réafficher ;
- Afficher le contenu sans le mouvement ;
- Le mouvement dure 5 secondes ou moins ;
- Contrôle individuel.
- Référence RGAA :
- 13.8 [A]
Exemple conforme : le carrousel de la page d’accueil de tgvinoui.sncf peut être arrêté et relancé grâce à un bouton.
Exemple conforme : dans l’application Slack, l’ajout de GIF Animés est accompagné d’un bouton nommé « collapse » et qui permet de masquer et afficher à volontée les GIf.
Effet de flash [A]
Thématique RGAA : Consultation
- Fréquence limite =< 3 flash/sec OU
surface cumulée =< 21824 pixels - Outil PEAT (Photosensitive Epilepsy Analysis Tool)
- Référence RGAA :
- 13.7 [A]
Exemple non conforme : le clip promotionnel des Jeux Olympiques de Londres 2012 présente de nombreux effets de Flash. À sa sortie en 2007 il a provoqué de nombreuses crises d’épilepsie.
Indépendance de l’orientation [AA]
Thématique RGAA : Consultation
- Le contenu doit être consultable quel que soit l’orientation du périphérique : portrait ou paysage ;
- Sauf si l’orientation est essentielle.
- Références RGAA :
- 13.9 [AA]
Exemple non conforme : sur le site Magicbike, l’utilisateur doit obligatoirement avoir son terminal mobile en mode paysage pour consulter le site.
Gestes complexes [AA]
Thématique RGAA : Consultation
Les fonctionnalités utilisables par des gestes multipoints (zoom sur une carte) ou basés sur un tracé (swipe) :
- peuvent être réalisées avec un geste à point unique et/ou sans trajectoire,
- sauf si le geste est essentiel(ex. le dessin d’une signature).
- Références RGAA :
- 13.10 [AA]
Carrousel défilant avec un geste complexe, le swipe, qui peut être consulté avec un geste simple, les boutons « suivant » et « précédent ».
Alternative aux gestes de zoom sur une carte :
boutons +/- en bas à droite
Annulation du pointeur [A]
Thématique RGAA : Consultation
- Aucun événement ne doit être déclenché sur l’action descendante
(down : mousedown sur desktop / touchstart sur mobile) - ou un mécanisme permet d’interrompre l’exécution de l’action avant la fin ;
- ou un mécanisme permet d’annuler l’action.
- Références RGAA :
- 13.11 [A]
Activation par le mouvement [A]
Thématique RGAA : Consultation
Les fonctions qui sont déclenchées en déplaçant l’appareil (en secouant ou en basculant) ou lorsque l’utilisateur effectue un mouvement capté par les dispositifs de l’appareil (eg. une caméra) peuvent être :
- actionnées par des composants classiques (un bouton) ;
- désactivées pour éviter un déclenchement accidentel ;
- sauf si le mouvement est essentiel pour la fonction.
- Références RGAA :
- 13.12 [A]
Contrastes [AA]
Thématique RGAA : Couleurs
Évaluation pour : les textes, les textes en images, les textes incrustés (vidéo, etc.)
- Ratio de 4,5 minimum :
- police < 24px sans graisse
- police < 18,5px gras
- Ratio de 3 minimum :
- police >= 24px sans graisse
- police >= 18,5px gras
- Mécanisme de remplacement
- Références RGAA :
- 3.2 [AA]
Contrastes des éléments graphiques [AA]
Thématique RGAA : Couleurs
Évaluation pour tous les éléments graphiques porteurs d’information (images, boutons, icônes, etc.) sauf cas particuliers
- Contraste minimum de 3:1
- Présence d’un mécanisme de remplacement.
Exemples de cas particuliers : composant inactif, composants natifs du navigateur, éléments avec une alternative, logo…
Ressources :
Comprendre le critère : quelques exemples ; Exemples de contrastes valides et invalides sur les différents états (hover et focus) de composants d’interface- Référence RGAA :
- 3.3 [AA]
Visibilité de la prise de focus [A]
Thématique RGAA : Présentation de l’information
- Pas de dégradation de l’outline natif (
outline:0) ; - Ou utilisation d’une indication de focus augmentée suffisamment contrastée (ratio mini de 3).
Les états :focus, :hover des composants doivent également être suffisamment contrastés.
- Références RGAA :
- 10.7 [A]
Visibilité de la prise de focus [A]
Thématique RGAA : Présentation de l’information
Attention aux composants interactifs masqués (case à cocher, bouton radio par exemple) : penser à répercuter la visibilité de la prise de focus sur l’élément visible.
- Références RGAA :
- 10.7 [A]
HTML
<input type="radio" id="default" class="sr-only" />
<label for="default">Défaut</label>
CSS
input:focus+label{outline:1px dotted black}
Visibilité des liens
en environnement de texte
[A]
Thématique RGAA : Présentation de l’information
- Contraste suffisant (> 3 par rapport au texte environnant) ;
- Indication supplémentaire à la couleur (forme) au survol souris et à la prise de focus.
- Références RGAA :
- 10.6 [A]
Exemple conforme : sur le site baouw-organic-nutrition.com, le ratio de contraste entre la couleur du lien #BE1D28 et la couleur du texte environnant #000000 est suffisant avec une valeur de 3,4.
Exemple non conforme : sur le site enedis.fr, le ratio de contraste entre la couleur du lien #1423DC et la couleur du texte environnant #000000 est suffisant avec une valeur de 2,3.
Quiz
Que pouvez-vous dire sur ces boutons ?
<ul>
<li><button>Mes adresses</button></li>
<li><button>Mes commandes</button></li>
<li><button>Mes informations de paiement</button></li>
</ul>- A - La bordure et la couleur de fond doivent avoir un ratio de
3:1 - B - La prise de focus n’est pas visible
- C - L’outline natif n’est pas dégradé
Réponse B : La prise de focus a été surchargée et l’outline natif dégradé. Il faut ici modifier la couleur de fond à la prise de focus pour s’assurer d’avoir un ratio minimum de 3:1 entre la couleur de fond des boutons avec et sans le focus.
Quiz
Que doit-on modifier sur le lien de cette portion de texte ?
<p>On peut trouver les renseignements sur les formations sur le site <a href="https://formations.access42.net/">formations.access42.net</a> et on peut même s’inscrire aux certifications !</p>- A - Rien, il est très bien comme ça
- B - Modifier la couleur pour qu’il soit perceptible
- C - Ajouter une icône à côté du lien
- D - Ajouter une modification au survol ou au focus
On peut trouver les renseignements sur les formations sur le site formations.access42.net et on peut même s’inscrire aux certifications !
Réponse D : Le contraste entre le lien et le texte qui l’entoure est suffisant (ratio > 3), mais le lien ne dispose d’aucune indication au survol. Il y a bien un encadré au focus.
Couleurs par défaut [AA]
Thématique RGAA : Présentation
- Si une couleur de police est définie : couleur de fond au moins héritée d’un parent ;
- Si une couleur de fond est définie : couleur de police au moins héritée d’un parent.
body, body a{color:#000;}
body{background-color:#fff;}- Cas des images de fond utilisées pour créer une couleur de fond : s’assurer de la présence d’une propriété
background-colorsur le conteneur.
.elt{
background-image:url(...);
color:#fff;
background-color:#000;}- Références RGAA :
- 10.5 [AA]
Exemple non conforme
Sur la page d’accueil de marseille.fr, le fond du bloc « Vous cherchez un équipement dans Marseille ? » est créé avec une image.
Si elle n’est pas affichée, le texte blanc n’est plus suffisamment contrasté avec le fond.
Information par la couleur [A]
Thématique RGAA : Couleurs
Cas les plus courants :
- indication de page active ;
- indications d’onglets affichés ;
- carrousel : indication de contenu actif.
- Référence RGAA :
- 3.1 [A]
Exemple non conforme : le lien actif dans le menu de navigation est mis en évidence par la couleur uniquement. L’information n’est pas disponible pour les personnes aveugles ainsi que pour les personnes déficientes visuelles, la couleur de fond indiquant l’état sélectionné n’étant pas assez contrastée avec la couleur par défaut.
Exemple conforme : le lien actif dans un menu de navigation est mis en évidence par la couleur et par la forme, ainsi tous les utilisateurs voyant accèdent à l’information. Un attribut title vient donner une alternative textuelle (« [intitulé du lien] - rubrique courante ») qui sera restituée par un lecteur d’écran aux utilisateurs aveugles.
<a class="selected" href="…" title="Mon quotidien, ma Métropole (rubrique courante)">
Mon quotidien, ma Métropole
</a>
Exemple non conforme : Une question de sécurité qui demande d’identifier un terme en couleur parmi des termes en nuances de gris.
Correction possible : ne pas faire ça.
Exemple non conforme : sur des fiches hôtels, les services payants sont identifiés par une puce de couleur rouge qui est définie avant la liste. Cette information n’est disponible que pour les utilisateurs voyant, aucun élément dans le code ne permet à un utilisateur aveugle d’accéder à cette information.
Correction possible : ajouter un texte positionné hors écran juste après chaque item payant : <li>Animaux autorisés <span class="sr-only">service payant</span></li>
Exemple conforme : Le texte de la légende du graphique contient l’information : « Utilisé : 41.2 Go Disponible : 63.9 Go (60 %) ».
La graphique donne information par la couleur, mais il possède une alternative.
Testez vos connaissances
Répondez à 5 questions sur quiz.access42.net
Utilisation exclusive de CSS [A]
Thématique RGAA : Présentation de l’information
- Utilisation exclusive de CSS :
<link rel="stylesheet"/>;<style></style>;- ou attribut
styleen ligne.
- Pas d’attribut de mise en forme
<table border="0">. - Pas de balise de mise en forme
<font>.
Ressources : Liste complète des attributs et balises interdites, Accessibilité d’Angular Material : l’attribut color et le RGAA
- Référence RGAA :
- 10.1 [A]
Exemple non conforme : sur le site univ-reims.fr on trouve des éléments <font> et des attributs size.
Contenus compréhensibles sans CSS [A]
Thématique RGAA : Présentation
Le contenu reste compréhensible lorsque les feuilles de styles sont désactivées.
- Ordre des éléments logique ;
- Ordre des éléments cohérent, l’enchaînement de la lecture est cohérent.
- Référence RGAA :
- 10.3 [A]
Exemple non conforme : sur le site lequipe.fr le contenu des vignettes d’actualité n’est pas implémenté dans un ordre logique : les tags (par exemple "Golf" et "US Open") sont situés avant le titre auquel ils se rapportent. L’information à laquelle accède un utilisateur aveugle est erronée.
Exemple non conforme
Sur le site Somme Numérique, l’ordre de lecture des contenus n’est pas cohérent : les listes ne sont pas associées à leur titre.
Contenus cachés [A]
Thématique RGAA : Présentation
Pour les composants qui ont les propriétés CSS :
display:nonevisibility:hiddenfont-size:0
Ou les composants avec la propriété ARIA aria-hidden="true" ou hidden (dans ces cas, vérifier la cohérence entre la visibilité des contenus et la valeur de la propriété).
S’assurer que le contenu masqué n’a pas vocation à être restitué par les technologies d’assistance.
- Références RGAA :
- 10.8 [A]
<nav id="link-navigation-menu" role="navigation" aria-hidden="true">
<button type="button">Menu</button>
[...]
</nav>
Absence de gestion du zoom texte sur rouen.fr
Gestion du zoom texte sur le portfolio de LukeW
Pour aller plus loin : article de blog de Marie Guillaumet
Linéarisation des contenus [AA]
Thématique RGAA : Présentation de l’information
Les contenus doivent rester présents, lisibles et utilisables sans utilisation des deux ascenseurs :
- Pour les contenus dont le sens de consultation est vertical : largeur de fenêtre réduite à 320 px ;
- Pour les contenus dont le sens de consultation est horizontal : hauteur de fenêtre réduite à 256 px.
Pour tester dans Firefox : Ctrl + Alt + M ou Commande ⌘ + Option ⌥ + M.
- Référence RGAA :
- 10.11 [AA]
Quiz
« L’application de simulation d’un piano nécessite un affichage spécifique car il n’est pas possible d’utiliser la totalité du clavier avec une faible résolution. »
Quelles solutions peut-on mettre en place ?
- A - Il s’agit d’un cas particulier
- B - Il faut redimensionner les touches pour que l’affichage soit correct
- C - On peut utiliser la contrainte de 256px de hauteur du critère et laisser la largeur nécessaire
Réponse A : Il s’agit d’un cas particulier prévu dans le critère concernant les contenus dont l’agencement requiert deux dimensions pour être compris ou utilisés.
Adaptation des textes [AA]
Thématique RGAA : Présentation de l’information
Les textes doivent rester lisibles dans les conditions suivantes :
- interlignage augmenté de 1,5 fois la taille de police ;
- marge suivante un paragraphe augmentée de 2 fois la taille de police ;
- espacement des lettres augmenté jusqu’à 0,12 fois la taille de la police ;
- espacement des mots augmenté jusqu’à 0,16 fois la taille de la police ;
Cas particuliers : sous-titres incrustés, images-texte, texte dans une balise canvas.
- Référence RGAA :
- 10.12 [AA]
Contrôle des contenus additionnels au survol ou à la prise de focus [AA]
Thématique RGAA : Présentation de l’information
Contenus qui apparaissent à la prise de focus ou au survol d’un élément :
- peut être masqué sans déplacer le focus ou le pointeur (raccourci clavier par exemple la touche
[ESC]) ; - peut être être survolé sans disparaître ;
- reste visible tant que le composant déclencheur ou le contenu lui-même est actif.
Les contenus gérés par le navigateur (title) ou qui utilisent un modèle de conception ARIA (tooltip, modale) ne sont pas concernés.
- Référence RGAA :
- 10.13 [AA]
Exemple non conforme : sur le site placo.fr, lorsque le menu latéral de droite est survolé, un contenu additionnel apparaît . Ce contenu additionnel ne peut pas être masqué à l’aide de la touche ESC.
Exemple conforme : sur le site Paris - Jeux 2024, le sous-menu déroulant peut être masqué avec la touche ESC.
Exemple non conforme
La tooltip qui apparaît au survol du bouton "Info" ne peut être elle-même survolée et disparaît automatiquement après quelques secondes :
Exemple non conforme
Sur le site bpce.fr, lorsque les vignettes des dernières offres d’emploi sont survolées, un fond rouge vient masquer le contenu de la vignette qui n’est plus lisible.
Contrôle des contenus additionnels au clavier [AA]
Thématique RGAA : Présentation de l’information
Les contenus qui apparaissent au survol d’un élément, au moyen de CSS, doivent apparaitre également au clavier :
- Le contenu apparaît à la prise de focus sur un composant ;
- ou le contenu apparaît suite à l’activation d’un composant ou d’une fonctionnalité (un bouton).
Par accès au clavier, on entend le clavier et tout autre périphérique de pointage équivalent.
- Référence RGAA :
- 10.14 [AA]
Exemple non conforme : sur le site Provence Alpes Côte d’Azur Tourisme, du contenu apparaît au survol des vignettes. Ce contenu ne peut pas être rendu visible à la prise de focus.
Exemple confome sur ebay.fr, le survol du lien "Mon Ebay" déclenche l’affichage d’un sous-menu. Ce sous-menu n’apparaît pas à la prise de focus mais à l’activation d’un bouton qui apparaît en navigation clavier.
Média temporel [A]
Thématique RGAA : Multimédia
Le média temporel est clairement identifiable grâce au contexte adjacent (titre précédent ou texte adjacent).
- Références RGAA :
- 4.7 [A]
Alternatives aux médias [A]
Thématique RGAA : Multimédia
- Transcription textuelle (texte structuré qui reprend l’ensemble du contenu oral et visuel ; pour les médias vidéo, son et synchronisés) ou une alternative audio seule (médias seulement vidéo)
- Sous-titres synchronisés (médias synchronisés)
- Audiodescription (média vidéo avec ou sans son, obligatoire uniquement si la bande son originale dispose des espaces blancs suffisant pour inclure la piste d’audiodescription).
Exemple conforme
Dans le site du Petit Louvre, les vidéos sont associées à un lien de téléchargement d’un PDF qui contient la transcription textuelle de la vidéo et les vidéos ont des sous-titres synchronisés.
Autre exemple : sur le site Access42, les vidéos sont suivies d’accordéons qui contiennent les transcriptions textuelles des vidéos.
Exemple non conforme : le site Prezi met à disposition des animations dans des éléments <canvas> sans alternative.
Étiquette de champ [A] - [AA]
Thématique RGAA : Formulaires
Visuellement, la nature du champ est identifiée par :
- un intitulé visible et pertinent ;
- ou un bouton visible et pertinent ;
- ou, a minima, un attribut
titlepertinent.
Note 1 : placeholder ne remplace pas une étiquette visible.
Note 2 : Les étiquettes de champs qui attendent les mêmes valeurs sur des formulaires d’un même ensemble de page doivent garder une cohérence.
Sur le site de la ville de Bordeaux, le champ de recherche a un attribut title qui donne un nom accessible et visible et qui reprend la valeur du placeholder.
Nom visible et nom accessible [A] - [AA]
Thématique RGAA : Formulaires
Le nom visible doit être contenu dans le nom accessible.
Quiz
Que pouvez-vous dire de ce champ de formulaire ?
<fieldset>
<legend>Quel est l’animal de la photo ?</legend>
<label for="oiseau">Ecureuil</label>
<input type="radio" name="test1" id="ecureuil"/>
<label for="ecureuil">Oiseau</label>
<input type="radio" name="test1" id="oiseau"/>
<label for="rat">Rat</label>
<input type="radio" name="test1" id="rat"/>
</fieldset>
Réponse : les étiquettes visibles ne sont pas pertinentes. En effet, les boutons radios ont des étiquettes accolées (les étiquettes visibles), qui ne correspondent pas à l’étiquette à laquelle ils sont réellement reliés.
Étiquettes de champ [A]
Thématique RGAA : Formulaires
Attention :
Les labels et les champs doivent être accolés
- Références RGAA :
- 11.4 [A]
Exemple non conforme
Le site education.gouv.fr propose un formulaire de contact avec des champs qui sont trop éloignés des étiquettes.
On notera également le contraste des champs insuffisant et l’absence de la propriété role="presentation" sur le tableau.
Recherche d’itinéraire sur sncf.com
Intitulés de bouton [A]
Thématique RGAA : Formulaires
- L’intitulé (nom accessible) est pertinent ;
- Si le bouton possède un nom visible alors il est aussi contenu dans le nom accessible.
- Références RGAA :
- 11.9 [A]
Aides à la saisie : champs obligatoires [A]
Thématique RGAA : Formulaires
Indiquer les champs obligatoires :
- Au moyen d’un texte dans le nom accessible ;
- Ou au moyen d’un texte avant le champ, relié au champ via un attribut
aria-describedby="id_dun_texte"; - Ou au moyen de l’attribut
required, d’une propriétéaria-requiredouaria-label(+ indication visuelle) - Dans tous les cas, il faut une indication visible.
- Références RGAA :
- 11.10 [A]
Modification, mises à jour ou récupération des données [AA]
Thématique RGAA : Formulaires
Si le formulaire :
- modifie ou supprime des données ;
- ou transmet des réponses à un test ou à un examen ;
- ou a des conséquences financières ou juridiques ;
L’utilisateur doit pouvoir :
- vérifier, modifier ou annuler les saisies avant envoi du formulaire ;
- ou il existe un mécanisme de confirmation explicite via une case à cocher ou une étape supplémentaire.
- Références RGAA :
- 11.12 [AA]
Ordre de tabulation, piège au clavier [A]
- Ordre de tabulation cohérent : modales, système d’onglets, menu déroulant, ajout/affichage de contenu additionnel etc.
- Pas de piège au clavier (focus figé dans un composant) (Exemple de piège au clavier)
Ressources : Bookmarklet pour visualiser le déplacement du focus, Reprises de focus et Accessibilité sur le blog Access42
Exemple non conforme
Sur les fiches produit de Cdiscount, il n’est pas possible de quitter la recherche : la touche Échap repositionne le focus sur le champ de recherche.
Reprise de focus [A]
Le repositionnement de focus permet aux utilisateurs de continuer leur navigation de manière pertinente, notamment suite à une action. Par exemple le chargement de données supplémentaires.
La méthode JavaScript .focus() permet de déplacer le focus de l’utilisateur sur un élément.
Note importante : Sur les Single Page Applications, la navigation se fait par des changements de contexte et pas des chargements de pages. Il faut donc prévoir de repositionner le focus en haut de la nouvelle page chargée.
Pour aller plus loin : Accessibilité : comment gérer le rechargement de page dans les « Single Page Applications » ?
- Références RGAA :
- 12.8 [A]
Exemple non conforme : sur le site de Darty, lorsque l’on active le composant "Voir tous les univers" dans la zone de filtre, le focus reste sur le composant.
Reprise de focus - exemple non conforme : sur le site de leblob.fr, le bouton « Charger plus de contenu » permet d’afficher dynamiquement de nouveaux items. Lorsque ce bouton est activé au clavier, de nouveaux contenus sont chargés dynamiquement au-dessus du bouton, mais le focus de l’utilisateur est laissé sur le bouton qui ne sait pas où les nouveaux contenus ont été ajoutés.
Reprise de focus - exemple conforme : sur le site de cdgexpress.com, lorsqu’on active le bouton « Voir plus », le focus est repositionné sur le premier élément de la liste d’éléments ajoutés.
Piège au clavier - exemple non conforme : sur le site de dmsearch.eesc.europa.eu, il y a un piège au clavier dans la navigation de gauche. Une fois que le focus de tabulation atteint le lien « Opinions » il est impossible d’atteindre l’élément suivant ou précédent à la tabulation.
Utilisation de l’attribut tabindex
Ne pas utiliser de valeurs > 0
tabindex > 0.
Accès au contenu additionnel affiché [A]
Thématique RGAA : Navigation
Pour une zone de contenu additionnel qui contient un élément interactif (lien, bouton, champ de formulaire...) :
- L’élément interactif doit pouvoir être atteint au clavier
- La zone doit rester visible tant que le focus se trouve sur l’élément ou la zone contrôlée.
Par exemple, une infobulle qui contient un lien.
- Référence RGAA :
- 12.11 [A]
Conforme : Dans Gmail, les raccourcis a une touche peuvent être modifiés pour obtenir des raccourcis claviers avec des touches de modification.
Non conforme : Twitter dispose de raccourcis claviers a une touche de caractères imprimables qui ne peuvent n’y être désactivés ni configurés.
Rôle pertinent [A]
Thématique RGAA : Scripts
Tout composant interactif doit avoir un rôle et un rôle pertinent
Par exemple :
- Un composant qui déclenche l’ouverture d’une page ou d’un onglet doit être un lien.
- Un composant qui déclenche un événement dans la page, qui est le support d’une fonction JavaScript, doit être un bouton ou implémenter le motif ARIA button.
- Références RGAA :
- 7.1 [A]
Exemple conforme : sur l’affichage des traductions de Deepl, les composants « Écouter », « J’aime », « Je n’aime pas », « Améliorer la traduction », etc. déclenchent des événements JavaScript et sont implémentés dans des éléments <button>.
Alternative accessible [A]
Thématique RGAA : Scripts
Dans le cas où le composant ne peut pas être rendu accessible, il est possible de mettre en place une alternative accessible qui offre les mêmes fonctions.
Cas typiques :
- Les datepickers : le datepicker n’est pas accessible mais le champ de date associé est inscriptible et l’utilisateur peut choisir une date en saisissant avec son clavier. On n’évaluera pas le datepicker, mais simplement l’alternative. Ceci ne sera valable que si le datepicker lui-même n’apporte pas d’informations (par exemple des dates d’indisponibilité).
- Références RGAA :
- 7.2 [A]
Exemple conforme : sur le site sncf-connect.com, le datepicker n’est pas accessible mais il est possible de choisir une date en la saisissant au clavier.
Exemple : sur leboncoin.fr, le calendrier permettant de choisir les dates, présente des informations. Il sera ici indispensable de rendre le datepicker accessible.
Changement de contexte [A]
Thématique RGAA : Scripts
- un texte explicatif précédant le changement de contexte
- un bouton ou un lien explicite
Exemples :
- Références RGAA :
- 7.4 [A]
Message de statut [AA]
Informer les technologies d’assistance des messages d’alerte de confirmation ou de statut, sans déplacer le focus de l’utilisateur.
role="alert"role="status"role="log"- Utiliser le modèle de conception
progressbarpour les messages d’attente
Méthode alternative : utiliser la propriété aria-live.
Ressource : Utiliser les live regions ARIA
- Référence RGAA :
- 7.5 [AA]
Exemple conforme : sur le site salomon, sur une page de catégorie du catalogue, la sélection de filtres déclenche la mise à jour du nombre de résultats disponibles dans le bouton « Voir ». Ce bouton possède les propriétés aria-live="polite". Il aurait été intéressant que le nom du bouton contienne une information plus pertinente, par exemple sous la forme "Voir 80 résultats".
1. Privilégier la méthode native
- Exceptions : limitations de style ou de support ou contraintes techniques
- Tester la restitution
- Raccourcis clavier des TA non garantis
<div role="dialog">
<dialog>
5. Tout composant interactif doit avoir un nom accessible
- Algorithme de calcul du nom accessible
- Nom accessible ≠ description accessible
- Visionneuse d’arborescence d’accessibilité
ARIA
Comment un lecteur d’écran sait-il de quoi il parle ?
Motif de conception
Motif de conception (design pattern) : décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).
dialog.
Testez vos connaissances
Répondez à 5 questions sur quiz.access42.net
Vous pourrez télécharger le récapitulatif complet du quiz à la fin.