Les demandes de conception de sites Web incluent de plus en plus une accessibilité Web améliorée. Mais l'optimisation du site pour tous les principaux navigateurs avec une compatibilité avec plusieurs appareils n'est-elle pas suffisante? Vous pouvez facilement mesurer les performances, l'accessibilité, les meilleures pratiques et le référencement de votre site Web à l'aide de Google Lighthouse. Alors pourquoi l'accessibilité est-elle importante?

Selon le CDC (Centers for Disease Control and Prevention), plus de 60 millions d'Américains vivent avec un handicap. En suivant les Directives pour l'accessibilité du contenu Web, vous pouvez introduire quelques considérations préliminaires qui contribueront à rendre un site Web accessible. Voici tout ce dont vous avez besoin pour démarrer avec l'accessibilité Web en utilisant HTML et CSS.

HTML structuré avec une sémantique appropriée

Tout en rendant le site Web attrayant, les utilisateurs de technologies d'assistance ne doivent pas être déroutés. Bien que de nombreux systèmes de gestion de contenu comme WordPress appliquent le HTML, il est de votre responsabilité de revérifier et de confirmer qu'il est appliqué correctement.

instagram viewer

Par exemple, un

Lire la suite: Exemples de code HTML simples que vous pouvez apprendre en 10 minutes

Le HTML sémantique est plus facile à développer car vous obtiendrez des fonctionnalités supplémentaires. Cela fonctionne très bien sur mobile. De plus, lorsque vous accordez de l'importance aux mots-clés enveloppés à l'intérieur

ou alors tag, cela aide au référencement.

Contenu structuré pour les utilisateurs de lecteurs d'écran

Voici un exemple de HTML sémantique good vs. mauvais.

Bon HTML sémantique

Mon cap


Voici comment créer un site Web accessible en utilisant HTML et CSS


Ma deuxième rubrique


Mauvais code HTML sémantique

Mon cap


Voici comment créer un site Web accessible en utilisant HTML et CSS

Le premier cas est assez facile à naviguer pour les lecteurs d'écran. Il lira l'en-tête indiquant le titre et le paragraphe. Il s'arrêtera une seconde après chaque élément. Vous pouvez sauter certains titres ou revenir au précédent en utilisant Entrée/Retour. Vous pouvez également former une table des matières en utilisant la balise header.

Lorsque vous écrivez du HTML de présentation au lieu du HTML sémantique (dans le second cas), la ligne s'interrompt inutilement et entraîne une mauvaise expérience. C'est comme préparer un bloc géant qui est beaucoup plus difficile à cascader et à manipuler car il n'y a pas de sélecteurs potentiels.

Langue et mises en page pour un site Web accessible

Vous devez utiliser un langage précis avec des acronymes et des abréviations étendus. Si possible, essayez d'éviter les tirets en écrivant 9-5 -> 9 à 5. Auparavant, des tableaux HTML étaient utilisés pour créer les mises en page. Cela empêchait les lectures correctes en raison de tableaux imbriqués qui formaient une mise en page assez complexe. Voici une structure de site Web moderne:


Ceci est un en-tête




Contenu de la page principale

contenant l'article

Intitulé de l'article


contenu de l'article



Pied de page du site

contenu du pied de page

Donc, comme vous pouvez le voir, cette mise en page est conviviale pour les lecteurs d'écran. Le balisage est compréhensible avec un code clair et concis. De plus, il est facile à entretenir et nécessite moins de bande passante lors du téléchargement. Assurez-vous d'avoir placé le code source de manière logique; Cela fera toute la différence.

Reconsidérer les contrôles de l'interface utilisateur, les tableaux et le texte alternatif

Le plus souvent, les contrôles d'interface utilisateur sont des boutons, des formulaires et des contrôles de lien de votre document Web. La règle d'or est qu'ils peuvent être manipulés au clavier. Ils ont un style par défaut (peut différer selon les navigateurs) où vous pouvez accéder à d'autres options à l'aide de la touche de tabulation et appuyez sur Entrée/Retour pour parvenir à une conclusion. Vous pouvez gérer les étiquettes de texte en ajoutant des textes d'ancrage distinctifs et significatifs au lieu de « cliquez ici ».

Pour créer des tableaux accessibles, ajoutez des en-têtes de tableau

et spécifiez les lignes ou les colonnes à l'aide de l'attribut scope. De plus, vous pouvez utiliser le ou alors attribut summary pour donner aux lecteurs d'écran un aperçu rapide du contenu du tableau.

Le texte alternatif donne les informations contextuelles de l'image ou de la vidéo aux robots d'exploration Web et aux lecteurs d'écran. Si votre image est à des fins décoratives, il est préférable de laisser la balise alt vide. Sinon, donner une description détaillée de l'image aide beaucoup.

Une fleur rouge

