AccessiWeb HTML5/ARIA Séminaire AccessiWeb Juin 2013.

Slides:



Advertisements
Présentations similaires
Votre logo à insérer ici
Advertisements

Nom de lintervenant Titre de lintervention. Tapez le titre de votre slide (si besoin) Tapez votre titre principal Tapez votre sous titre ou votre texte.
Jean-Pierre Villain - Qelios W3Café Accessibilité - Paris – Avril 2011
AccessiWeb 2.2 Séminaire AccessiWeb Juin 2011.
Atelier Parisweb 2007 Questions / Réponses Accessibilité
HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.
Sébastien Billard - Consultant SEO Identifier et corriger ce qui bloque un référencement - Structure - Contenu - Popularité
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5/ARIA 13 décembre ème séminaire AccessiWeb.
DTD Sylvain Salvati
TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Les étapes de conception d’un site web
Aurélien Levy Expert accessibilité chez Tektonika, co-auteur du RGAATektonika Contributeur openweb.eu.org Collectif de promotion des standards du Web Membre.
version Beta Marie Calberg Ninni Louhelainen SLFN7
Présentation Organet : service de gestion du déroulement des épreuves écrites dans les établissements centres d’examen Organet est un produit pour l’affectation.
Présentation Mars 2007 Organet II: service de gestion du déroulement des épreuves dans les établissements centres d’examen Organet II est un produit pour.
Créer un document LES FONCTIONS ENREGISTRER LES FORMATS Retour au menu principal.
Conception et mise en page
Présentation des tables des matières j puis appuyez sur F5 ou cliquez sur Diaporama > Du début. Pour commencer le cours, dans la barre des messages, cliquez.
12 novembre 2012 Grégory Petit
ONRN V2 Guide de contribution. Organisation des documents Listes de valeurs Ce répertoire contient les listes de valeurs qui sont utilisées pour qualifier.
Introduction aux Web Services Partie 1. Technologies HTML-XML
Introduction aux Web Services Partie 1. Technologies HTML-XML
Xavier Tannier Accessibilité
Etude des Technologies du Web services
Applications Internet – cours 3 La page web
Le programme didentification visuelle et Internet.
Titre de votre session Prénom NOM Fonction ORGANISME Votre logo
Administration de SharePoint
Chap 4 Les bases de données et le modèle relationnel
Le Travail Collaboratif ...
28 novembre 2012 Grégory Petit
Module 8 : Maintenance des logiciels à l'aide des services SUS
Jonathan Montois Cyrille Kriegel
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
Introduction dans la Programmation Web
Ou la véritable histoire d’un projet web mobile (très) grand public vu par ses utilisateurs L'accessibilité des applications web mobiles Contée par Sébastien.
Le langage du Web CSS et HTML
Cliquez pour modifier le style du sous-titre Cliquez pour modifier le style du titre.
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
L’ ACCESSIBILITE « C’est mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure.
Les balises HTML et les objets JavaScript correspondants Objet document L'objet document est important dans la mesure ou il contient tous les objets du.
 Objet window, la fenêtre du navigateur
Technologies web et web sémantique TP3 - XML. XML eXtensible Markup Language (langage extensible de balisage) – Caractéristiques: méta-langage = un langage.
Cliquez pour modifier le style du titre
S'initier au HTML et aux feuilles de style CSS Cours 5.
SMIL Synchronized Multimedia Integration Language
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
 Formulaires HTML : traiter les entrées utilisateur
Hiver 2004SEG2501 Chapître 41 Chapître 4 SDL – structure d’un système et son comportement.
Publication Flash sur Internet et Transfert avec Dreamweaver COM3562 Communication Multimédia MARS 2011.
Contribution CMS.Eolas
HTML Création et mise en page de formulaire
Conception des pages Web avec
Accessibilité web Gérer l’accessibilité lors de la création d’un site ORT Lyon - 10/02/2014.
Suivi simplifié d’activité
HTML Rappels des fondamentaux
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Dreamweaver Séance 1.
SI28 Dreamweaver- Séance 1
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.
Dreamweaver le retour Avec Les Formulaires Les Calques
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Transcription de la présentation:

AccessiWeb HTML5/ARIA Séminaire AccessiWeb Juin 2013

