Meilleures pratiques de web design pour votre prochain projet de site

Quelle est la cause de l’écart important entre ce que certains développeurs WordPress facturent par rapport aux autres ? Pour répondre à cette question, il faut d’abord se demander pourquoi vous voulez un site web.

Certains développeurs se concentrent sur le produit final : la combinaison de code qui permet d’obtenir un site web au design assez agréable.

Mais les développeurs ayant des connaissances en marketing ne se contentent pas de construire quelque chose qui a l’air beau. Ils agissent en tant que consultants auprès de clients qui cherchent à atteindre des objectifs spécifiques avec leurs sites web.

Dans cette optique, engager quelqu’un pour construire un site web qui ne semble pas intéressé par vos objectifs finaux ou qui ne pose pas de questions à ce sujet est un signal d’alarme. Il est important de souligner que même le plus beau des designs web n’est pas forcément idéal pour convertir les visiteurs en clients.

Cela dit, 94 % des personnes jugent de votre crédibilité en fonction du design de votre site web.

Vous devez donc plutôt vous concentrer sur l’utilisation de votre design pour offrir une expérience utilisateur idéale. En premier lieu, vous devez permettre aux visiteurs de trouver facilement les informations qu’ils recherchent en visitant votre site web tout en les guidant vers les activités de conversion des objectifs.

Ces meilleures pratiques de design web se concentrent sur l’intersection entre la création d’un beau site web et celle d’un site qui sert votre entreprise.

Vous préférez regarder la version vidéo ?

Qu’est-ce qui définit les meilleures pratiques en matière de design web ?

Pour être sûr, tout le monde a des opinions sur ce qui constitue un site web bien conçu.

Mais limitons les opinions de chacun en nous en remettant aux experts.

Selon Orbit Media, vous pouvez regrouper les meilleures pratiques de design web dans ces trois catégories de normes de base :

• Normes de marque : Vous connaissez peut-être mieux ce concept que celui de « marque », de « guide de style » ou de « tableau d’ambiance ». Ces normes comprennent tout ce qui a trait à l’aspect d’un site web et implique l’utilisation de couleurs, de typographie et d’éléments spécifiques à l’entreprise concernée.
• Normes de codage : Les sites web doivent être construits conformément aux normes de programmation convenues par le W3C, la communauté internationale qui travaille ensemble pour développer des normes pour le web.
• Normes d’accessibilité : L’accès à l’information est un droit humain fondamental, qui a été reconnu par la Convention des Nations Unies pour les droits des personnes handicapées. En outre, le fait de rendre votre site accessible a des effets positifs – non seulement sur les ventes mais sur le SEO également. Le W3C partage une liste de base de normes que vous devez suivre pour concevoir un site web accessible. Nous détaillerons plus loin dans cet article les meilleures pratiques en matière de design de sites web.

Examinons comment développer des pratiques de design web basées sur chacune de ces normes :

Normes de marque

Les sites web dont l’image de marque n’est pas cohérente peuvent être stressants et prêter à confusion. Il n’est donc pas surprenant que quelque 38 % des visiteurs aient déclaré qu’ils cessent de s’engager sur un site web si le contenu ou la présentation sont peu attrayants.

En gardant à l’esprit que l’apparence n’est pas tout, voici quelques principes de base à prendre en compte pour créer un site web que les gens veulent utiliser :

L’équilibre

L’équilibre est le principe de design qui prescrit la manière de distribuer efficacement les éléments visuels. En général, un design équilibré semble propre et naturel et présente une bonne symétrie (même si ça n’est pas nécessairement une condition d’équilibre).

Vous pouvez intégrer un équilibre dans le design du site web en termes de mise en page.

Le centrage du texte ou d’autres éléments sur la page est un moyen simple de le faire. En général, les pages web sont construites sur un système de grille, ce qui crée une forme d’équilibre. Vous pouvez utiliser la propriété CSS float pour positionner les éléments et les équilibrer dans la page.

L’équilibre peut être atteint de trois façons :

1. Design symétrique

Disposer les éléments de manière égale sur toute la page web. Par exemple, si vous avez un élément lourd à gauche, vous devriez avoir un élément lourd à droite. Comme mentionné, le centrage est le moyen le plus simple d’obtenir la symétrie, mais il peut parfois sembler plat ou ennuyeux.

