Rendre les sites Web plus faciles à consulter

Publié: 2022-03-10
Résumé rapide ↬ Les sites Web modernes ne sont plus indissociables des écrans. Entre les assistants téléphoniques, les haut-parleurs domestiques et les lecteurs d'écran, de plus en plus de personnes utilisent le Web sans même le regarder. Les sites Web doivent évoluer en nature.

Un site Web sans écran ne sonne pas bien, n'est-ce pas. Comme un livre sans pages, ou une voiture sans volant. Pourtant, il existe des livres audio, des véhicules mains libres. Et de plus en plus de sites Web sont utilisés sans même être consultés, du moins par des humains.

Les assistants téléphoniques et les haut-parleurs domestiques constituent une part croissante de l'écosystème Internet. Dans l'article, je vais essayer de décomposer ce que cela signifie pour les sites Web à l'avenir, ce que les concepteurs peuvent faire à ce sujet et pourquoi cela pourrait enfin être un bond en avant vers l'accessibilité. Après tout, plus des deux tiers du Web sont inaccessibles aux personnes malvoyantes. Il est temps de rendre les sites Web faciles à consulter.

Invasion des orateurs de maison

Les ventes mondiales des orateurs intelligents ont précisé 147 millions en 2019 et la pandémie ou aucune pandémie de la tendance. Parler est plus rapide que taper, après tout. De Google Home à Alexa en passant par les assistants de smartphone, les voitures et même les réfrigérateurs, de plus en plus de personnes utilisent des programmes pour effectuer des recherches sur le Web en leur nom.

Capture d'écran de l'adaptation cinématographique de "1984" de George Orwell.
Tests utilisateurs pour la prochaine génération d'enceintes domestiques Google. ( Grand aperçu )

Mis à part les sous-entendus plutôt inquiétants de Big Brother Inc. de cette tendance, on peut dire sans risque de se tromper que des centaines de millions de personnes explorent déjà le Web chaque jour sans vraiment le regarder. Les écrans ne sont plus essentiels pour parcourir le Web et les sites doivent s'adapter à cette nouvelle réalité. Ceux qui ne le font pas se coupent de centaines de millions de personnes.

Les développeurs, les concepteurs et les écrivains doivent être préparés à la possibilité que leur travail ne soit pas vu ou cliqué du tout - il sera entendu et parlé.

"

Concevoir l'invisibilité

Il y a deux volets principaux au sujet de la conversation sur les sites Web - la technologie et la langue. Commençons par la technologie, qui couvre tout le chemin, de la structure de base du contenu au balisage sémantique et au-delà. Je suis aussi désireux de bien écrire que n'importe qui, mais ce n'est pas le point de départ. Vous pourriez avoir une copie de site Web digne d'une performance de Daniel Day-Lewis, mais si elle n'est pas arrangée et balisée correctement, elle ne vaudra pas grand-chose pour personne.

Fondations séculaires

L'idée que les sites Web soient compris sans être vus n'est pas nouvelle. Les lecteurs d'écran existent depuis des décennies, les deux tiers des utilisateurs choisissant la parole comme sortie, le dernier tiers choisissant le braille.

L'objectif de cet article va plus loin que cela, mais rendre les sites Web conviviaux pour les lecteurs d'écran fournit une base solide pour les éléments plus sophistiqués ci-dessous. Je ne m'attarderai pas trop longtemps sur ce sujet car d'autres ont beaucoup écrit sur le sujet (liens ci-dessous), mais vous trouverez ci-dessous des éléments auxquels vous devriez toujours penser :

  • Navigation claire dans la page et sur le site.
  • Alignez la structure DOM avec la conception visuelle.
  • Texte alternatif, pas plus de 16 mots environ, si une image n'a pas besoin de texte alternatif (s'il s'agit d'un arrière-plan par exemple), ayez un texte alternatif vide, pas de texte alternatif.
  • Hyperliens descriptifs.
  • 'Passer aux liens de contenu'.

