Hacer que los sitios web sean más fáciles de hablar

Un sitio web sin pantalla no suena bien, ¿verdad? Como un libro sin páginas, o un coche sin volante. Sin embargo, hay audiolibros, vehículos manos libres. Y cada vez más, los sitios web se usan sin siquiera mirarlos, al menos los humanos.

Los asistentes telefónicos y los altavoces domésticos son una parte cada vez mayor del ecosistema de Internet. En el artículo, intentaré desglosar lo que eso significa para los sitios web en el futuro, lo que los diseñadores pueden hacer al respecto y por qué esto finalmente podría ser un gran avance hacia la accesibilidad. Después de todo, más de dos tercios de la web son inaccesibles para las personas con discapacidad visual. Es hora de hacer que los sitios web sean fáciles de usar.

Invasión de los altavoces domésticos

Las ventas mundiales de altavoces inteligentes superaron los 147 millones en 2019 y, con o sin pandemia, la tendencia va en aumento. Después de todo, hablar es más rápido que escribir. Desde Google Home hasta Alexa, asistentes de teléfonos inteligentes, automóviles e incluso refrigeradores, cada vez más personas usan programas para buscar en la web en su nombre.

Dejando a un lado los matices bastante siniestros de Big Brother Inc de esta tendencia, es seguro decir que cientos de millones de personas ya están explorando la web todos los días sin realmente mirarla. Las pantallas ya no son esenciales para navegar por la web y los sitios deben adaptarse a esta nueva realidad. Los que no lo hacen se están aislando de cientos de millones de personas.

Los desarrolladores, diseñadores y escritores por igual deben estar preparados para la posibilidad de que su trabajo no se vea ni se haga clic en él, se escuchará y se hablará.

“

Diseñando la invisibilidad

Hay dos puntas principales en el tema de la conversación del sitio web: la tecnología y el idioma. Comencemos con la tecnología, que va desde la estructura básica del contenido hasta el marcado semántico y más allá. Estoy tan interesado en la buena escritura como cualquiera, pero no es el lugar para empezar. Podría tener una copia del sitio web digna de una actuación de Daniel Day-Lewis, pero si no está organizada y marcada correctamente, no valdrá mucho para nadie.

Fundamentos antiguos

La idea de que los sitios web se entiendan sin ser vistos no es nueva. Los lectores de pantalla han existido durante décadas, con dos tercios de los usuarios eligiendo el habla como su salida, y el tercio final eligiendo braille.

El enfoque de este artículo va más allá, pero hacer que los sitios web sean fáciles de leer proporciona una base sólida para las cosas más sofisticadas a continuación. No me detendré demasiado en esto, ya que otros han escrito extensamente sobre el tema (enlaces a continuación), pero a continuación hay cosas en las que siempre debe pensar:

• Navegación clara en la página y en todo el sitio.
• Alinee la estructura DOM con el diseño visual.
• Texto alternativo, no más de 16 palabras, si una imagen no necesita texto alternativo (si es un fondo, por ejemplo) tenga texto alternativo vacío, no sin texto alternativo.
• Hipervínculos descriptivos.
• 'Saltar a enlaces de contenido'.

El pensamiento visual en realidad nos ciega a muchas fallas de diseño. Los usuarios pueden, ya menudo lo hacen, juntar las piezas ellos mismos, pero eso no ayuda mucho a los sitios web legibles por máquina. Hacer que los sitios web sean fáciles de usar comienza con hacerlos compatibles con texto a voz (TTS). Es una buena práctica y mejora enormemente la accesibilidad. ganar ganar

Lectura adicional sobre diseño y accesibilidad de TTS

• Texto a voz por W3C
• Front End North Pt 2: Leonie Watson me voló la cabeza
• Texto a voz con AWS (Parte 1)
• Texto a voz y viceversa con AWS (Parte 2)
• Notas sobre la accesibilidad representada por el cliente
• Controles de etiquetado por el W3C
• Uso del atributo aria-label de Mozilla
• Usé la web por un día usando un lector de pantalla
• De los expertos: Desarrollos globales de accesibilidad digital durante COVID-19

Cosas más elegantes

Además de sentar una base sólida, diseñar para lectores de pantalla y accesibilidad es bueno por sí mismo. Esa es razón suficiente para mencionarlo primero. Sin embargo, no proporciona el repunte de la navegación 'manos libres' de la que hablé al comienzo de este artículo. Interfaces de usuario de voz o VUI. Para eso tenemos que profundizar en el marcado semántico.

Hacer que los sitios web sean fáciles de hablar significa etiquetar el contenido a un nivel mucho más granular. Cuando las personas le preguntan a su asistente del hogar las últimas noticias, una receta o si ese restaurante está abierto el martes por la noche, no quieren navegar por un sitio web usando su voz. Quieren la información. Ahora. Para que eso suceda, la información en los sitios web debe estar claramente etiquetada.

Este año he caído en la madriguera del conejo de la Web Semántica, y no tengo la intención de repetirme aquí. La web puede y debe aspirar a ser legible por máquina, y eso incluye la conversación.

El marcado semántico ya existe para esto. Uno se llama 'hablable', una propiedad de Schema.org actualmente en versión beta que resalta las partes de una página web que son 'especialmente apropiadas para la conversión de texto a voz'.