Pour éviter de donner à la page un aspect monotone, vous pouvez créer un équilibre en utilisant différents éléments, par exemple en équilibrant une grande image avec un bloc de texte. Il existe également un type d’équilibre symétrique appelé équilibre radial, où les objets rayonnent à partir d’un point central.

2. Design asymétrique

Plus difficile à réaliser, le design asymétrique implique une répartition inégale des éléments sur une page. Par exemple, vous pouvez avoir un grand élément au centre, qui est équilibré par un élément plus petit plus loin.

Vous pouvez utiliser d’autres éléments de design, tels que la couleur ou la texture, pour équilibrer un design asymétrique.

3. Déséquilibre

Ces types de designs suggèrent le mouvement et l’action, ce qui peut mettre les gens mal à l’aise. Si votre site web a pour but de faire réfléchir les gens, alors un design déséquilibré est fait pour vous.

Composition

Le terme « composition » fait référence à l’emplacement et à l’organisation des éléments du design.

La règle des tiers est couramment utilisée pour créer une composition équilibrée, en particulier avec des photos.

Espacement

Les éléments doivent être espacés de manière régulière afin que les utilisateurs puissent différencier les sections ou les blocs.

Vous devez également introduire un espace négatif ou l’espace entre et autour du sujet d’une image. L’espace négatif peut réduire le bruit visuel, augmenter la lisibilité et apporter un équilibre.

Vous pouvez introduire un espace négatif en ajoutant des marges (margin) et des marges internes (padding) autour de vos éléments de design.

Point focal

Créez une zone sur laquelle vous souhaitez attirer l’attention. Elle doit être la partie la plus importante de votre page et, dans l’idéal, chaque page doit se concentrer sur un seul point focal.

Couleur

La couleur est un élément de design important lorsqu’il s’agit de la marque. Idéalement, vous entrez dans le processus de design de sites web avec une compréhension des couleurs que vous voulez associer à votre marque.

Pour le design de sites web en particulier, il est utile de commencer par un tableau de couleurs pour votre marque.

Choisissez une couleur primaire et secondaire (la couleur secondaire peut compléter ou contraster la couleur primaire), et une teinte plus claire et plus foncée pour chacune. Limitez votre utilisation de la couleur afin que les différentes accentuations ne deviennent pas une plaie pour les yeux.

Adobe Color est un excellent outil gratuit pour tester différentes combinaisons de couleurs afin de créer une palette de travail pour les éléments d’un site web.

En outre, lorsqu’on décide de la couleur, il est important de tenir compte des daltoniens, qui représentent jusqu’à 4,5 % de la population mondiale.

Il existe trois types de daltonisme (daltonisme total, vision bicolore et vision des couleurs déficiente). Assurez-vous donc que votre design est toujours utilisable en tenant compte de ceux qui ne sont pas en mesure de différencier les couleurs.

Contraste

Lors du choix de la couleur, il est important d’être conscient des ratios de couleur et du contraste.

Le contraste des couleurs fait référence à la différence de lumière entre l’avant-plan et l’arrière-plan. L’utilisation de couleurs suffisamment contrastées permet de distinguer facilement la visibilité du site web. En général, utilisez des options de couleur à fort contraste – comme du texte noir sur un fond blanc – pour rendre votre site lisible.

Le ratio de contraste est la valeur numérique attribuée à la différence de contraste entre les éléments de la page.

Les World Content Accessibility Guidelines (WCAG) 2.0 recommandent un ratio de contraste de 4,5:1 pour le texte normal. WebAIM partage quelques combinaisons prédéterminées qui correspondent au rapport de contraste idéal pour vous aider à visualiser cette meilleure pratique de design web.

Pour faciliter la navigation en utilisant ce ratio, assurez-vous que lorsque vous concevez votre site web, vous envisagez tous les publics (y compris ceux qui ont des problèmes d’accessibilité). Il est plus facile d’agir ainsi que de prévoir de traiter ces questions après coup.

Prenez en compte tous les aspects du site web avec lequel les gens vont interagir, notamment en-têtes, pieds de page, menus – qui doivent tous être facilement visibles pour être utilisables.

Voici quelques outils que vous pouvez utiliser pour vérifier les rapports de contraste des couleurs :

• Color Contrast Checker par Lebel Access.
• Contrast Ratio
• Color Contrast Checker de WCAG 2.0 AA & AAA, outil qui est basé sur les directives WCAG 2.0.

