Erreurs populaires dans la conception Web universelle

Avec le «Web 2.0» et le monde des médias sociaux et compétitifs d'aujourd'hui, le design universel est souvent oublié. Il est déroutant de savoir pourquoi, car il existe de nombreuses raisons sociales, techniques, financières et juridiques qui soutiennent les pratiques de conception universelles. Discutons de certains des problèmes les plus répandus dans les sites Web aujourd'hui et de la façon dont ils se rapportent aux principaux principes de conception universels.

Les plats clés

• La conception Web universelle est souvent négligée malgré ses avantages sociaux, techniques, financiers et juridiques. Les erreurs courantes incluent du texte difficile à lire, des liens de texte peu clairs, un bruit visuel excessif, un manque d'accès au clavier et un texte alternatif manquant pour les images.
• La lisibilité du texte est cruciale pour la conception universelle. Le texte de petite taille et le contraste de faible couleur peuvent rendre la typographie Web difficile à lire. L'utilisation de dimensionnement relatif dans CSS plutôt que de tailles fixes peut aider à garantir que l'utilisateur est en mesure de redimensionner le texte au besoin.
• L'accès au clavier est essentiel pour la conception universelle. De nombreux sites Web ne parviennent pas à fournir cela, créant des obstacles aux utilisateurs. Les bonnes pratiques incluent la fourniture d'un état de mise au point dans CSS si la classe de pseudo de survol est utilisée et s'assurer que si un événement de souris est conçu, un accès égal pour le clavier est fourni.
• Fournir du texte alternatif pour les images est un autre aspect clé de la conception universelle. Si une image fournit un contenu pertinent, il doit être accompagné d'un texte alternatif pour assurer l'accessibilité à tous les utilisateurs, y compris ceux qui ont des déficiences visuelles ou des connexions Internet lentes.

les principes

Tout d'abord, passons en revue les sept principes de conception universels, y compris certains exemples liés au Web. Gardez à l'esprit que ces principes sont appliqués, bien sûr, à de nombreuses industries en dehors de l'ordinateur et du Web, comme le génie civil (bâtiments, les passerelles), le divertissement (cinémas, parcs à thème) et transport (bus, trains).

1. Utilisation équitable: utile et commercialisable aux personnes ayant des capacités diverses.
   Exemple: le site Web d'un gouvernement local est conçu pour qu'il soit accessible à ceux qui utilisent des technologies d'assistance telles qu'un lecteur d'écran.
2. Flexibilité utilisée: s'adapte à un large éventail de préférences et de capacités individuelles.
   Exemple: la conception d'un site Web de compagnie aérienne maintient l'esthétique visuelle dans diverses tailles d'affichage informatique.
3. Simple et intuitif: facile à comprendre, quelle que soit l'expérience, les connaissances, les compétences linguistiques de l'utilisateur ou le niveau de concentration actuel.
   Exemple: les contrôles principaux d'une application Web sont étiquetés avec du texte et des symboles.
4. Informations perceptibles: communique efficacement les informations nécessaires à l'utilisateur, quelles que soient les conditions ambiantes ou les capacités sensorielles de l'utilisateur.
   Exemple: une vidéo pédagogique avec des légendes offre la possibilité de lire le dialogue en plus de l'écoute.
5. Tolérance à l'erreur: minimise les dangers et les conséquences néfastes des actions accidentelles ou involontaires.
   Exemple: une erreur technique lors de la soumission d'un formulaire fournit une explication claire et des options sur la façon de continuer.
6. Faible effort physique: peut être utilisé efficacement et confortablement et avec un minimum de fatigue.
   Exemple: La conception du site Web a un contraste des couleurs et une taille de texte suffisants qui minimisent la fatigue oculaire.
7. Taille et espace pour l'approche et l'utilisation: la taille et l'espace appropriés sont fournis pour l'approche, la portée, la manipulation et l'utilisation quelle que soit la taille, la posture ou la mobilité de l'utilisateur.
   Exemple: un site Web est conçu de sorte qu'un utilisateur à maladresse physique qui ne peut pas utiliser une souris puisse toujours accéder à tout le contenu avec un clavier (ou un clavier à l'écran!).

Maintenant que nous connaissons les principes, examinons plusieurs problèmes de conception Web connexes.

difficile à lire

