Fermer

décembre 10, 2020

Rendre les sites Web plus faciles à consulter


À propos de l’auteur

Frederick O’Brien est un journaliste indépendant qui se conforme à la plupart des stéréotypes britanniques. Ses intérêts incluent la littérature américaine, le graphisme, le développement durable…
En savoir plus sur
Frédéric

Les sites Web modernes ne sont plus inséparables 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 correctement. 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 les humains.

Les assistants téléphoniques et les haut-parleurs domestiques sont une partie croissante de l'écosystème Internet. Dans cet article, j'essaierai d'expliquer 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é. Plus des deux tiers du Web sont inaccessibles aux malvoyants après tout. Il est temps de rendre les sites Web faciles d'accès.

Invasion Of The Home Speakers

Les ventes mondiales d'enceintes intelligentes ont dépassé 147 millions en 2019 et pandémie ou pas de pandémie, la tendance est à la hausse. Parler est plus rapide que taper, après tout. De Google Home à Alexa en passant par les assistants pour smartphones, les voitures et même les réfrigérateurs, de plus en plus de personnes utilisent des programmes pour rechercher sur le Web en leur nom .

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

Si l'on met de côté les nuances plutôt inquiétantes de Big Brother Inc de cette tendance, on peut dire que des centaines de millions de personnes explorent déjà le Web chaque jour sans vraiment le regarder. Les écrans ne sont plus indispensables à la navigation sur 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 existe deux volets principaux au sujet de la conversation sur un site Web: la technologie et le langage. Commençons par la technologie, qui gère le gant de la structure de contenu de base au balisage sémantique et au-delà. Je suis aussi enthousiaste que quiconque pour la bonne écriture, mais ce n’est pas le bon endroit pour commencer. 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 annotée correctement, elle ne vaudra pas grand-chose pour personne.

Age Old Foundations

sans être vu n'est pas nouveau. 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'objet de cet article va plus loin que cela, mais en faisant l'écran des sites Web Le lecteur convivial fournit une base solide pour les choses plus chics 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 voici des choses auxquelles vous devriez toujours penser:

  • Navigation claire dans la page et sur le site.
  • Aligner DOM structure avec design visuel.
  • Texte alternatif, pas plus de 16 mots ou plus, si une image n'a pas besoin de texte alternatif (si c'est un arrière-plan par exemple) avoir un texte alternatif vide, pas non texte alternatif .
  • Hyperliens descriptifs.
  • 'Passer aux liens de contenu'.

La pensée visuelle nous aveugle en fait à de nombreux défauts de conception. Les utilisateurs peuvent et font souvent assembler les éléments eux-mêmes, mais cela ne fait pas grand-chose pour les sites Web lisibles par machine. Rendre les sites Web faciles à utiliser commence par les rendre conviviaux pour la synthèse vocale (TTS). C'est une bonne pratique et cela améliore considérablement l'accessibilité. Win win.

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

Fancier Stuff

En plus de jeter des bases solides, la conception pour les lecteurs d'écran et l'accessibilité est bonne pour elle-même. C’est une raison suffisante pour le mentionner en premier. Cependant, cela ne permet pas tout à fait l’augmentation de la navigation «mains libres» dont j’ai parlé au début de cet article. Interfaces utilisateur vocales ou VUI. Pour cela, nous devons creuser 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 personnel 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 l'information. Maintenant. Pour que cela se produise, les informations sur les sites Web doivent être clairement identifiées.

J'ai plutôt dégringolé le terrier du Web 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 la conversation.

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, je et deux amis passent en revue 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 que l'on parle en action:

 {
  "@context": "http://schema.org",
  "@type": "Révision",
  "reviewBody": "C'est une musique haletante et explosive, le genre de truc qui oblige les auditeurs à choisir un instrument ou à créer un groupe. Origin of Symmetry écoute comme un jam spectaculaire - avec toute l'énergie impolie, inégale et effrontée que cela implique - et dans l'ensemble, c'est plutôt génial, mec. ",
  "datePublished": "2015-05-23",
  "auteur": [
    {
    "@type": "Person",
    "name": "André Dack"
    },
    {
    "@type": "Person",
    "name": "Frederick O'Brien"
    },
    {
    "@type": "Person",
    "name": "Andrew Bridge"
    }
  ],
  "itemReviewed": {
    "@type": "MusicAlbum",
    "name": "Origine de la symétrie",
    "@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": "http://schema.org/AlbumRelease",
    "byArtist": {
    "@type": "MusicGroup",
    "nom": "Muse",
    "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090"
    }
  },
  "reviewRating": {
    "@type": "Note",
    "ratingValue": 26,
    "pireRating": 0,
    "bestRating": 30
  },
  "speakable": {
    "@type": "SpeakableSpecification",
    "cssSelector": [
    ".review-header__album",
    ".review-header__artist",
    ".review-sidebar__summary"
    ]
  }
} 