Typographie

La typographie du site est une autre considération importante pour l’image de marque.

Bien qu’il existe de nombreuses sources différentes pour trouver des polices de caractères potentielles à utiliser sur votre site web, vous devez d’abord considérer les options qui s’afficheront de manière cohérente, quelles que soient les polices que l’utilisateur final a installées sur son ordinateur.

Google Fonts offre une grande variété de polices gratuites et sécurisées pour le web, sur lesquelles vous pouvez compter pour un affichage correct, indépendamment des polices/programmes installés par l’utilisateur. Assurez-vous d’inclure des polices dans votre tableau pour voir si elles correspondent à votre esthétique des couleurs.

Si vous avez du mal à trouver des combinaisons, les polices de Google peuvent vous suggérer des combinaisons populaires. Vous pouvez également utiliser un site tel que FontPair pour obtenir des suggestions.

Essayez de limiter le poids des polices que vous utilisez, car le fait de devoir charger trop de fichiers peut contribuer à ralentir la vitesse de la page. Sur ce point, il faut envisager l’hébergement des polices Google en local afin d’introduire des avantages supplémentaires en termes de performances.

Lorsqu’il s’agit de sélectionner des éléments typographiques sur la base des meilleures pratiques en matière de design de sites web, en règle générale, il convient d’utiliser des polices sans empattement (sans-serif) pour les titres et des polices avec empattement pour le contenu. Au minimum, n’utilisez pas de polices décoratives pour le contenu du corps, car il sera difficile à lire.

De plus, ne soyez pas tenté d’utiliser une grande variété de polices de caractères sur votre site web. Une bonne règle de base consiste à utiliser une police pour votre logo, une autre pour vos menus/rubriques et une autre pour le contenu du corps. Sur ce point, essayez d’apparier des polices qui se complètent, comme celles de la même famille de polices.

Hiérarchie des éléments

La hiérarchie fait référence à la disposition des éléments de design qui mettent en évidence l’importance relative. Pour ce faire, on manipule des éléments tels que le contraste visuel, la taille et l’emplacement pour attirer l’attention.

Par exemple, le contenu doit être décomposé en blocs logiques afin que les utilisateurs puissent distinguer les sections les unes des autres.

Vous pouvez le faire grâce à l’utilisation de contenu d’en-têtes, qui permettent non seulement aux utilisateurs d’aller facilement aux parties qu’ils veulent lire, mais aussi de diviser de grandes quantités de texte en morceaux lisibles afin que les lecteurs d’écran puissent déterminer le contexte de chaque section.

Si vous cherchez des illustrations visuelles utiles de ces concepts de design et bien plus encore, le blog de Tilda Publishing couvre certaines des erreurs de design de pages web les plus courantes et comment les corriger.

Meilleures pratiques de design/formatage du Web

Selon une étude d’Orbit Media, il existe des normes communes de design de sites web observées dans les 50 premiers sites de marketing.

Par « normes », on entend que 80 % des sites web utilisent une approche de design similaire :

• Logo dans le coin supérieur gauche.
• Navigation horizontale principale en haut de chaque page.
• Proposition de valeur en haut de la page d’accueil située « au-dessus du pli ». Notez que la plupart des designers de sites web vous diront qu’il n’y a pas de hauteur de pixel standard pour les navigateurs, et techniquement pas de « fold ». Mais, en général, les éléments importants du design doivent apparaître en hauteur sur les pages qui sont généralement visibles par la majorité des visiteurs, même sans défilement.

Voici quelques bonnes pratiques de design de sites web pour les éléments communs :

Images

Les meilleures pratiques de design de sites web pour l‘utilisation d’images pourraient inspirer de nombreux conseils, mais concentrons-nous sur le strict minimum dans cette discussion sur les meilleures pratiques de design web :

