43
ACCESSIBILITÉ WEB Normes et bonnes pratiques Pour des sites plus accessibles

Accessibilité et HTML5

Embed Size (px)

DESCRIPTION

Accessibilité et HTML5

Citation preview

Page 1: Accessibilité et HTML5

ACCESSIBILITÉ WEBNormes et bonnes pratiques

Pour des sites plus accessibles

Page 2: Accessibilité et HTML5

QU’EST-CE QUE QU’EST-CE QUE L’ACCESSIBILITÉ DU L’ACCESSIBILITÉ DU WEB ?WEB ?

Page 3: Accessibilité et HTML5

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.

Page 4: Accessibilité et HTML5

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é

Page 5: Accessibilité et HTML5

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é

Page 6: Accessibilité et HTML5

WEB CONTENT ACCESSIBILITY

GUIDELINES (WCAG) 2.0

Page 7: Accessibilité et HTML5

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é

++

++

Page 8: Accessibilité et HTML5

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

Page 9: Accessibilité et HTML5

MICROFORMATMICROFORMATS S 

Page 10: Accessibilité et HTML5

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.

Page 11: Accessibilité et HTML5

LES PLUS CONNUS Hcard Hcalendar XFN RelNoFollow RelLicence RelTag

Page 12: Accessibilité et HTML5

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). 

Page 13: Accessibilité et HTML5
Page 14: Accessibilité et HTML5

ESSAYONS HCARD

Page 15: Accessibilité et HTML5

BONNES PRATIQUES POUR SITE ACCESSIBLE

Page 16: Accessibilité et HTML5

LES RÔLES ET LES RÔLES ET PROPRIÉTÉS DE WAI-PROPRIÉTÉS DE WAI-

ARIAARIA

Page 17: Accessibilité et HTML5

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>…

Page 18: Accessibilité et HTML5

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

Page 19: Accessibilité et HTML5

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.

Page 20: Accessibilité et HTML5

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.

Page 21: Accessibilité et HTML5

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.

Page 22: Accessibilité et HTML5

PERSONNALISATION DES FONCTIONS NATIVES

Page 23: Accessibilité et HTML5

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 ?

Page 24: Accessibilité et HTML5

Il n’est jamais gênant d’utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.

Page 25: Accessibilité et HTML5

Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés.

Page 26: Accessibilité et HTML5

L’attribut role peut être ajouté sur n’importe quelle balise HTML comme <div>, <form>, <nav>, etc.

Page 27: Accessibilité et HTML5

ORDRE DU FLUX HTML

Écrire le code HTML en suivant la logique de l'ordre de lecture

Page 28: Accessibilité et HTML5

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

Page 29: Accessibilité et HTML5

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

Page 30: Accessibilité et HTML5

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>.

Page 31: Accessibilité et HTML5

IMAGES DÉCORATIVES ET ILLUSTRATIVES

Utiliser une alternative vide (alt="") sur les images décoratives et illustratives

Page 32: Accessibilité et HTML5

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.

Page 33: Accessibilité et HTML5

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é.

Page 34: Accessibilité et HTML5

NOUVELLES FENÊTRES

Signaler l'ouverture des nouvelles fenêtres

Page 35: Accessibilité et HTML5

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.

Page 36: Accessibilité et HTML5

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”.

Page 37: Accessibilité et HTML5

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.

Page 38: Accessibilité et HTML5

TITRE DE LA PAGE

Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation

Page 39: Accessibilité et HTML5

CAPTCHA (SYSTÈMES ANTI-SPAM)

Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA

Page 40: Accessibilité et HTML5

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.

Page 41: Accessibilité et HTML5

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

Page 42: Accessibilité et HTML5

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

Page 43: Accessibilité et HTML5

L’ACCESSIBILITÉ, ÇA DEMANDE DE L’HABITUDE !