Donc, si quelqu'un demande à son assistant de haut-parleur ce que Audioxide a pensé Origin of Symmetry de Muse, speakable devrait le diriger vers le nom de l'album, l'artiste et la morsure – résumé de la taille de l'examen. Pratique et au point. (Et épargne aux gens l'épreuve d'écouter nos résumés complets.) Il n'y a rien là qui n'existait pas auparavant; il est juste étiqueté correctement. Vous remarquerez également que choisir une classe CSS suffit. 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 bien 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

Au-delà de cela, les grands cerveaux des endroits comme Google et Mozilla travaillent d'arrache-pied sur des API de discours Web dédiées permettant des interactions utilisateur plus sophistiquées avec des éléments comme les formulaires et les contrôles. C'est le début de la 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. Prévoir l'un pourvoit l'autre. N'oublions pas que les sites Web sont censés être conçus pour les lecteurs d'écran depuis des décennies.

Lectures complémentaires

É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, etc. ce bon truc. Toutes nos félicitations. Nous arrivons 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 majeur à garder à l'esprit est qu'en ce qui concerne les requêtes vocales, les sites Web sont presque toujours réactifs – répondre aux questions, donner des recettes, confirmer les commandes.

Une étude d'Open NYT a révélé que pour les utilisateurs domestiques interagissent avec leurs haut-parleurs intelligents entraînent parfois des échanges frustrants, voire amusants, mais cela semble être une meilleure expérience que d'être attaché à un téléphone qui envoie des notifications. »

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

Ce que cela signifie en termes linguistiques est:

  • Phrases succinctes,
  • Langage simple et clair,
  • Informations chargées en façade (pensez à pyramide inversée ) ),
  • Formulation des réponses sous forme de phrases complètes.

Dites ce que vous écrivez à haute voix, ayez des systèmes de synthèse vocale gratuits comme TTSReacher vous le redites. Les mots peuvent sembler très différents à haute voix de ce qu'ils sont écrits, et vice versa. J'ai mes réserves sur les algorithmes de lisibilité mais ce sont des outils utiles pour évaluer la clarté.

Lectures complémentaires

HAL, Without The Bad Bits

Parler avec les sites Web fait partie d'un changement plus large vers des expériences Web indépendantes du canal. La nature des sites Web évolue. Du bureau au mobile, et des systèmes mobiles aux systèmes domestiques intelligents, ils deviennent de plus en plus fluides. Nous connaissons tous l’indexation «mobile first». Combien de temps avant que ce soit la «voix d’abord»?

S'éloigner des contraintes rigides est intimidant, mais aussi libérateur. Nous regardons des 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 de le concevoir.

Voici les mesures que nous pouvons prendre pour rendre les sites Web plus faciles à consulter, que ce soit en construisant à partir de zéro ou mise à jour d'anciens projets:

  • Naviguez sur votre site à l'aide de lecteurs d'écran.
  • Essayez des requêtes vocales via des assistants téléphoniques / domestiques.
  • Utilisez un balisage sémantique.
  • Implémentez un balisage parlable.

La conception de sites Web pour des situations sans écran améliore leur l'accessibilité, mais il aiguise également leur personnalité, leur but et leur utilité. Comme Preston So écrit 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 à utiliser les prépare au Web indépendant du canal, qui devient rapidement une réalité. Plutôt que du texte et des éléments visuels sur un écran, les sites doivent être abstraits et flexibles, prêts à interagir avec une gamme toujours croissante d'appareils.

 Smashing Editorial (ra, yk, il)






Source link