• Ajout du texte ALT. Les images ne peuvent pas être traitées à l’aide de lecteurs d’écran, sauf si le texte ALT est utilisé. l’ajout du texte ALT contribue également au référencement, mais certaines personnes n’utilisent le texte ALT que pour compléter leur stratégie de mots-clés. Une utilisation plus utile du texte ALT serait de décrire l’image – bien que vous puissiez certainement satisfaire les robots de recherche et les lecteurs d’écran en même temps avec la bonne approche.
• L’utilisation d’images représentant des visages humains tend à être plus efficace que d’autres graphiques ou animations. Cela rend les gens plus enclins à s’intéresser à l’image, car les humains sont attirés par ce qu’ils perçoivent comme une empathie et des émotions réelles.
• Utilisez des images réactives, qui grandissent ou diminuent selon la taille du navigateur. Cela contribue à la fois à la vitesse du site et au référencement.
• N’oubliez jamais les favicons. Les favicons sont les petites icônes qui s’affichent à côté du titre du site web, ainsi que dans les résultats de recherche. Elles contribuent à la reconnaissance de la marque et améliorent l’interface utilisateur du site.

Navigation du site web

Les utilisateurs s’attendent à pouvoir trouver facilement le contenu qu’ils recherchent sur un site. Il est donc important que la navigation sur les sites web soit simple et directe.

La navigation sur les sites web est un terme général qui désigne l’architecture des liens internes d’un site web. N’oubliez pas que l’objectif principal de la navigation est d’aider les utilisateurs à trouver facilement le contenu pertinent sur votre site web.

L’architecture des liens internes de votre site constitue la base de votre plan de site, ce qui permet aux moteurs de recherche d’accéder plus facilement à votre contenu. Il a été constaté qu’un site bien conçu, dont le contenu est facile à trouver, a un effet positif sur le trafic que vous obtiendrez des moteurs de recherche (ainsi qu’une plus grande probabilité d’obtenir des sitelinks Google).

Navigation du menu

Il y a plusieurs aspects qui constituent la navigation de site mais votre menu principal doit être le point central, car c’est l’une des premières choses avec lesquelles les utilisateurs interagissent lorsqu’ils visitent votre site web.

Il existe différentes heuristiques pour le design des menus de sites web, mais les plus populaires sont celles qui sont utilisées :

Menu de navigation

L’idéal serait qu’il soit situé au centre d’un site web. Cela pourrait impliquer l’utilisation d’un menu déroulant s’il y a plusieurs catégories. Toutefois, les menus déroulants ne sont pas recommandés, surtout en ce qui concerne le référencement technique (ils sont plus difficiles à crawler). En outre, il a été constaté que la plupart des personnes n’aiment pas les menus déroulants.

En effet, l’œil humain travaille plus vite que la main, et les gens trouvent donc ennuyeux de devoir cliquer sur quelque chose d’autre, ce qui peut entraîner une diminution des visites sur les pages.

Menu Hamburger

Principalement utilisé pour un design optimisé pour les téléphones portables, le menu hamburger est généralement situé en haut à gauche ou à droite de la page. Il apparaît sous la forme d’un carré de trois lignes qui peut être agrandi d’un clic. Cependant, de nombreux créateurs méprisent le menu hamburger, ce qui a inspiré les développeurs web à envisager de nouvelles façons de rendre la navigation sur les sites web mobiles amusante et fonctionnelle.

Voici quelques conseils pour concevoir une navigation basée sur les meilleures pratiques en matière de design web :

• Ajouter une barre de recherche pour aider les utilisateurs à trouver facilement le contenu (voici comment améliorer la fonctionnalité de recherche de WordPress). Cela est particulièrement utile pour les sites web qui ont beaucoup de contenu, comme un blog d’information.
• Concevez votre site en suivant la règle des trois clics qui stipule que les utilisateurs doivent pouvoir trouver les informations souhaitées en trois clics de souris au maximum. Cela s’explique par le fait que les utilisateurs préfèrent naviguer sur un site plutôt que de consulter les résultats de recherche, lorsque cela est possible.
• Rendez les titres de vos menus descriptifs (avec les mots clés à l’esprit), ce qui aide les utilisateurs à trouver plus facilement les articles et contribue également de manière positive au référencement.
• La position des éléments du menu est importante. Placez les pages les plus importantes en tête de votre menu afin qu’elles soient facilement accessibles.
• Maintenez le nombre d’éléments de menu à un maximum de 7, non seulement pour garder le design du site propre, mais aussi parce qu’un trop grand nombre de catégories d’éléments de menu peut potentiellement affecter votre capacité à vous classer dans les recherches. Google peut interpréter ces catégories apparemment sans rapport comme un signe que votre site web n’a pas choisi une niche particulière.

Pour un format plus pratique, voici un infographique pratique :

Normes de codage