AW HTML5/ARIA AW 2.2 n'est pas adapté à HTML 5 Juin 2012 Séminaire AccessiWeb Juin 2013 AW 2.2 n'est pas adapté à HTML 5 Juin 2012 Préparation Novembre 2012 Proposition Adaptation Décembre 2012 Référentiel Mars 2013 Publication Juin 2013 HTML5 / ARIA Les différences de fond et les évolutions sont trop nombreuses pour porter AW 2.2 vers HTML 5 HTML5 supprime ou modifie des éléments requis par AW 2.2 Par exemple summary pour les tableaux, longdesc pour les images Outline pour le titrage… La notion d’alternative et de compatibilité pour Javascript telle que définie par AW 2.2 n’est pas adaptée à HTML 5 AW 2. ne prend pas en charge l’API ARIA

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Généralités

AW HTML5/ARIA Séminaire AccessiWeb Juin 2013 Modification de la nomenclature (niveaux : A, AA, AAA !) Très peut de nouveaux critères (on reste à 133 critères) Les nouveaux éléments sont implémentés au niveau des tests Pris en charge d'ARIA chaque fois que nécessaire : Présence/pertinence des rôles ARIA nécessaires Test de la restitution AT chaque fois que nécessaire Création de "notes techniques" chaque fois que nécessaire liées aux critères sur le même modèle que le glossaire Création d'une "base de référence" pour la compatibilité avec l'accessibilité Référentiel AW HTML5 Glossaire Notes Techniques Notes Techniques Glossaire Base de référence

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Quelques exemples…

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Images

AW HTML5/ARIA Images Prise en charge de SVG et CANVAS Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Images Prise en charge de SVG et CANVAS Prise en charge ARIA propriété aria-label pour labelliser une image SVG Role "présentation" pour une image de décoration (interdiction) Création d'un critère spécifique sur les images légendées Figure Figcaption Role "group" Prise en charge de title sur l'élément IMG Obligatoirement identique au alt Test de restitution des alternatives implémentée dans SVG via aria-label ou <desc>

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Images Critère  1.1 [A] Chaque image a-t-elle une alternative textuelle ? • Test 1.1.4 : Chaque image vectorielle (balise <svg>)  vérifie-telle une de ces conditions ?     o La balise svg possède un attribut aria-label     o Un élément <desc> est présent Note technique A l'exception de svg, l'utilisation des attributs aria-label et aria-labelledby permettant de créer une alternative ou de lier l'image à un passage de texte faisant office d'alternative ne peuvent pas être utilisés par manque de support des technologies d'assistance. La spécification SVG préconise d'utiliser un élément <title> pour la description "courte" et un élément <desc> pour la description longue. Actuellement seul l'élément <desc> est correctement restitué par les technologies d'assistance. L'usage de l'élément <title> est donc considéré comme incompatible avec l'accessibilité.

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 1.3 [A] Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ? Test 1.3.1 : Chaque image porteuse d'information (balise img) ayant un attribut alt vérifie-t-elle ces conditions (hors cas particuliers) :     o Le contenu de l'attribut alt est pertinent     o S'il est présent le contenu de l'attribut title est identique au contenu de l'attribut alt Test 1.3.6: Chaque image vectorielle porteuse d'information (balise svg) et possédant une alternative vérifie-t-elle une de  ces conditions  (hors cas particuliers)?     o La balise svg possède un attribut aria-label dont le contenu est pertinent et identique à l'attribut title s'il est présent     o La balise svg possède un élément <desc> dont le contenu est pertinent et identique à l'attribut title de la balise svg s'il est présent     o Un lien adjacent permet d'accéder à une alternative dont le contenu est pertinent et identique à l'attribut title de la balise svg s'il est présent • Test 1.3.7: Pour chaque image vectorielle porteuse d'information (balise svg) et possédant une alternative, cette alternative est-elle correctement restituée par les technologies d'assistance ?

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 1.6 [A] Chaque image porteuse d'information a-t-elle, si nécessaire, une description détaillée ? Test 1.6.5: Chaque image vectorielle (balise <svg>)  qui nécessite une description détaillée vérifie-t-elle une de ces conditions ?     o Il existe un attribut aria-label contenant une référence à une description détaillée adjacente à l'image vectorielle     o Il existe un élément <desc> contenant une référence à une description détaillée adjacente à l'image vectorielle     o Il existe un élément <desc> contenant la description détaillée     o Il existe un lien adjacent (via une url ou une ancre) permettant d'accéder au contenu de la description détaillée Test 1.6.6: Pour chaque image vectorielle (balise <svg>)  qui implémente une référence à une description détaillée adjacente via un attribut aria-label ou un élément <desc>, cette référence  est-elle correctement restituée par les technologies d'assistance ?

