Rendere i siti Web più facili con cui parlare

Un sito web senza schermo non suona bene, lo fa. Come un libro senza pagine, o un'auto senza volante. Eppure ci sono audiolibri, veicoli a mani libere. E sempre più siti Web vengono utilizzati senza nemmeno essere guardati, almeno dagli esseri umani.

Gli assistenti telefonici e gli altoparlanti domestici sono una parte crescente dell'ecosistema di Internet. Nell'articolo, cercherò di analizzare cosa significa per i siti Web in futuro, cosa possono fare i designer al riguardo e perché questo potrebbe finalmente essere un balzo in avanti verso l'accessibilità. Dopotutto, più di due terzi del web è inaccessibile alle persone con disabilità visive. È ora di rendere i siti Web facili da comunicare.

Invasione degli altoparlanti domestici

Le vendite globali di altoparlanti intelligenti hanno superato i 147 milioni nel 2019 e pandemia o nessuna pandemia la tendenza è in aumento. Dopotutto, parlare è più veloce che digitare. Da Google Home ad Alexa, agli assistenti per smartphone, alle auto e persino ai frigoriferi, sempre più persone utilizzano programmi per effettuare ricerche sul Web per loro conto.

Mettendo da parte le sfumature piuttosto minacciose del Grande Fratello Inc di questa tendenza, è sicuro dire che centinaia di milioni di persone stanno già esplorando il Web ogni giorno senza guardarlo effettivamente. Gli schermi non sono più essenziali per navigare sul web e i siti dovrebbero adattarsi a questa nuova realtà. Quelli che non lo fanno si isolano da centinaia di milioni di persone.

Sviluppatori, designer e scrittori allo stesso modo dovrebbero essere preparati alla possibilità che il loro lavoro non venga visto o cliccato affatto, ma venga ascoltato e parlato.

“

Progettare l'invisibilità

Ci sono due poli principali nell'argomento del parlato del sito Web: tecnologia e linguaggio. Cominciamo con la tecnologia, che gestisce il guanto di sfida dalla struttura del contenuto di base al markup semantico e oltre. Sono appassionato di buona scrittura come chiunque altro, ma non è il punto di partenza. Potresti avere una copia del sito web degna di una performance di Daniel Day-Lewis, ma se non è organizzata e contrassegnata correttamente non varrà molto per nessuno.

Fondamenti secolari

L'idea che i siti web vengano compresi senza essere visti non è nuova. I lettori di schermo sono in circolazione da decenni, con due terzi degli utenti che scelgono la voce come output, con l'ultimo terzo che sceglie il braille.

L'obiettivo di questo articolo va oltre, ma rendere i siti Web compatibili con lo screen reader fornisce una solida base per le cose più fantasiose di seguito. Non mi soffermerò su questo troppo a lungo poiché altri hanno scritto ampiamente sull'argomento (link sotto) ma di seguito ci sono cose a cui dovresti sempre pensare:

• Navigazione chiara nella pagina e nel sito.
• Allinea la struttura DOM con il design visivo.
• Testo alternativo, non più lungo di 16 parole o giù di lì, se un'immagine non ha bisogno di testo alternativo (se è uno sfondo, ad esempio) ha testo alternativo vuoto, non testo alternativo.
• Collegamenti ipertestuali descrittivi.
• 'Salta ai link di contenuto'.

Il pensiero visivo in realtà ci rende ciechi di fronte a molti difetti di progettazione. Gli utenti possono e spesso lo fanno mettere insieme i pezzi da soli, ma questo non fa molto per i siti Web leggibili dalla macchina. Rendere i siti Web con cui è facile parlare inizia con il renderli compatibili con la sintesi vocale (TTS). È una buona pratica e migliora enormemente l'accessibilità. Vinci vinci.

Ulteriori letture su design e accessibilità TTS

• Sintesi vocale del W3C
• Front End North Pt 2: Leonie Watson mi ha sconvolto
• Sintesi vocale con AWS (parte 1)
• Sintesi vocale e ritorno con AWS (parte 2)
• Note sull'accessibilità resa dal client
• Controlli di etichettatura da parte del W3C
• Utilizzando l'attributo aria-label di Mozilla
• Ho usato il Web per un giorno usando uno screen reader
• Dagli esperti: sviluppi globali dell'accessibilità digitale durante COVID-19

Roba più elaborata

Oltre a gettare solide basi, la progettazione per lettori di schermo e l'accessibilità è un bene di per sé. Questo è un motivo sufficiente per menzionarlo prima. Tuttavia, non prevede l'aumento della navigazione "a mani libere" di cui ho parlato all'inizio di questo pezzo. Interfacce utente vocali o VUI. Per questo dobbiamo scavare nel markup semantico.

Rendere i siti Web con cui è facile parlare significa etichettare i contenuti a un livello molto più granulare. Quando le persone chiedono al loro assistente domestico le ultime notizie, una ricetta o se quel ristorante è aperto il martedì sera, non vogliono navigare in un sito Web usando la loro voce. Vogliono le informazioni. Adesso. Affinché ciò avvenga, le informazioni sui siti Web devono essere chiaramente etichettate.

Sono piuttosto caduto nella tana del coniglio del Web semantico quest'anno e non intendo ripetermi qui. Il web può e deve aspirare a essere leggibile dalla macchina, e questo include loquacità.

Il markup semantico esiste già per questo. Uno è chiamato "speakable", una proprietà Schema.org attualmente in versione beta che mette in evidenza le parti di una pagina web che sono "particolarmente appropriate per la conversione da testo a voce".