Avec un si grand nombre de sites web créés et consommés dans le monde entier, il est certainement nécessaire de disposer d’un ensemble standardisé de principes de codage. Voici quelques aspects de ces normes web :

SEO

Le référencement peut être utilisé pour augmenter le nombre de visiteurs sur votre site de manière organique (sans utiliser de publicité). Comme il est trop compliqué d’approfondir le référencement dans une petite sous-section d’un article, consultez notre liste de contrôle pour le référencement et nos conseils sur les meilleures extensions WordPress de SEO pour vous familiariser avec cet aspect des meilleures pratiques de design web.

Notez que les conseils suivants sur les normes de codage fonctionnent main dans la main avec le référencement.

Réactivité mobile

Le design responsive vise à créer une expérience utilisateur agréable, quel que soit le dispositif ou le navigateur utilisé pour accéder à votre site web.

Il est aujourd’hui plus important que jamais de concevoir votre site web de manière à ce qu’il soit réactif, car plus de 60 % des internautes accèdent à l’internet via leur téléphone portable, et la moitié des transactions de commerce électronique se font par le biais de plateformes mobiles. En outre, le nouvel algorithme de recherche de Google donne la priorité aux sites adaptés aux téléphones portables.

Avoir un site réactif n’aide pas seulement les utilisateurs à naviguer plus facilement sur votre site, mais contribue également à accroître l’engagement et les conversions. Les utilisateurs recommandent des marques avec lesquelles ils ont une expérience positive des sites adaptés aux téléphones portables et, inversement, non seulement ils cessent d’acheter auprès de marques ayant une mauvaise expérience des sites mobiles, mais aussi découragent activement les autres de le faire.

Toutefois, malgré la demande d’un site réactif, on estime que le nombre de 91 % des petites entreprises n’en ont pas. Elles devraient le faire – car le design d’un site web adapté aux téléphones portables est certainement payante. 62 % des entreprises ont fait état d’une augmentation des ventes après avoir conçu un site adapté aux téléphones portables.

Lisez la ressource de Kinsta sur la façon de rendre votre site plus convivial pour les utilisateurs mobiles, ce qui inclut une liste des meilleures extensions WordPress pour les mobiles à télécharger, et n’oubliez pas de consulter cette liste des meilleurs thèmes WordPress, où vous pourrez naviguer à travers de nombreux thèmes réactifs.

Google propose également quelques conseils pour concevoir un site web réactif.

Sécurité du site web

Une autre pratique de codage importante ? Créer des programmes et des sites web sécurisés auxquels les utilisateurs peuvent faire confiance avec leurs informations personnelles sensibles. Contrairement à la croyance populaire, les pirates ne recherchent pas activement des sites web spécifiques à pirater, c’est pourquoi même les petits sites web sont vulnérables aux attaques.

Dans l’ensemble, WordPress est généralement sécurisé, mais il est utile de prendre des précautions supplémentaires pour protéger votre site web contre les attaques.

Voici quelques-unes des meilleures pratiques en matière de sécurité des sites web :

• Obtenez un certificat SSL, ce qui est particulièrement important pour les sites qui traitent des paiements et des informations personnelles. Le certificat SSL crypte les informations envoyées sur les réseaux, de sorte que les pirates ont du mal à les décoder. En outre, il s’agit d’une norme de l’industrie. Chrome avertit les visiteurs lorsque le site qu’ils visitent ne dispose pas d’un certificat SSL. En outre, Chrome déprécie maintenant les anciennes versions de TLS et a commencé à afficher des avertissements supplémentaires. L’activation du HTTPS (qui fait partie de l’installation d’un certificat SSL) est également un facteur de classement officiel de Google.
• Gardez vos identifiants de connexion en lieu sûr. Plusieurs attaques sont causées par des pirates informatiques qui tentent d’accéder par la force à un site web. Il est utile d’avoir un page de connexion séparée/masquée (utilisez l’extension WP Hide Login) et pour limiter le nombre de tentatives de connexion. Utilisez l’extension Login LockDown, qui enregistre l’adresse IP et l’horodatage de chaque tentative de connexion échouée et verrouille la fonction de connexion si le nombre de tentatives échouées de la même plage d’IP est atteint dans un court laps de temps. De plus, créez un mot de passe sécurisé de plus de 6 caractères, composé de lettres majuscules et minuscules, de chiffres et de caractères spéciaux. Changez souvent votre mot de passe. Vous pouvez également utiliser l’authentification à deux facteurs pour vous connecter si vous recherchez une sécurité supplémentaire.
• Maintenez le noyau, les extensions et les thèmes de WordPress à jour. N’oubliez pas de télécharger des extensions ou des thèmes depuis une source réputée. Un bon signe est si l’extension ou le thème a plusieurs installations et a été récemment mis à jour. Vous devriez également lire les avis pour décider par vous-même si l’extension est digne de confiance (assurez-vous de vérifier celles qui sont listées ici). Sur ce point, téléchargez une extension WordPress de sécurité telles que Wordfence, Sucuri, ou Defender, car 73,2 % des installations WordPress les plus populaires et les plus vulnérables peuvent être détectées en utilisant des outils automatisés gratuits. Voici une liste plus détaillée des meilleures extensions de sécurité.
• Utilisez un hôte web sécurisé. Pour ceux qui ne sont pas au courant, il peut sembler que votre hébergeur n’ait rien à voir avec la sécurité du site, mais 41 % des attaques se produisent à travers une faille de sécurité sur la plateforme d’hébergement. Recherchez un fournisseur d’hébergement qui inclut des fonctionnalités telles que : pare-feu côté serveur et cryptage, NGINX ou serveurs web Apache, logiciels antivirus et anti-malware, systèmes de sécurité sur site, et disponibilité de certificats SSL et d’un CDN.