La pensée visuelle nous aveugle en fait sur de nombreux défauts de conception. Les utilisateurs peuvent et souvent mettre les morceaux ensemble, mais cela ne fait pas grand chose pour des sites Web lisibles par machine. Rendre les sites Web faciles à consulter commence par les rendre compatibles avec la synthèse vocale (TTS). C'est une bonne pratique et cela améliore massivement l'accessibilité. Gagner gagner.

Lectures complémentaires sur la conception et l'accessibilité TTS

  • Synthèse vocale par W3C
  • Front End North Pt 2: Leonie Watson m'a époustouflé
  • Text-To-Speech avec AWS (Partie 1)
  • Text-To-Speech et retour avec AWS (Partie 2)
  • Remarques sur l'accessibilité rendue par le client
  • Commandes d'étiquetage par le W3C
  • Utilisation de l'attribut aria-label de Mozilla
  • J'ai utilisé le Web pendant une journée à l'aide d'un lecteur d'écran
  • De la part des experts : Développements mondiaux de l'accessibilité numérique pendant la COVID-19

Trucs plus fantaisistes

En plus de jeter une base solide, la conception de lecteurs d'écran et d'accessibilité est bonne pour son propre amour. C'est une raison suffisante pour le mentionner en premier. Cependant, il ne fournit pas tout à fait à la hausse de la navigation «mains libres» que j'ai parlé au début de cette pièce. Interfaces utilisateur vocales ou VUI. Pour cela, nous devons creuser dans le balisage sémantique.

Rendre les sites Web faciles à consulter signifie étiqueter le contenu à un niveau beaucoup plus granulaire. Lorsque les gens demandent à leur assistant à domicile les dernières nouvelles, ou une recette, ou si ce restaurant est ouvert le mardi soir, ils ne veulent pas naviguer sur un site Web en utilisant leur voix. Ils veulent les informations. À présent. Pour que cela se produise, les informations sur les sites Web doivent être clairement étiquetées.

J'ai plutôt chuté le trou de lapin de la bande sémantique cette année et je n'ai pas l'intention de me répéter ici. Le Web peut et doit aspirer à être lisible par machine, et cela inclut le bavardage.

Plus après saut! Continuez à lire ci-dessous ↓

Le balisage sémantique existe déjà pour cela. L'une est appelée "speakable", une propriété Schema.org actuellement en version bêta qui met en évidence les parties d'une page Web qui sont "particulièrement appropriées pour la conversion de texte en parole".

Par exemple, moi et deux amis révisons un album par semaine comme passe-temps. Nous avons récemment repensé le site Web avec un balisage sémantique intégré. Vous trouverez ci-dessous une partie des données structurées d'une page montrant speakable en action :

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

Ainsi, si quelqu'un demande à son assistant à domicile ce qu'Audioxide pense de Origin of Symmetry de Muse, speakable doit le diriger vers le nom de l'album, l'artiste et le résumé succinct de la critique. Commode et au point. (Et épargnait les gens l'épreuve d'écouter nos résumés complets.) Rien n'est là que ce n'était pas là auparavant; C'est juste étiqueté correctement. Vous remarquerez également que le choix d'une classe CSS est suffisant. Facile.

Ce type de fonctionnalité se prête mieux à certains types de sites que d'autres, mais les possibilités sont vastes. Recettes, actualités, disponibilité des billets, coordonnées, épicerie… toutes ces choses et plus encore peuvent être améliorées si seulement nous prenons l'habitude de rendre les sites Web plus faciles à consulter, chaque page contenant des informations clairement structurées et étiquetées prêtes et en attente pour répondre aux questions lorsqu'elles se présentent.

Au-delà de cela, les gros cerveaux d'endroits comme Google et Mozilla travaillent dur sur des API vocales Web dédiées, permettant des interactions utilisateur plus sophistiquées avec des éléments tels que les formulaires et les contrôles. C'est le début pour une technologie comme celle-ci, mais il faut absolument garder un œil sur.