Prise en charge de <figure> et <figcaption> Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Prise en charge de <figure> et <figcaption> Spécification HTML5 Fallback note WCAG <figure> <img src="pic.jpg"> <figcaption> Légende de l'image </figcaption> </figure> <figure role="group" > <img src="pic.jpg" alt="photo 1" > <figcaption> Légende de l'image (photo 1) </figcaption> </figure> L'atrribut ARIA role="group" permet de créer une relation explicite entre l'image et sa légende La présence d'un "label" (nom de l'image) dans l'alternative permet de créer une relation implicite entre l'image et sa légende

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 1.10 [A] Chaque légende d'image est-elle, si nécessaire, correctement reliée à l'image correspondante ? Test 1.10.1 : Chaque image légendée (balise img ou input de type image associée à une légende adjacente) vérifie-telle, si nécessaire, ces conditions ?     o L'image (balise img) et sa légende sont contenues dans un élément figure     o L'élément figure possède un attribut role="group"     o Le contenu de l'attribut alt de l'image contient une référence à la légende adjacente     o L'attribut title de l'image s'il est  présent, est strictement identique au contenu de l'attribut alt Note technique (extrait) Bien que recommandé par HTML5, la note WCAG stipule que le title ne peut pas être utilisé pour "labelliser" l'image. Les attributs aria-label, aria-labelledby et aria-describedby ne peuvent pas être utilisés actuellement par manque de support par les technologies d'assistance.

AW HTML5/ARIA Cadres Couleurs Pas de changement Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Cadres Couleurs Pas de changement

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Multimédia

AW HTML5/ARIA Multimédia Peu de changements Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Multimédia Peu de changements Prise en charge de VIDEO et AUDIO par le glossaire Prise en charge de <track> chaque fois que nécessaire Critère 4.3 [A] Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ? Test 4.3.2: Pour chaque média temporel synchronisé pré-enregistré  possédant des sous-titres synchronisés diffusés via un élément <track>, l'élément <track>  possède-t-il un attribut kind="captions"

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Tableaux