Pour plus d’informations sur la sécurité de WordPress, consultez notre ressource complète sur comment assurer la sécurité de votre site WordPress.

Vitesse de la page

Environ la moitié des utilisateurs s’attendent à ce qu’un site se charge en 2 secondes ou moins, et si cela prend plus de temps, 40 % des gens n’hésiteront pas à quitter la page, (probablement) pour ne jamais y revenir.

Outre les visites sur le site web, la vitesse des pages est importante car elle a également une incidence sur la conversion et les revenus. Pour chaque seconde de vitesse de chargement de page ajoutée, les ventes chutent jusqu’à 27 %. L’augmentation de la vitesse du site web peut éviter la perte de 7 % des conversions possibles.

Voici quelques moyens de rendre vos pages web plus rapides à charger :

• Utiliser un réseau de diffusion de contenu (CDN), qui prend des fichiers statiques comme des images, des CSS et des JavaScript, et les livre sur les serveurs les plus proches de l’emplacement physique de l’utilisateur.
• Réfléchissez à la façon dont vous utilisez les images. Le site web moyen utilise 1,8 Mo d’images, ce qui représente 60 % de la taille d’un site. Pour y parvenir, reconsidérez la façon dont vous disposez de votre page web. Si vous souhaitez conserver une vitesse de page élevée, essayez de réduire le nombre de grandes images utilisées dans votre design et veillez à les optimiser.
• Si votre site web doit utiliser beaucoup de grandes images, utilisez des extensions qui incluent des fonctionnalités pour la compression GZIP, la mise en cache ou l’optimisation des images, comme WP Rocket et Imagify. Elles peuvent vous aider à réduire la taille de vos fichiers (sans sacrifier la qualité) afin qu’ils se chargent plus rapidement.
• Tenez compte du nombre d’extensions et de fichiers que vous conservez dans votre base de données WordPress, car cela peut également affecter la vitesse de chargement des pages. Nettoyez celles que vous n’utilisez pas. Tant que vous y êtes, gardez votre PHP, noyau WordPress, et extensions à jour dans leurs dernières versions.

Consultez notre ressource complète pour l’optimisation de la vitesse des sites web.

Normes d’accessibilité

L’internet a été conçu pour fonctionner pour tous, quels que soient le matériel, les logiciels, la langue utilisée ou la localisation. Cependant, beaucoup sacrifient l’accessibilité pour un beau design.

L’accessibilité désigne la pratique consistant à rendre votre site web utilisable par tous.

En plus des personnes handicapées qui affectent l’accès, Selon le W3, l’accessibilité des sites web est également bénéfique pour :

• Ceux qui utilisent des appareils avec de petits écrans, différents modes d’entrée, etc.
• Les personnes âgées.
• Les personnes souffrant d’un « handicap temporaire », notamment un membre cassé, la perte de lunettes ou un problème médical.
• Les utilisateurs présentant des « limitations situationnelles », comme ceux qui accèdent à l’internet sur des appareils en plein soleil ou dans un environnement où ils ne peuvent pas écouter le son, comme les transports publics.
• Les personnes ayant une connexion Internet lente.