La première erreur populaire dans la conception universelle est le contenu textuel qui, en raison de sa conception, est difficile à lire pour beaucoup. Cela concerne les principes 1, utilisation équitable; et 6, un faible effort physique, en particulier, la fatigue oculaire. Notez que la difficulté de lecture cognitive est un problème distinct qui n'est pas dans le cadre de cet article. Une bonne lisibilité rend un site Web plus utilisable et esthétiquement agréable. Soit dit en passant, consultez l'application Web relebability.com pour une lecture super facile. Alors, quels sont les problèmes? Le texte de petite taille et le contraste de faible couleur sont deux problèmes clés qui rendent la typographie Web difficile à lire. Dans l'exemple ci-dessous, le contenu textuel principal est gris sur un fond noir qui échoue différence de luminosité et différence de tests de couleur . La taille du texte est définie sur 12 pixels, ce qui est assez petit pour de nombreux utilisateurs, y compris moi-même. Lors de la suppression de la taille du texte du CSS , le navigateur affiche la taille par défaut qui est légèrement plus grande et beaucoup plus lisible! Ainsi, au lieu de définir le texte par défaut sur 12px ou .75em, essayez un peu plus haut comme 16px ou .95em. Une autre meilleure pratique concernant le texte consiste à utiliser le dimensionnement relatif dans le CSS (EMS ou pourcentages) plutôt que des tailles fixes (pixels ou points) pour vous assurer que l'utilisateur est en mesure de redimensionner le texte dans le navigateur selon les besoins et d'avoir l'échelle de mise en page avec le texte. D'autres bonnes directives, notamment fournir des en-têtes conviviales et un ampli d'espacement des lignes.

difficile à déterminer les liens texte

Par défaut, le texte hyperlien est rendu avec un soulignement. Il s'agit d'une convention de longue date dans la navigation Web. La suppression de cette convention brise non seulement les attentes des utilisateurs, mais peut rendre le lien inaccessible à ceux qui ont la coloration ou la basse vision. Plusieurs fois, la composition de ce problème est lorsque les liens sont définis avec une couleur foncée parmi le texte noir. De façon similaire à la question ci-dessus, cela concerne les principes 1 et 6. Mon optométriste me dit qu'à partir de environ 40 ans, la vue des hommes commence à perdre sa capacité à faire la distinction entre les couleurs. Et mon garçon est-elle raison! De nombreux sites Web ont des liens bleu foncé sans soulignement, et je dois certainement me fouiller les yeux pour déterminer les liens texte. L'exemple ci-dessous provient d'une nouvelle. Pouvez-vous voir le lien texte? C’est assez difficile pour moi.

Les sites Web de nouvelles semblent être connus pour utiliser les liens bleus avec les sous-lignes supprimées, même du site distingué du Royaume-Uni le télégraphe. Pour résoudre, supprimez simplement la barrière en renvoyant le soulignement. Le blog Nominsa en est un bon exemple. Facultativement, utilisez du texte en gras ou une autre dénotation visuelle pour un lien de texte tel qu'un arrière-plan coloré.

bruit visuel

Les dispositions dispersées et la surcharge de contenu sont non seulement visuellement peu attrayantes, mais pas très utilisables ni accessibles. Cela concerne directement le principe 3, simple et intuitif. Dans une page Web du gouvernement local californien, illustré ci-dessous, il existe de nombreuses zones de navigation, deux grandes images de bannières de sous-section et juste une apparence dispersée non organisée. En conséquence, le contenu principal ne commence pas avant le «pli» de la page, ce qui n'est évidemment pas idéal. En outre, il n'y a pas de point focal, pas de hiérarchie visuelle, ce qui rend un utilisateur encore plus susceptible de rechercher frénétiquement la page dont l'utilisateur a besoin.

En revanche, consultez les sites Web australiens et USA.Gov; Beaucoup plus spacieux et organisé, ce qui crée une expérience plus utilisable. Plus d'exemples qui créent un «bruit visuel» sont:

• Navigation: trop de sections de navigation sur une page (comme dans l'exemple ci-dessus) et trop de niveaux de navigation peuvent être confus ainsi qu'un cauchemar de conception.
• Installations redondantes: attributs de titre sur des liens texte qui ont le même contenu que le lien lui-même crée une infraction à outils qui est modeste et inutile.
• Images dénuées de sens: utilisez uniquement une image dans le contenu lorsqu'elle a de la valeur; Il devrait transmettre un sens important au contenu textuel.

Aucun accès au clavier

L'accès au clavier, la possibilité de naviguer dans un écran et d'interagir avec des objets focalisés à l'aide du clavier seul, est essentiel. Malheureusement, de nombreux sites Web ne fournissent pas cela. Plus précisément, de nombreux sites Web créent des obstacles aux utilisateurs de clavier, car HTML est intrinsèquement accessible au clavier. Si vous concevez un événement de souris, assurez-vous de fournir un accès égal au clavier. Cela crée l'indépendance de l'appareil; C’est une bonne chose! Cette question concerne les principes 1, utilisation équitable; et 2, flexibilité utilisée. Lors du codage d'un site Web, il existe plusieurs bonnes pratiques à considérer. Dans CSS , si la classe de pseudo de survol est utilisée, assurez-vous qu'un état de mise au point est également fourni. De plus, il ne faut jamais supprimer le contour sur l'élément d'ancrage, c'est-à-dire un {contour: 0} (Méfiez-vous: la plupart des conduites de styles de réinitialisation de CSS suppriment les contours d'ancrage - assurez-vous de les ajouter dans votre propre CSS plus tard!). Si cela est absolument nécessaire, une sorte d'effet visuel doit le remplacer. Dans JavaScript, n'utilisez pas le gestionnaire de double clic (ondblclick) car les claviers ne peuvent pas exécuter ce comportement. Si les gestionnaires JavaScript OnMouseover et OnMouseout sont utilisés, les événements OnFocus et OnBlur doivent également être implémentés pour permettre l'accès au clavier.

Texte alternatif manquant pour les images

Si une image fournit du contenu pertinent, il doit être accompagné d'un texte alternatif. Lorsque l'image ne peut pas être vue - comme cela serait le cas avec les utilisateurs aveugles, les utilisateurs à faible bande et les liens d'image cassés - alors le «contenu» de l'image doit encore être accessible. Ce problème, comme ci-dessus, concerne les principes 1 et 2. La méthode la plus populaire pour fournir un texte alternatif est de saisir le texte de l'attribut Alt de l'élément d'image. De nombreuses images telles que les graphiques graphiques, les bandes dessinées et les infographies sur le Web ne fournissent pas une «longue description» dans le texte alt et bloquent donc de nombreux utilisateurs de son contenu. Le blog Web Axe en corrige quelques exemples dans sa série «Fixing Alt». Pour en savoir plus sur les longues descriptions, consultez mon article en deux parties Longdesc et autres solutions de description de l'image longue.

Voici quelques lignes directrices pour un texte alternatif:

• Si le texte est intégré dans l'image, ajoutez-le à l'attribut alt.
• Si une image est décorative uniquement, elle doit contenir un attribut ALT vide. (par exemple ).
• Pour certaines images, telles que les graphiques et les illustrations, des descriptions plus longues sont nécessaires.
• Si une image avec un lien contient du contenu, alors le texte alternatif doit décrire la fonction du lien, pas l'image elle-même.

le point à emporter

Les sept principes de conception universels sont une excellente ressource lors de la conception d'un site Web, ainsi que d'autres produits. Les gens utilisent un ordinateur différemment et accédez à la Web différemment. En gardant cet esprit, un concepteur Web réussira mieux à créer des sites Web attrayants, conviviaux et accessibles à tous.

lecture plus approfondie

• Conception universelle pour les applications Web (O’Reilly Media) par Wendy Chisholm, Matt May.
• utilisabilité universelle, livre en ligne de Sarah Horton.
• Conception universelle de l'enseignement, Programme de bricolage de l'Université de Washington.
• Principes de conception universelle, College of Design, North Carolina State University.
• Le fichier de conception universel: conception pour les personnes de tous âges et capacités (Journal) de Molly Story, James Mueller, Ron Mace.

Des questions fréquemment posées sur la conception Web universelle

Qu'est-ce que la conception Web universelle et pourquoi est-ce important?

La conception Web universelle (UWD) est une approche de conception qui vise à créer des sites Web et du contenu Web qui peuvent être accessibles et utilisés par autant de personnes que possible, quelles que soient leurs capacités ou les appareils qu'ils utilisent. Il est important car il garantit que tout le monde, y compris les personnes handicapées, peut accéder et utiliser efficacement le contenu Web. Il améliore également l'expérience utilisateur globale, rendant les sites Web plus conviviaux et plus faciles à naviguer.

En quoi la conception Web universelle diffère-t-elle de la conception Web traditionnelle?

La conception Web traditionnelle se concentre souvent sur l'esthétique et les fonctionnalités pour un public général. D'un autre côté, la conception Web universelle prend en compte les divers besoins de tous les utilisateurs, y compris ceux qui ont handicapé. Il met l'accent sur l'accessibilité, la convivialité et l'inclusivité, garantissant que le contenu Web est accessible et utilisable par tous, quelles que soient leurs capacités ou les appareils qu'ils utilisent.

Quelles sont les erreurs courantes dans la conception Web universelle?

Suivre les directives et les normes d'accessibilité Web. Ces erreurs peuvent conduire à une mauvaise expérience utilisateur et limiter l'accessibilité et la convivialité du site Web.

Comment puis-je rendre mon site Web plus accessible et convivial?

Il existe plusieurs façons de rendre votre site Web plus accessible et convivial. Il s'agit notamment d'utiliser un langage clair et simple, de fournir un texte alternatif pour les images, de s'assurer que le site Web est navigable avec un clavier, en utilisant une disposition logique et cohérente et en fournissant des sous-titres pour les vidéos. Il est également important de tester votre site Web sur différents appareils et navigateurs pour s'assurer qu'il fonctionne bien pour tous les utilisateurs.

Qu'est-ce qu'un navigateur Web et comment affecte-t-il la conception Web universelle?

Un navigateur Web est une application logicielle que les gens utilisent pour accéder à Internet et voir les pages Web. Il affecte la conception Web universelle car différents navigateurs peuvent interpréter et afficher le contenu Web différemment. Par conséquent, il est important de tester votre site Web sur différents navigateurs pour s'assurer que cela fonctionne bien et qu'il a bien l'air. Ces fonctionnalités rendent le site Web plus accessible et utilisable pour tous les utilisateurs, y compris ceux qui ont handicapé.

Comment les entreprises de conception Web universelle bénéficient-elles aux entreprises?

Les entreprises de conception Web universelle profitent-elles aux entreprises en améliorant l'expérience utilisateur, en augmentant la satisfaction du client et en élargissant la base de clients potentielle. En rendant leurs sites Web plus accessibles et conviviaux, les entreprises peuvent atteindre un public plus large, y compris les personnes handicapées. Cela peut conduire à une augmentation du trafic, à des taux de conversion plus élevés et à une amélioration de la fidélité des clients.

Quelles sont les ressources pour en savoir plus sur la conception Web universelle?

Il existe de nombreuses ressources disponibles pour en savoir plus sur la conception Web universelle. Il s'agit notamment de tutoriels en ligne, de webinaires, de livres et de cours. Certaines organisations réputées qui fournissent des ressources sur la conception Web universelle incluent le World Wide Web Consortium (W3C), la Web Accessibility Initiative (WAI) et le National Center on Disability and Access to Education (NCDAE).

Comment mettre en œuvre la conception Web universelle dans mon site Web existant?

L'implémentation de la conception Web universelle dans un site Web existant implique la réalisation de changements pour améliorer les accessibles et l'utilisation. Cela peut inclure l'ajout de texte alternatif pour les images, rendre le site Web navigable avec un clavier, en utilisant une disposition logique et cohérente, et en fournissant des légendes pour les vidéos. Il est également important de tester le site Web sur différents appareils et navigateurs pour s'assurer que les modifications ont amélioré l'expérience utilisateur.

Quel est l'avenir de la conception Web universelle?

L'avenir de la conception Web universelle est susceptible de mettre davantage l'accent sur l'accessibilité et l'inclusivité, car de plus en plus d'entreprises reconnaissent l'importance de rendre leurs sites Web accessibles à tous les utilisateurs. Les progrès technologiques, tels que l'intelligence artificielle et l'apprentissage automatique, peuvent également jouer un rôle dans la rendez-vous plus accessible et convivial. De plus, il peut y avoir plus de réglementations et de normes pour s'assurer que les sites Web sont accessibles et utilisables par tous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!