Dans la plupart des cas, le lecteur d'écran lira le texte alternatif, le nom de fichier et l'attribut title (vous pouvez l'ignorer). De plus, si vous ne souhaitez pas utiliser de texte alternatif ou si vous souhaitez ajouter la même étiquette à plusieurs images, voici un petit conseil:


Une fleur rouge...

Vous avez utilisé l'attribut aria-labelledby pour faire référence à cet identifiant. Cela permettra aux lecteurs d'écran d'utiliser du texte alternatif sous la forme de ce paragraphe.

CSS standard pour une meilleure accessibilité

Le style des fonctionnalités de page accessibles signifie que votre conception doit se comporter en fonction du contenu principal de la page. Par exemple, pour un

,

, et

  • élément, un CSS typique devrait être:
  • h1 {
    taille de police: 4rem ;
    }
    p, li {
    taille de la police: 1.5rem ;
    Couleur bleue;
    }

    La taille de la police, l'espacement des lettres, la famille de polices, etc., devraient aider à une lecture confortable. Les en-têtes doivent se démarquer du corps du texte (le style par défaut est également bon). De plus, le texte doit avoir une couleur contrastée par rapport au arrière-plan que vous sélectionnez avec CSS.

    Styliser le texte, les liens et les étiquettes

    Des micro-interactions sont possibles avec un CSS accessible. Cela peut être aussi petit que d'accentuer le texte pour mettre en évidence les liens de manière appropriée. Vous pouvez utiliser le et balise distinctement. Vous pouvez ajouter un soulignement en pointillés à l'aide de la élément.

    Le lien standard doit être souligné avec une couleur par défaut: bleu et un lien précédemment visité avec une couleur par défaut: violet (vous pouvez le personnaliser).


    une {
    couleur: #ff0000 ;
    }
    a: actif {
    couleur: #000000 ;
    couleur d'arrière-plan: #a60000 ;
    }
    a: survol, a: visité, a: focus {
    couleur: #a60000 ;
    texte-décoration: aucun ;
    }

    Ainsi, avec un changement de pointeur de souris, vous devez mettre en surbrillance le texte focalisé. Le curseur du pointeur et le contour jouent un rôle important dans l'accessibilité du Web.

    Utilisez CSS pour donner un aspect propre aux éléments de formulaire et aux étiquettes. Décidez également des états de focus/survol qui sont cohérents dans la plupart des navigateurs. N'oubliez pas que ces petits indices aident les gens à comprendre votre page Web.

    Contraste des couleurs et valeurs de masquage

    Ajustez la palette de couleurs du site Web pour que la couleur de premier plan (texte/image) contraste avec la couleur d'arrière-plan principalement parce qu'il est plus difficile pour les personnes ayant une déficience visuelle (par exemple, le daltonisme) de lire le contenu correctement. Vous pouvez utiliser Vérificateur de contraste de couleur pour obtenir une palette de couleurs décente selon les critères WCAG. Essayez également d'ajouter des signes de balisage (comme un astérisque) ainsi que des avertissements ou des conditions générales (pas seulement une alerte rouge).

    Les lecteurs d'écran n'ont rien à craindre tant que l'ordre du code source n'est pas correctement écrit. Essayez d'éviter d'utiliser display: aucun ou visibilité: propriétés cachées car elles masquent le contenu des lecteurs d'écran.

    Facilitez le changement de style

    Le point clé est que quelle que soit la qualité de la conception du site, les utilisateurs ont diverses raisons de remplacer le style. Par exemple, certains souhaitent peut-être une taille de texte plus grande ou souhaitent modifier la couleur du texte et de l'arrière-plan pour plus de lisibilité. Votre zone de contenu devrait donc être capable de le gérer complètement.

    Conclusion: Combinez HTML et CSS

    Maintenant, vous connaissez les bases pour démarrer avec le HTML sémantique et écrire un code source sensé dans le bon ordre pour un site Web accessible. Concentrez-vous sur le HTML et passez à la création d'un CSS accessible une fois que c'est fait.

    En utilisant les techniques ci-dessus, vous pouvez améliorer l'expérience utilisateur et servir un beau public. Alors, commencez à créer des sites Web réactifs et accessibles.

    E-mail
    Comment créer un site Web: pour les débutants

    Aujourd'hui, je vais vous guider à travers le processus de création d'un site Web complet à partir de zéro. Ne vous inquiétez pas si cela semble difficile. Je vous guiderai à chaque étape.

    Lire la suite

    Rubriques connexes
    • Programmation
    • HTML
    • Création de sites web
    • Accessibilité
    • CSS
    A propos de l'auteur
    Nainy Mourya (3 articles publiés)

    Naincy se spécialise dans la création de sites Web hautement réactifs et d'une stratégie de contenu efficace ainsi que dans des copies Web. C'est une rédactrice technique indépendante qui surveille de près les tendances technologiques.

    Plus de Naincy Mourya

    Abonnez-vous à notre newsletter

    Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

    Un pas de plus…!

    Veuillez confirmer votre adresse e-mail dans l'e-mail que nous venons de vous envoyer.

    .