L’accessibilité devrait être l’affaire de tous, car nous sommes tous concernés d’une manière ou d’une autre.

Raisons de rendre votre site accessible

Vous n’êtes toujours pas sûr qu’il vaille la peine de consacrer votre temps à l’accessibilité dans cette discussion sur les meilleures pratiques en matière de design web ?

Considérez ces raisons :

• C’est une exigence de l’ADA. L’Americans with Disabilities Act (ADA) a été adopté en 1990 pour protéger les droits civils des personnes handicapées contre la discrimination. Elle couvre des domaines tels que les transports, les télécommunications, l’emploi et même les codes de construction. Comme cette loi a été adoptée il y a près de 30 ans – à une époque où l’internet n’était pas aussi omniprésent – les législateurs sont en voie de la modifier.
• Cela favorise l’inclusion. Une enquête du Pew Research Center montre que les personnes handicapées ont trois fois moins de chances d’aller en ligne que leurs homologues non handicapés, ce qui est dommage car les statistiques montrent qu’environ 30 % des professionnels ont un handicap, et 62 % des personnes handicapées « volent sous le radar » par crainte de préjugés négatifs.
• Cela vous aidera à gagner plus d’affaires. En étant plus inclusif, vous ferez entrer un réseau de personnes handicapées, qui représente 7 000 milliards de dollars de revenu disponible
• C’est un avantage SEO. Les moteurs de recherche récompensent les sites web qui sont conformes à l’accessibilité afin d’encourager un plus grand nombre de sites web à être accessibles.

Comment rendre votre site web plus accessible

Un moyen simple de rendre votre site web plus accessible est d’installer l’extension WP Accessibility, qui ajoute des fonctionnalités d’accessibilité, notamment

• Une barre d’outils où les utilisateurs peuvent redimensionner les polices et visualiser votre site en contraste élevé et en niveaux de gris.
• Comparer le contraste des couleurs pour vérifier s’il correspond à la norme de l’ADA.
• Supprimer les attributs de titre des images insérées dans le contenu. La plupart des lecteurs d’écran ne sont pas capables de le ressentir et lisent plutôt le texte d’ancrage.
• Activer les liens de saut, qui sont des liens de page interne permettant aux utilisateurs de passer directement au contenu, ce qui est utile pour les personnes utilisant des lecteurs d’écran.

Quelques mesures supplémentaires à prendre :

• Ajoutez des sous-titres ou une transcription si votre site produit des médias tels que audio, livres audio, vidéos, podcasts, etc., au profit des sourds/muets, ainsi que des personnes qui veulent consommer vos contenus mais ne peuvent pas consommer les médias en public.
• Créez des liens et des menus accessibles par clavier pour les personnes ayant un handicap moteur et ne pouvant utiliser qu’un clavier (pas de souris) pour naviguer sur votre site. Les menus déroulants sont déconseillés, mais vous pouvez y remédier en attribuant des raccourcis pour chaque élément du menu déroulant (comme : appuyez sur « 1 » pour la page d’accueil, « 2 » pour la page « à propos », etc.)
• Enfin, testez votre site pour vérifier son accessibilité. L’initiative pour l’accessibilité du web ne cautionne aucun outil spécifique mais propose plutôt une liste d’outils que vous pouvez utiliser pour contrôler vos efforts.

Dernières réflexions : Meilleures pratiques de design de sites web pour votre prochain projet de site

Les bons sites web ne doivent pas être définis par un design objectivement bon. La convivialité du site, la facilité de navigation et l’accessibilité sont tout aussi importantes. Grâce à ces meilleures pratiques de design web, vous avez tout ce qu’il faut pour créer quelque chose qui a de l’allure et qui fonctionne bien.

Gardez simplement à l’esprit qu’il s’agit là des meilleures pratiques en matière de design de sites web. Il est probable que vous ne puissiez pas suivre exactement chacune d’entre elles, selon la nature de votre site web. Mais avant de pouvoir enfreindre les règles, il est utile de savoir au moins pourquoi elles existent.

Avons-nous manqué quelque chose d’important ? Partagez vos meilleures pratiques de design web dans les commentaires ci-dessous !

Lecture suggérée : Les meilleurs cours de conception web en ligne