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 !