Ad esempio, io e due amici recensiamo un album a settimana come hobby. Abbiamo recentemente riprogettato il sito web con markup semantico integrato. Di seguito è riportata una parte dei dati strutturati di una pagina che mostrano il dicibile in azione:

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

Quindi, se qualcuno chiede al proprio assistente relatore domestico cosa ne pensa Audioxide di Origin of Symmetry dei Muse, speakable dovrebbe indirizzarlo al nome dell'album, all'artista e al breve riassunto della recensione. Comodo e al punto. (E risparmia alle persone la prova di ascoltare i nostri riassunti completi.) Non c'è niente che non c'era prima; è solo etichettato correttamente. Noterai anche che è sufficiente scegliere una classe CSS. Facile.

Questo tipo di funzionalità si presta meglio a determinati tipi di siti rispetto ad altri, ma le possibilità sono vaste. Ricette, notizie, disponibilità dei biglietti, informazioni di contatto, fare la spesa... tutte queste cose e molto altro possono essere migliorate se solo prendiamo l'abitudine di rendere i siti Web più facili da comunicare, ogni pagina è ricca di informazioni chiaramente strutturate ed etichettate pronte e in attesa per rispondere alle domande quando si presentano.

Oltre a ciò, i grandi cervelli di luoghi come Google e Mozilla stanno lavorando sodo su API di riconoscimento vocale web dedicate, consentendo interazioni utente più sofisticate con cose come moduli e controlli. È l'inizio di una tecnologia come questa, ma è assolutamente qualcosa da tenere d'occhio.

L'ascesa degli altoparlanti domestici significa che il vecchio e il nuovo mondo si stanno scontrando. Provvedere all'uno provvede all'altro. Non dimentichiamo che i siti Web dovrebbero essere stati progettati per lettori di schermo per decenni.

Ulteriori letture

• App Web che parlano: Introduzione all'API di sintesi vocale
• Concetti e utilizzo del discorso sul Web di Mozilla
• Cosa sono le interfacce utente vocali? A cura dell'Interaction Design Foundation

Scrivere per parlare

Hai adottato misure per far comprendere meglio il tuo sito Web da lettori di schermo, motori di ricerca e tutte quelle cose buone. Congratulazioni. Ora arriviamo agli argomenti più confusi di tono e personalità.

Progettare un sito web per parlare è diverso da progettarlo per essere letto. La natura delle interazioni dell'utente è diversa. Un punto importante da tenere a mente è che, per quanto riguarda le query vocali, i siti Web sono quasi sempre reattivi: rispondono alle domande, danno ricette, confermano gli ordini.

Uno studio Open NYT ha rilevato che per gli utenti domestici "l'interazione con i loro altoparlanti intelligenti a volte si traduce in scambi frustranti o addirittura divertenti, ma sembra un'esperienza migliore rispetto a essere legati a un telefono che invia notifiche".

In altre parole, non puoi e non dovresti forzare il problema. L'etica del look-at-me di pop-up, annunci e coinvolgimento infinito non ha posto qui. Il tuo compito è avere un buon sito che fornisca informazioni sul comando nel modo più chiaro e conciso possibile. Un maggiordomo virtuale, se vuoi.

Ciò che questo significa in termini linguistici è:

• Frasi succinte,
• Linguaggio chiaro e semplice,
• Informazioni a caricamento frontale (pensa a piramide invertita),
• Esprimere le risposte come frasi complete.

Dì quello che scrivi ad alta voce, chiedi a sistemi di sintesi vocale gratuiti come TTSReacher che te lo ripetono. Le parole possono suonare ad alta voce molto diverse da quelle scritte, e viceversa. Ho le mie riserve sugli algoritmi di leggibilità, ma sono strumenti utili per misurare la chiarezza.

Ulteriori letture

• "Test di leggibilità per contenuti vocali" su un elenco a parte
• Gli elementi di stile di William Strunk Jr.

HAL, senza i brutti scherzi

Parlare con i siti Web fa parte di un passaggio più ampio verso esperienze Web indipendenti dal canale. La natura dei siti web sta cambiando. Dal desktop al mobile, e dal mobile ai sistemi smart home, stanno diventando più fluidi. Sappiamo tutti dell'indicizzazione "mobile-first". Quanto tempo ci vorrà prima che sia 'voce-first'?

Allontanarsi da vincoli rigidi è scoraggiante, ma è anche liberatorio. Guardiamo i siti web, li ascoltiamo, parliamo con loro. Ognuno è come un piccolo HAL, con tanta o poca personalità e/o intento omicida che riteniamo opportuno progettarci.

Di seguito sono riportati i passaggi che possiamo adottare per semplificare la conversazione con i siti Web, sia che si tratti di costruire da zero o di aggiornare vecchi progetti:

• Naviga nel tuo sito utilizzando i lettori di schermo.
• Prova le query vocali tramite telefono/assistenti domestici.
• Usa il markup semantico.
• Implementare markup pronunciabile.

La progettazione di siti Web per situazioni senza schermo ne migliora l'accessibilità, ma ne affina anche la personalità, lo scopo e l'utilità. Come scrive Preston So per A List Apart , "è un modo efficace per analizzare e sottoporre a stress test quanto siano veramente indipendenti dal canale i tuoi contenuti".

Rendere facile parlare con i tuoi siti Web li prepara per il Web indipendente dal canale, che sta rapidamente diventando una realtà. Piuttosto che testo e immagini su uno schermo, i siti devono essere astratti e flessibili, pronti a interagire con una gamma sempre crescente di dispositivi.