Home > Développement > HTML > Accessibilité

Accessibilité

Introduction

Situation de handicap : visuel, moteur, auditif, dyslexique

Cible : personnes âgées, parents, débutants

Consultent sur mobile

Répondre aux besoins d'un public

WAI = Web Accessibility Initiative = Solutions techniques pour le web accessible

Méthodologie

Accompagnement conseil

Outils

Se former ou être formé

Accessibilité dès le début du projet

Amélioration progressive

Pensez utilisateur plutôt que référentiel

ARIA

Accessible Riche Internet Applications

Attribut role : Pour les non-voyants, pour la balise parent

Utilisé pour les outils de lecture du web

W3 Aria

W3C DOM

Liste Role ARIA

Utilisé quand la balise n'est pas sémantique (ex : div)

Structure idéale

<header>
    <main>
        <section>
            <article>
                <header>
                    <h1></h1>
                    <time datetime="">
                </header>
                <div class="content"></div>
                <footer>
            </article>
        </section>
        <aside></aside>
    </main>
<footer>

Microdata

Schema.org

Pour tester : Google outil de test des données structurées

Formulaire

<input aria-required="true">

Image

Les attributs obligatoires :

  • src
  • Image décorative : alt=""
  • Image informative : alt="texte"
  • data-*
  • itemprop
  • content
  • <main itemscope itemptype="http://schema.org/*"></main>

Tips

  • Utiliser les entités HTML
  • Ne pas véhiculer l'information seulement par la couleur
  • Utiliser des pictos
  • Ajouter un attribut title pour les liens, les abréviations abbr