La montée en puissance des haut-parleurs domestiques signifie que l'ancien et le nouveau monde entrent en collision. Pourvoir à l'un pourvoir à l'autre. N'oublions pas que les sites Web sont censés avoir été conçus pour les lecteurs d'écran pendant des décennies.

Lectures complémentaires

  • Des applications Web qui parlent — Introduction à l'API de synthèse vocale
  • Concepts et utilisation de la parole Web par Mozilla
  • Que sont les interfaces utilisateur vocales ? Par la Fondation Interaction Design

Écrire pour parler

Vous avez pris des mesures pour que votre site Web soit mieux compris par les lecteurs d'écran, les moteurs de recherche et toutes ces bonnes choses. Toutes nos félicitations. Passons maintenant aux sujets plus flous du ton et de la personnalité.

Concevoir un site Web pour parler est différent de le concevoir pour être lu. La nature des interactions des utilisateurs est différente. Un point important à garder à l'esprit est qu'en ce qui concerne les requêtes vocales, les sites Web sont presque toujours réactifs - répondant aux questions, donnant des recettes, confirmant les commandes.

Une étude OPEN NYT a révélé que les utilisateurs des ménages en interaction avec leurs orateurs intelligents entraînent parfois des échanges frustrants, voire drôles, mais qui ressemblent à une meilleure expérience que d'être attachée à un téléphone qui pousse des notifications. '

En d'autres termes, vous ne pouvez pas et ne devez pas forcer le problème. L'éthique du regard sur moi des pop-ups et des publicités et l'engagement sans fin n'ont pas leur place ici. Votre tâche a un bon site qui donne des informations sur la commande clairement et succinctement que possible. Un majordome virtuel, si vous voulez.

Ce que cela signifie en termes linguistiques est :

  • Phrases succinctes,
  • Langage clair et simple,
  • Informations préchargées (pensez pyramide inversée),
  • Formuler les réponses sous forme de phrases complètes.

Dites ce que vous écrivez fort, disposez de systèmes textuels gratuits tels que TtsReacher le disent. Les mots peuvent sonner très différemment à haute voix qu'ils ne le sont par écrit, et vice versa. J'ai mes réservations sur les algorithmes de lisibilité, mais ils sont des outils utiles pour jauger la clarté.

Lectures complémentaires

  • 'Test de lisibilité pour le contenu vocal' sur une liste à part
  • Les éléments de style de William Strunk Jr.

Hal, sans les mauvais morceaux

Parler avec des sites Web fait partie d'une évolution plus large vers des expériences Web indépendantes du canal. La nature des sites Web évolue. De l'ordinateur de bureau au mobile, et du mobile aux systèmes de maison intelligente, ils deviennent plus fluides. Nous connaissons tous l'indexation « mobile-first ». Combien de temps jusqu'à ce que ce soit "la voix d'abord" ?

S'éloigner des contraintes rigides est intimidant, mais c'est aussi libérateur. Nous regardons les sites Web, nous les écoutons, nous leur parlons. Chacun est comme un petit HAL, avec autant ou peu de personnalité et/ou d'intention meurtrière que nous jugeons bon d'y concevoir.

Voici les mesures que nous pouvons prendre pour rendre les sites Web plus faciles à consulter, qu'il s'agisse de créer à partir de rien ou de mettre à jour d'anciens projets :

  • Naviguez sur votre site à l'aide de lecteurs d'écran.
  • Essayez les requêtes vocales via des assistants téléphoniques/à domicile.
  • Utilisez le balisage sémantique.
  • Mettre en œuvre le balisage locatif.

Concevoir des sites Web pour des situations sans écran améliore leur accessibilité, mais cela aiguise également leur personnalité, leur objectif et leur utilité. Comme l'écrit Preston So pour A List Apart , "c'est un moyen efficace d'analyser et de tester à quel point votre contenu est vraiment indépendant du canal".

Rendre vos sites Web faciles à consulter les prépare au Web indépendant des canaux, qui devient rapidement une réalité. Plutôt que du texte et des visuels sur un écran, les sites doivent être abstraits et flexibles, prêts à interagir avec une gamme toujours croissante d'appareils.