AW HTML5/ARIA Tableaux Abandon du support de SUMMARY Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Tableaux Abandon du support de SUMMARY Nouvelle définition de glossaire "tableaux de données complexe" Restriction de l'utilisation des techniques de summary HTML5 aux tableaux de données complexe Support du rôle "présentation" pour déclarer un tableau de mise en forme

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 5.1 [A] Chaque tableau de données complexe a-t-il un résumé ? • Test 5.1.1 : Pour chaque tableau de données complexe (balise table) un résumé est-il disponible dans la balise <caption> ? Note technique La spécification propose plusieurs méthodes pour lier un résumé à un tableau (tableau lié à un passage de texte avec aria-describedby, tableau groupé via figure avec le résumé en texte adjacent, tableau groupé avec figure avec le résumé dans un élément figcaption, résumé dans un élément details dans l'élément caption). Ces méthodes n'ont pas un support suffisant pour être utilisées actuellement.

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 5.3 [A] Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ? • Test 5.3.1 : Chaque tableau de mise en forme vérifie-t-il ces conditions ?     o le contenu linéarisé reste  compréhensible     o la balise <table> possède un attribut role="presentation" La spécification recommande de mapper un tableau de mise en forme avec le rôle "présentation". "If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document."

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Liens

AW HTML5/ARIA Liens Aucun changement Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Liens Aucun changement Html 5 autorise l'utilisation d'éléments de type block dans un lien (A HREF). Ce type de lien est supporté par toutes les AT mais peut causer des problèmes de restitution. Cette utilisation est à éviter Problème potentiels NVDA /JAWS : répétition de liens pour chaque élément de contenus sur certaines fonctionnalités VOICE OVER : texte répétés plusieurs fois de suite JAWS : disparition des titres via la liste des titres de la page

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Scripts

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Scripts Abandon de l'obligation à des alternatives Javascript Obligation de respecter les motifs de conception ARIA Obligation de respecter les interactions clavier définit par les motifs de conception ARIA Exigence réduite aux touches principales Obligation de respecter les recommandations de la spécification et de la note technique "Using ARIA in HTML" sur : Les surcharges de role (par exemple <NAV role="NAVIGATION"> Les restrictions de modification du role natif HTML d'un élément (tableau de référence de la note sur ARIA)

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 7.1 [A] Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ? • Test 7.1.3 : Chaque script qui génère ou contrôle un composant d'interface via des rôles, des états ou des propriétés définis par l'API ARIA vérifie-t-il, si possible, une de ces conditions ?    o Le composant d'interface est conforme au motif de conception défini par l'API ARIA    o Un composant d'interface présent sur la page, permettant d'accéder aux mêmes fonctionnalités, est conforme au motif de conception défini par l'API ARIA    o Une alternative accessible permet d'accéder aux mêmes fonctionnalités. Test 7.1.6: Pour chaque script qui génère ou contrôle un composant d'interface via des rôles, des états ou des propriétés définis par l'API ARIA respecte-t-il une de ces conditions :    o Le composant d'interface est correctement restitué par les technologies d'assistance    o Une alternative accessible permet d'accéder aux mêmes fonctionnalités.

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 7.3 [A] Chaque script est-il contrôlable par le clavier et la souris (hors cas particuliers) ? Test 7.3.4 : Chaque composant d'interface implémenté via un rôle défini par l'API ARIA et correspondant à un motif de conception respecte-t-il, si possible, ces conditions ?    o Les interactions au clavier sont conformes au comportement défini par le motif de conception pour les touches Escape, Barre d'espace, Tabulation et Flèches de direction au moins    o Un composant d'interface présent sur la page, permettant de réaliser la même action, possède des interactions au clavier conformes au comportement défini par le motif de conception, pour les touches Escape, Barre d'espace, Tabulation et Flèches de direction au moins    o Une alternative  permettant d'accéder aux mêmes fonctionnalités est contrôlable par le clavier et à la souris.

Eléments Obligatoires Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Eléments Obligatoires Pas de changement

Structuration de l'information Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Structuration de l'information

Structuration de l'information Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Structuration de l'information Prise en charge des nouveaux éléments HEADER, NAV, MAIN, FOOTER rendus obligatoires pour structurer le document Test de cohérence de l'OUTLINE (utilisation des éléments sectionnants) Interdiction de l'utilisation exclusive de H1, obligation d'utiliser des titres Hx cohérent

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 9.1 [A] Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres ? • Test 9.1.1 : Dans chaque page Web, y a-t-il un titre de niveau 1 (balise h1 ou balise possédant un role ARIA "heading" associé à une propriété aria-level="1") ? Test 9.1.2 : Dans chaque page Web, la hiérarchie entre les titres (balises h ou balise possédant un role ARIA "heading") est-elle pertinente ? • Test 9.1.3 : Dans chaque page Web, chaque titre (balises h ou balise possédant un role ARIA "heading") nécessaire à la structure de l'information est-il présent ? • Test 9.1.4 : Dans chaque page Web, chaque titre (balises h ou balise possédant un role ARIA "heading") est-il pertinent ?

Test de cohérence de l'outline Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Test de cohérence de l'outline <body> <nav> <article> <aside> <H2> <section> <H2> <H3>

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 9.2 [A] Dans chaque page Web, la structure du document est-elle cohérente ? • Test 9.2.1 : Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?    o La zone d'en-tête principale est structurée via une balise <header>    o Les zones de navigation principales et secondaires sont structurées via une balise <nav>    o La balise <nav> est réservée à la structuration des zones de navigations principales et secondaires    o La zone de contenu principal est structurée via une balise <main>    o La structure du document utilise une balise <main> unique    o La zone de pied-de-page est structurée via une balise <footer> • Test 9.2.2: dans chaque page web l'arborescence du document est-elle cohérente ?

Présentation de l'information Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Présentation de l'information

Présentation de l'information Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Présentation de l'information Prise en charge de aria-hidden et de hidden Test de cohérence de l'utilisation de aria-hidden pour interdire la vocalisation Test de cohérence de l'utilisation de hidden en relation avec le statut visible ou caché des propriétés CSS display:none et visibility:visible Critère 10.13 [A] Pour chaque page Web, les textes cachés sont-ils correctement restitués par les technologies d'assistance ? • Test 10.13.2 : Dans chaque page Web, chaque texte caché qui utilise une propriété ARIA aria-hidden vérifie-t-il une de ces conditions ?    o Le texte n'a pas vocation à être restitué par les technologies d'assistance    o La valeur de la propriété ARIA aria-hidden est cohérente avec l'état visible ou caché du texte

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Formulaire

AW HTML5/ARIA Formulaire Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Formulaire Prise en charge des techniques de labellisation ARIA pour les champs et les boutons : aria-label aria-labelledby Prise en charge des messages automatiques d'aide à la saisie ou de gestion des erreurs utilisés par les nouveaux types de champs de formulaire HTML5 Prise en charge de aria-required et de required pour les saisies obligatoires Prise en charge de aria-describedby pour lier un message d'aide à la saisie ou d'erreur

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette ? • Test 11.1.1 : Chaque champ de formulaire, vérifie-t-il une de ces conditions ?    o Le champ de formulaire possède un attribut title    o Une étiquette (balise label) est associée au champ de formulaire    o Le champ de formulaire possède une propriété aria-label    o Le champ de formulaire possède un attribut aria-labelledby référençant un passage de texte identifié Critère 11.10 [A] Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ? • Test 11.10.1 : Pour chaque formulaire, les champs obligatoires vérifient-ils une de ces conditions ?    o L'indication de champ obligatoire est indiquée dans l'étiquette (balise label, attribut title, propriété aria-label, texte lié via la propriété aria-labelledby)  du champ de formulaire    o L'indication de champ obligatoire est indiquée par un passage de texte avant le champ de formulaire    o L'indication de champ obligatoire est indiquée via un attribut required    o L'indication de champ obligatoire est indiquée via la propriété ARIA aria-required    o L'indication de champ obligatoire est indiquée par un passage de texte lié par la propriété ARIA aria-describedby

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA • Test 11.10.4 : Pour chaque formulaire, les erreurs de saisie vérifient-elle une de ces conditions ?    o L'erreur de saisie est indiquée dans l'étiquette (balise label, attribut title, propriété ARIA aria-label, texte lié via la propriété ARIA aria-labelledby)  du champ de formulaire    o L'erreur de saisie est indiquée par un passage de texte avant le champ de formulaire    o Le champ de formulaire possède un type qui produit de manière automatique un message d'erreur de saisie    o L'erreur de saisie est indiquée par un passage de texte lié par la propriété ARIA aria-describedby • Test 11.10.5 : Chaque erreur de saisie qui utilise la propriété ARIA aria-label doit être accompagnée d'un passage de texte avant le champ du formulaire, cette règle est-elle respectée ?

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Navigation

AW HTML5/ARIA Navigation Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Navigation Prise en charge des role aria landmark, obligation d'utilisation de banner, navigation, main, contentinfo, search Critère 12.10 [A] Dans chaque page Web, les groupes de liens importants (menu, barre de navigation...) et la zone de contenu sont-ils identifiés ? • Test 12.10.4 : Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?    o La zone d'en-tête de la page possède un rôle ARIA "banner"    o Le menu de navigation principal possède un rôle ARIA "navigation"    o La zone de contenu principal possède un rôle ARIA "main"    o La zone de pied-de-page possède un rôle ARIA "contentinfo"    o Le champ de saisie du moteur de recherche sur le site possède un rôle "search"    o Les rôles "banner","navigation","main","contentinfo" et "search" sont uniques dans la page.

AW HTML5/ARIA Consultation Pas de changement Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Consultation Pas de changement

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence L'établissement de la base de référence nécessaire pour établir qu'un dispositif HTML5/ARIA est "compatible avec l'accessibilité" est établie sur la base de la collecte des données disponibles sur les usages des Technologies d'Assistance impactées. 1. Quatre technologies d'assistances (NVDA, JAWS, WINDOW-EYES, VOICE OVER) représentent 84% des usages "habituels". 2. Deux systèmes d'exploitation (WINDOWS XP+, IOS/OSX) couvrent plus de 95% des usages 3. Trois navigateurs (INTERNET EXPLORER, FIREFOX, SAFARI) couvrent plus de 90% des usages par les utilisateurs de technologies d'assistance. 4. INTERNET EXPLORER 8 ne présente pas de support suffisant et ne peut pas être considéré. Sur cette base il est apparu que l'on pouvait considérer (en attendant une généralisation du support de l'accessibilité par l'ensemble des technologies d'assistance, des systèmes d'exploitation et des navigateurs) que l'ensemble des éléments définis ci-dessus permettait de couvrir environ 80% des usages habituels des utilisateurs impactés.

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence Technologies d'assistance d'usage habituel Source : Enquête WEBAIM 2012

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence La base de référence est établie en tenant compte de plusieurs facteurs : La proportion d'usage des technologies d'assistance : Quatre d'entre-elles (NVDA, JAWS, VO, Windows Eyes) couvrent 84% des usages (Webaim survey #4 – 2012) La proportion d'usage des systèmes d'exploitation : Deux d'entre eux (Windows et OSX) couvrent plus de 95% des usages L'usage de la plateforme Linux est confidentiel et distribué sur un grand nombre de versions. La proportion d'usage des Navigateurs et de leurs versions Trois d'entre eux sont gratuits et mis à jour automatiquement (Chrome, Firefox et Safari), Firefox est disponible pour toutes les versions de Windows (nécessite pour XP une mise à jour gratuite du service pack 3). Internet Explorer 9 et 10 sont incompatibles avec windows XP (qui représente 41% de la base installée de windows), Internet Explorer 8 n'ayant aucun support HTML5/ARIA ne peut pas être pris en compte.

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence Les différentes combinaisons possibles qui peuvent être considérées

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 Pour qu'un dispositif HTML5/ARIA ou son alternative soit considéré comme compatible avec l'accessibilité il faut qu'il soit pleinement fonctionnel, en termes de restitution et de fonctionnalités, sur au moins une des combinaisons suivantes : Combinaison 1 : - NVDA + Firefox - JAWS + (Firefox ou IE9 +) - VOICE OVER + Safari Combinaison 2 : - JAWS + Firefox - NVDA + (Firefox ou IE9 +) - VOICE OVER + Safari Combinaison 3 : - JAWS + Firefox - WINDOW EYES + (Firefox ou IE9+) - VOICE OVER + Safari Combinaison 4 : - WINDOW EYES + Firefox - JAWS + (Firefox ou IE9 +) - VOICE OVER + Safari

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence Les règles suivantes doivent également être respectées 1. L'ensemble des dispositifs HTL5/ARIA ou leurs alternatives doivent être pleinement fonctionnels, sur l'ensemble des pages du site, sans nécessiter de changement de technologie d'assistance en cours d'utilisation 2. Lorsque des alternatives à des dispositifs HTML5/ARIA sont proposées elles ne doivent pas nécessiter la désactivation d'une technologie (par exemple Javascript ou le plugin flash) sauf s'il s'agit d'une fonctionnalité proposé par le site lui-même. Par exemple le site met à disposition une version alternative conforme pleinement fonctionnelle sans le recours aux technologies dont l'usage est non-compatible avec l'accessibilité. Le site met à disposition une fonctionnalité de remplacement des dispositifs HTML5/ARIA par des dispositifs alternatifs compatibles.

AW HTML5/ARIA Base de référence Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Base de référence 3. Un moyen est mis à disposition des utilisateurs de technologies d'assistance pour signaler les problèmes rencontrés et obtenir, via un dispositif de compensation, les informations qui seraient rendues indisponibles   4. Si une déclaration de conformité est établie elle doit comporter la liste des technologies d'assistance avec lesquelles les dispositifs HTML5/ARIA ont été testés et les résultats de ces tests (par exemple "supporté", "non supporté", "supporté partiellement") au moins.

Séminaire AccessiWeb Juin 2013 AW HTML5/ARIA Roadmap Juillet 2013 publication d'une version "expérimentale" publique sur le site AccessiWeb Octobre 2013 publication de la version définitive

Merci de votre attention Armony Altinier - Aurélien Levy – Frédéric Halna - Gilles Chagnon – Laurent Denis – Olivier Nourry - Marc-Etienne Vargenau – Patrice Bourlon - Philippe Vayssière - Romain Gervois - Sébastien Delorme - Sylvie Duchateau - Tanguy Lohéac - Victor Brito Séminaire AccessiWeb Juin 2013