Accessibilité et HTML5
-
Upload
hafid-denguir -
Category
Technology
-
view
416 -
download
0
description
Transcript of Accessibilité et HTML5
ACCESSIBILITÉ WEBNormes et bonnes pratiques
Pour des sites plus accessibles
QU’EST-CE QUE QU’EST-CE QUE L’ACCESSIBILITÉ DU L’ACCESSIBILITÉ DU WEB ?WEB ?
DÉFINITION OFFICIELLE DE L’ACCESSIBILITÉ
Mettre le web est ses services à la disposition de tous les individus, tous les individus, quels que soient leur matérielmatériel ou logiciellogiciel, leur infrastructure réseauinfrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques aptitudes physiques ou mentales. mentales.
L’ACCESSIBILITÉ, POUR QUI ? AccéderAccéder
PercevoirPercevoir
UtiliserUtiliser
Comprendre Comprendre
Handicaps Visuels : Image, vidéo, signalétique
Handicaps Auditifs : son( paroles, musique )
Handicaps Moteurs : difficultés d’utilisation des souris et clavier traditionnels.
Handicaps Cognitifs : sens et compréhension
La Barrière de la langue Autres Facteurs Handicapants
AccessibilitéAccessibilité
COMMENT SURFE LES HANDICAPÉS
Mes logiciels et Mes logiciels et les outils les outils
Sont prêts Sont prêts
Les sites et les Les sites et les application application
NonNon
Lecteur d’écran
Tablette Braille
LogicielsClavier adapté
WEB CONTENT ACCESSIBILITY
GUIDELINES (WCAG) 2.0
WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.0
WCAG
L’Objectif principal est
essentiellement de s’assurer que
lorsque l’on met à disposition des
contenus dans cet exemple complexe
« tout marche »
Personne
++
Navigateur
Technologie d’assistance
Système d’exploitation
API(s) d’Accessibilité
++
++
Les techniques sont
généralement liées à des
technologies
Général Général
HTMLHTML
CssCss
ServeurServeur
TextText
PDFPDF
FlashFlash
SilverligthSilverligth
JavascripteJavascripte
……
Ensemble de recommandations destinées à rendre les contenus Web accessibles aux personnes en situation de handicap, notamment.4 principes12 règles61 critères de succès 570 techniques
WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.0
MICROFORMATMICROFORMATS S
QUE SONT LES MICROFORMATS ?
Les microformats sont un moyen d'ajouter une syntaxe simple à des items de données lisibles par des humains, comme des événements, des détails sur un contact ou des endroits, sur des pages web, de manière à ce que l'information puisse être extraite par le logiciel et indexée, cherchée, sauvegardée, cross-référencée ou combinée.
LES PLUS CONNUS Hcard Hcalendar XFN RelNoFollow RelLicence RelTag
COMMENT ÇA MARCHE ?Principalement avec deux attributs :
Class : utilisé principalement à des fins d'identification d'élément pour la modification du style de la page via les CSS, mais permettant
également d'ancrer des microformats.
L'attribut Rel : il permet de préciser le type de relation entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers laquelle pointe le lien).
ESSAYONS HCARD
BONNES PRATIQUES POUR SITE ACCESSIBLE
LES RÔLES ET LES RÔLES ET PROPRIÉTÉS DE WAI-PROPRIÉTÉS DE WAI-
ARIAARIA
HTML5 COMPATIBLE AVEC ARIA ?
ARIA : Accessible Rich Internet Application rôle, état, propriété pour les aides techniques :
<ul role="tablist"> <li role="presentation"> <a id="tab1" href="#demo" aria-controls="demo" role="tab" aria-selected="true" tabindex="0">Dogs</a> </li> …
<div id="demo" role="tabpanel" aria-hidden="false" aria-expanded="true" aria-labelledby="tab1"> <h2>Dogs</h2>…
POINTS DE REPÈRE (LANDMARK ROLES)
Les « points de repère » (ou landmark Roles) délimitent les grands zones du documents ou de l’application web
IDENTIFIER LES PRINCIPALES ZONES DE LA PAGE AVEC L'ATTRIBUT ROLE
Les principales zones de la page doivent être identifiées à l’aide de l’attribut ARIA role.
role="banner" pour délimiter une zone de contenu qui identifie le site, comme une bannière avec un logo, un slogan et/ou un champ de recherche.
• role="search" pour délimiter une zone destinée à la recherche, comme un formulaire de recherche.
• role="navigation" pour délimiter les menus ou les éléments de navigation principaux.
• role="main" pour délimiter la zone de contenu principal de la page.
ATTENTION
Une page ne doit contenir qu’un seul role="main".
Il est tout à fait possible d’imbriquer plusieurs rôles ARIA : role="search" dans role="banner", par exemple.
Il est recommandé de ne pas charger la page en attributs role="navigation" : inutile d’identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés.
PERSONNALISATION DES FONCTIONS NATIVES
METTRE EN PLACE UNE HIÉRARCHIE DE TITRES LOGIQUE ET EXHAUSTIVE AVEC LES BALISES <H1> À <H6>
Pour mettre en place une hiérarchie de titres logique et exhaustive, il faut imaginer que les titres forment la « Table des matières » de la page. Est-elle logique ? Exhaustive ?
Il n’est jamais gênant d’utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.
Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés.
L’attribut role peut être ajouté sur n’importe quelle balise HTML comme <div>, <form>, <nav>, etc.
ORDRE DU FLUX HTML
Écrire le code HTML en suivant la logique de l'ordre de lecture
ENCODAGE
Veiller au bon codage de tous les caractères
Penser également à vérifier le bon codage des caractères qui ne sont pas spontanément affichés à l’écran
LANGUE DE LA PAGE
Renseigner la langue principale de la page avec l'attribut lang sur la balise <html>
Utiliser l’attribut lang pour signaler les changements de langue
Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme.
des attributs : align, alink, background, basefont, bgcolor, border, color, link, text, vlink, height et width.
les balises : <basefont>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> et <u>.
IMAGES DÉCORATIVES ET ILLUSTRATIVES
Utiliser une alternative vide (alt="") sur les images décoratives et illustratives
IMAGES INFORMATIVES
Ne pas utiliser CSS pour afficher les images informatives.
Renseigner un court texte de remplacement dans l’attribut alt qui décrit globalement la fonction de l’image.
INTITULÉS DES LIENS ET DES BOUTONS
Les liens et les boutons ne doivent jamais être vides et doivent donc toujours posséder un intitulé.
NOUVELLES FENÊTRES
Signaler l'ouverture des nouvelles fenêtres
FORMULAIRES
Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés
Parfois, certains champs n’ont pas d’intitulé visible. Dans cette situation, utiliser l’attribut title pour associer tout de même un intitulé au champ.
Les balises <fieldset> et <legend> ne sont à utiliser que lorsque plusieurs groupes de champs disposent d’intitulés identiques. Par exemple : Une série de questions sur une même page avec
comme réponses possibles “oui” ou “non”. Une liste de participants à un évènement avec, à
chaque fois, “nom” et “prénom”.
Une bonne pratique d’accessibilité consiste à utiliser également les balises <fieldset> et <legend> lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.
TITRE DE LA PAGE
Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation
CAPTCHA (SYSTÈMES ANTI-SPAM)
Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA
TABLEAUX DE MISE EN FORME
Ne pas utiliser de balises ou d'attributs propres aux tableaux de données dans les tableaux de mise en forme Que les balises <caption>, <th>, <thead> et <tfoot>
ne doivent pas être utilisées dans les tableaux de mise en forme.
Que les attributs scope, headers, axis, colgroup et summary ne doivent pas être utilisés dans les tableaux de mise en forme.
TABLEAUX DE DONNÉES
Donner un titre à chaque tableau de données avec la balise <caption>
Utiliser l'attribut scope pour associer les cellules aux entêtes des tableaux de données simples
Utiliser l'attribut headers et id pour associer les cellules aux entêtes des tableaux de données complexes
CONTENUS MASQUÉS
Cas 1 : ces éléments sont masqués mais peuvent être affichés sur action de l'utilisateur
Cas 2 : ces éléments sont masqués mais ne seront jamais affichés Cas 2.1 : les éléments inutiles pour tous les
utilisateurs Cas 2.2 : les éléments qui sont utiles pour les
utilisateurs de lecteurs d'écran, mais inutiles pour les autres utilisateurs
L’ACCESSIBILITÉ, ÇA DEMANDE DE L’HABITUDE !