• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessibilité et HTML5
 

Accessibilité et HTML5

on

  • 455 views

Accessibilité et HTML5

Accessibilité et HTML5

Statistics

Views

Total Views
455
Views on SlideShare
329
Embed Views
126

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 126

http://www.scoop.it 126

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessibilité et HTML5 Accessibilité et HTML5 Presentation Transcript

    • ACCESSIBILITÉ WEBNormes et bonnes pratiquesPour des sites plus accessibles
    • QU’EST-CE QUEL’ACCESSIBILITÉ DUWEB ?
    • DÉFINITION OFFICIELLE DEL’ACCESSIBILITÉ Mettre le web est ses services à la disposition detous les individus, quels que soient leur matériel oulogiciel, leur infrastructure réseau, leur languelogiciel réseaumaternelle, leur culture, leur localisationgéographique, ou leurs aptitudes physiques oumentales.
    • AccéderL’ACCESSIBILITÉ, POUR QUI ? Percevoir Handicaps Visuels : Image, vidéo, signalétique Handicaps Auditifs : son( paroles, Utiliser musique ) Handicaps Moteurs : difficultés d’utilisation des souris et clavier traditionnels. Comprendre Handicaps Cognitifs : sens et compréhension La Barrière de la langue Autres Facteurs Handicapants Accessibilité
    • COMMENT SURFE LES HANDICAPÉS Mes logiciels et les outils Sont prêts Tablette Braille Les sites et les Lecteur d’écran application Non Clavier adapté Logiciels
    • WEB CONTENT ACCESSIBILITYGUIDELINES ( WCAG) 2.0
    • WEB CONTENT ACCESSIBILITY WCAG GUIDELINES (WCAG) 2.0 L’Objectif Personne Navigateur principal est essentiellement de s’assurer que + + lorsque l’on met à disposition des Système Technologie contenus dans cet d’exploitation d’assistance exemple complexe + « tout marche » API(s) d’Accessibilité
    • WEB CONTENT ACCESSIBILITY Les techniques sont GUIDELINES (WCAG) 2.0 généralement liées à des technologiesEnsemble de recommandations Généraldestinées à rendre les contenus Web HTML Cssaccessibles aux personnes en situation Serveurde handicap, notamment. Text4 principes PDF Flash12 règles Silverligth61 critères de succès Javascripte570 techniques …
    • MICROFORMATS 
    • QUE SONT LES MICROFORMATS ?Les microformats sont un moyen dajouter unesyntaxe simple à des items de données lisibles pardes humains, comme des événements, des détailssur un contact ou des endroits, sur des pages web,de manière à ce que linformation puisse êtreextraite par le logiciel et indexée, cherchée,sauvegardée, cross-référencée ou combinée.
    • LES PLUSCONNUS Hcard Hcalendar XFN RelNoFollow RelLicence RelTag
    • COMMENT ÇAMARCHE ?Principalement avec deux attributs : Class : utilisé principalement à des fins didentification délément pour la modification du style de la page via les CSS, mais permettant également dancrer des microformats.   Lattribut 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 POURSITE ACCESSIBLE
    • LES RÔLES ETPROPRIÉTÉS DE WAI- ARIA
    • 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 (LANDMARKROLES) Les « points de repère » (ou landmark Roles) délimitent les grands zones du documents ou de l’application web
    • IDENTIFIER LES PRINCIPALESZONES DE LA PAGE AVECLATTRIBUT ROLELes 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 FONCTIONSNATIVES
    • METTRE EN PLACE UNE HIÉRARCHIEDE TITRES LOGIQUE ET EXHAUSTIVEAVEC 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 lordre 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 lattribut lang sur la balise <html> Utiliser l’attribut lang pour signaler les changements de langue
    •  Ne pas utiliser dattributs 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 ETILLUSTRATIVES 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 DESBOUTONS Les liens et les boutons ne doivent jamais être vides et doivent donc toujours posséder un intitulé.
    • NOUVELLES FENÊTRES Signaler louverture 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 lalternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA
    • TABLEAUX DE MISE EN FORMENe pas utiliser de balises ou dattributs 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 lattribut scope pour associer les cellules aux entêtes des tableaux de données simples Utiliser lattribut 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 lutilisateur 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É, ÇADEMANDE DE L’HABITUDE !