Por ejemplo, dos amigos y yo revisamos un álbum a la semana como pasatiempo. Recientemente rediseñamos el sitio web con marcado semántico integrado. A continuación, se muestra una parte de los datos estructurados de una página que muestra Speakable en acción:

 { "@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" ] } }

Por lo tanto, si alguien le pregunta a su asistente de altavoces en casa qué piensa Audioxide de Origin of Symmetry de Muse, Speakable debe dirigirlo al nombre del álbum, el artista y el resumen de la reseña. Conveniente y al grano. (Y ahorra a la gente la terrible experiencia de escuchar nuestros resúmenes completos). No hay nada que no haya antes; simplemente está etiquetado correctamente. También notará que elegir una clase CSS es suficiente. Fácil.

Este tipo de funcionalidad se presta mejor a ciertos tipos de sitios que a otros, pero las posibilidades son amplias. Recetas, noticias, disponibilidad de boletos, información de contacto, compras de comestibles... todas estas cosas y más se pueden mejorar si solo nos acostumbramos a hacer que los sitios web sean más fáciles de hablar, cada página repleta de información claramente estructurada y etiquetada lista y esperando. para responder consultas cuando se les presente.

Más allá de eso, los grandes cerebros en lugares como Google y Mozilla están trabajando arduamente en API de voz web dedicadas, lo que permite interacciones de usuario más sofisticadas con cosas como formularios y controles. Son los primeros días para tecnología como esta, pero absolutamente algo a lo que hay que estar atento.

El auge de los altavoces domésticos significa que los mundos antiguo y nuevo están chocando. Proveer para uno provee para el otro. No olvidemos que se supone que los sitios web han sido diseñados para lectores de pantalla durante décadas.

Otras lecturas

• Aplicaciones web que hablan: introducción a la API de síntesis de voz
• Conceptos y uso de Web Speech por Mozilla
• ¿Qué son las interfaces de usuario de voz? Por la Fundación de Diseño de Interacción

escribir para hablar

Has tomado medidas para que los lectores de pantalla, los motores de búsqueda y todas esas cosas buenas entiendan mejor tu sitio web. Felicidades. Ahora llegamos a los temas más confusos del tono y la personalidad.

Diseñar un sitio web para hablar es diferente a diseñarlo para ser leído. La naturaleza de las interacciones del usuario es diferente. Un punto importante a tener en cuenta es que, en lo que respecta a las consultas de voz, los sitios web casi siempre responden: responden preguntas, dan recetas, confirman pedidos.

Un estudio de Open NYT encontró que para los usuarios domésticos "interactuar con sus parlantes inteligentes a veces resulta en intercambios frustrantes, o incluso divertidos, pero se siente como una mejor experiencia que estar atado a un teléfono que envía notificaciones".

En otras palabras, no puede ni debe forzar el problema. El espíritu de mírame de las ventanas emergentes y los anuncios y el compromiso sin fin no tienen cabida aquí. Su tarea es tener un buen sitio que brinde información a pedido de la manera más clara y sucinta posible. Un mayordomo virtual, por así decirlo.

Lo que esto significa en términos lingüísticos es:

• oraciones breves,
• Lenguaje claro y sencillo,
• Información de carga frontal (piense en una pirámide invertida),
• Formular las respuestas como oraciones completas.

Di lo que escribes en voz alta, haz que los sistemas gratuitos de texto a voz como TTSReacher te lo respondan. Las palabras pueden sonar muy diferentes en voz alta que cuando están escritas, y viceversa. Tengo mis reservas sobre los algoritmos de legibilidad, pero son herramientas útiles para medir la claridad.

Otras lecturas

• 'Pruebas de legibilidad para contenido de voz' en una lista aparte
• Los elementos del estilo de William Strunk Jr.

HAL, sin las partes malas

Hablar con sitios web es parte de un cambio más amplio hacia experiencias web independientes del canal. La naturaleza de los sitios web está cambiando. Desde el escritorio hasta el móvil, y desde el móvil hasta los sistemas domésticos inteligentes, se están volviendo más fluidos. Todos conocemos la indexación 'móvil primero'. ¿Cuánto tiempo hasta que sea 'la voz primero'?

Alejarse de las restricciones rígidas es desalentador, pero también es liberador. Miramos sitios web, los escuchamos, les hablamos. Cada uno es como un pequeño HAL, con tanta o poca personalidad y/o intenciones asesinas como creamos conveniente diseñar en él.

Estos son los pasos que podemos seguir para que sea más fácil hablar con los sitios web, ya sea construyendo desde cero o actualizando proyectos antiguos:

• Navegue por su sitio usando lectores de pantalla.
• Pruebe consultas vocales a través de asistentes telefónicos o domésticos.
• Usa el marcado semántico.
• Implementar marcado hablado.

El diseño de sitios web para situaciones sin pantalla mejora su accesibilidad, pero también agudiza su personalidad, su propósito y su utilidad. Como escribe Preston So para A List Apart , "es una forma efectiva de analizar y hacer pruebas de estrés de cuán agnóstico del canal es realmente su contenido".

Hacer que sus sitios web sean fáciles de hablar los prepara para la web independiente del canal, que se está convirtiendo rápidamente en una realidad. En lugar de texto e imágenes en una pantalla, los sitios deben ser abstractos y flexibles, listos para interactuar con una gama cada vez mayor de dispositivos.