Faceți site-urile web mai ușor de discutat

Un site web fără ecran nu sună corect. Ca o carte fără pagini sau o mașină fără volan. Cu toate acestea, există cărți audio, vehicule fără mâini. Și din ce în ce mai multe site-uri web sunt folosite fără să fie măcar privite – cel puțin de oameni.

Asistenții telefonici și difuzoarele de acasă sunt o parte din ce în ce mai mare a ecosistemului Internet. În articol, voi încerca să detaliez ce înseamnă asta pentru site-urile web în viitor, ce pot face designerii în privința asta și de ce acesta ar putea fi în sfârșit un salt înainte către accesibilitate. La urma urmei, mai mult de două treimi din web este inaccesibil celor cu deficiențe de vedere. Este timpul să faceți site-uri web ușor de comunicat.

Invazia difuzoarelor de acasă

Vânzările globale de difuzoare inteligente au depășit 147 de milioane în 2019, iar tendința este în creștere în pandemie sau fără pandemie. La urma urmei, a vorbi este mai rapid decât a tasta. De la Google Home la Alexa la asistenți pentru smartphone-uri, mașini și chiar frigidere, tot mai mulți oameni folosesc programe pentru a căuta pe web în numele lor.

Lăsând deoparte subtilele destul de amenințătoare ale Big Brother Inc ale acestei tendințe, este sigur să spunem că sute de milioane de oameni explorează deja internetul în fiecare zi fără să se uite la el. Ecranele nu mai sunt esențiale pentru navigarea pe web, iar site-urile ar trebui să se adapteze acestei noi realități. Cei care nu o fac, se despart de sute de milioane de oameni.

Dezvoltatorii, designerii și scriitorii deopotrivă ar trebui să fie pregătiți pentru posibilitatea ca munca lor să nu fie văzută sau accesată deloc - va fi auzită și vorbită.

„

Proiectarea invizibilitate

Există două aspecte principale ale subiectului vorbirii site-ului - tehnologie și limbaj. Să începem cu tehnologia, care rulează mănușa de la structura de bază a conținutului până la marcajul semantic și nu numai. Sunt la fel de pasionat de scris bun ca oricine, dar nu este locul unde să încep. Ai putea avea o copie a site-ului web demnă de o performanță Daniel Day-Lewis, dar dacă nu este aranjată și marcată corespunzător, nu va valorifica prea mult pentru nimeni.

Baze vechi

Ideea ca site-urile web să fie înțelese fără a fi văzute nu este una nouă. Cititoarele de ecran există de zeci de ani, două treimi dintre utilizatori alegând vorbirea ca rezultat, iar ultima treime alegând braille.

Accentul acestui articol merge mai mult decât atât, dar facerea site-urilor web prietenoase pentru citirea de ecran oferă o bază solidă pentru lucrurile mai fanteziste de mai jos. Nu voi zăbovi prea mult pe asta, deoarece alții au scris pe larg pe această temă (linkuri de mai jos), dar mai jos sunt lucruri la care ar trebui să te gândești mereu:

• Navigare clară în pagină și pe site.
• Aliniați structura DOM cu designul vizual.
• Alt text, nu mai mult de 16 cuvinte sau cam asa ceva, dacă o imagine nu are nevoie de alt text (dacă este un fundal, de exemplu), au text alt gol, nu nici un alt text.
• Hiperlinkuri descriptive.
• „Săriți la linkurile de conținut”.

Gândirea vizuală ne orbește de fapt la multe eșecuri de design. Utilizatorii pot și adesea adună piesele ei înșiși, dar asta nu face prea mult pentru site-urile web care pot fi citite de mașină. Pentru ca site-urile web să fie ușor de comunicat, începe prin a le face prietenoase cu text-to-speech (TTS). Este o practică bună și îmbunătățește masiv accesibilitatea. Câștigă câștigă.

Citiri suplimentare despre designul și accesibilitatea TTS

• Text to Speech de W3C
• Front End North Pt 2: Leonie Watson mi-a uimit mintea
• Text-to-speech cu AWS (Partea 1)
• Text-to-speech și înapoi cu AWS (Partea 2)
• Note despre accesibilitatea redată de client
• Controale de etichetare de către W3C
• Folosind atributul aria-label de la Mozilla
• Am folosit Web-ul pentru o zi folosind un cititor de ecran
• De la Experți: Evoluții globale ale accesibilității digitale în timpul COVID-19

Chestii de lux

Pe lângă stabilirea unei baze solide, proiectarea pentru cititoare de ecran și accesibilitate este bună de dragul său. Acesta este un motiv suficient pentru a-l menționa mai întâi. Cu toate acestea, nu prea oferă o creștere a navigării „mâini libere” despre care am vorbit la începutul acestei piese. Interfețe de utilizator vocale sau VUI. Pentru asta trebuie să pătrundem în marcajul semantic.

A face site-urile web ușor de comunicat înseamnă etichetarea conținutului la un nivel mult mai granular. Când oamenii îi întreabă asistentului de acasă cele mai recente știri sau o rețetă sau dacă acel restaurant este deschis marți seara, nu vor să navigheze pe un site web folosind vocea. Ei vor informația. Acum. Pentru ca acest lucru să se întâmple, informațiile de pe site-uri web trebuie să fie etichetate clar.

M-am prăbușit mai degrabă în țara iepurelui Semantic Web anul acesta și nu intenționez să mă repet aici. Web-ul poate și ar trebui să aspire să fie citibil de mașină, iar asta include și vorbirea.

Markup semantic există deja pentru aceasta. Una se numește „speakable”, o proprietate Schema.org aflată în prezent în beta, care evidențiază părțile unei pagini web care sunt „în special adecvate pentru conversia text-to-speech”.

De exemplu, eu și doi prieteni revizuim un album pe săptămână ca hobby. Am reproiectat recent site-ul web cu marcaj semantic integrat. Mai jos este o porțiune a datelor structurate ale unei pagini care arată în acțiune vorbitoare:

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

Așadar, dacă cineva îl întreabă pe asistentul difuzorului de acasă ce părere a Audioxide despre Origin of Symmetry by Muse, vorbitorul ar trebui să îl direcționeze către numele albumului, artistul și rezumatul mic al recenziei. Convenabil și la obiect. (Și scutește oamenii de încercarea de a asculta rezumatele noastre complete.) Nimic acolo care să nu fi fost acolo înainte; este doar etichetat corect. Veți observa, de asemenea, că alegerea unei clase CSS este suficientă. Uşor.

Acest tip de funcționalitate se pretează mai bine anumitor tipuri de site-uri decât altora, dar posibilitățile sunt vaste. Rețete, știri, disponibilitatea biletelor, informații de contact, cumpărături… toate aceste lucruri și multe altele pot fi îmbunătățite doar dacă ne obișnuim să facem site-uri web mai ușor de comunicat, fiecare pagină plină cu informații clar structurate și etichetate gata și așteaptă. pentru a răspunde la întrebări atunci când le ies în cale.

Dincolo de asta, creierele mari din locuri precum Google și Mozilla lucrează din greu la API-uri de vorbire web dedicate, permițând interacțiuni mai sofisticate ale utilizatorilor cu lucruri precum formulare și comenzi. Sunt primele zile pentru o astfel de tehnologie, dar absolut ceva de care trebuie să fii cu ochii.

Creșterea difuzoarelor de acasă înseamnă că lumile vechi și noi se ciocnesc. Asigurarea unuia îl asigură pe celălalt. Să nu uităm că site-urile web se presupune că au fost concepute pentru cititoarele de ecran de zeci de ani.

Lectură suplimentară

• Aplicații web care vorbesc — Introducere în API-ul pentru sinteza vorbirii
• Concepte de vorbire web și utilizare de către Mozilla
• Ce sunt interfețele vocale cu utilizatorul? De către Fundația Interaction Design

Scrierea pentru vorbire

Ați luat măsuri pentru ca site-ul dvs. să fie mai bine înțeles de cititoarele de ecran, motoarele de căutare și toate acele lucruri bune. Felicitări. Acum ajungem la subiectele mai neclare ale tonului și personalității.

Proiectarea unui site web pentru a vorbi este diferită de proiectarea lui pentru a fi citit. Natura interacțiunilor utilizatorilor este diferită. Un punct important de reținut este că, în ceea ce privește interogările vocale, site-urile web sunt aproape întotdeauna receptive - răspund la întrebări, oferă rețete, confirmă comenzi.

Un studiu Open NYT a constatat că, pentru utilizatorii casnici, „interacționarea cu difuzoarele lor inteligente duce uneori la schimburi frustrante sau chiar amuzante, dar aceasta se simte ca o experiență mai bună decât a fi legat de un telefon care trimite notificări”.

Cu alte cuvinte, nu puteți și nu trebuie să forțați problema. Etosul uita-te la mine al ferestrelor pop-up și reclamelor și al angajamentului nesfârșit nu își are locul aici. Sarcina ta este să ai un site bun care să ofere informații despre comandă cât mai clar și succint posibil. Un majordom virtual, dacă vrei.

Ce înseamnă asta în termeni lingvistici este:

• Propoziții succinte,
• Limbaj simplu, simplu,
• Informații încărcate frontal (gândiți-vă la piramida inversată),
• Formularea răspunsurilor ca propoziții complete.

Spuneți ceea ce scrieți cu voce tare, dispuneți de sistemele libere de conversie a textului în vorbire precum TTSReacher să vă spună. Cuvintele pot suna foarte diferit cu voce tare decât sunt scrise și invers. Am rezervele mele cu privire la algoritmii de lizibilitate, dar sunt instrumente utile pentru măsurarea clarității.

Lectură suplimentară

• „Testarea lizibilității pentru conținutul vocal” pe o listă aparte
• Elementele stilului de William Strunk Jr.

HAL, Fără răi

Discuția cu site-urile web face parte dintr-o trecere mai largă către experiențe web agnostice de canal. Natura site-urilor web se schimbă. De la desktop la mobil și de la mobil la sisteme de casă inteligente, acestea devin din ce în ce mai fluide. Știm cu toții despre indexarea „în primul rând pe mobil”. Cât durează până când este „în primul rând vocea”?

Îndepărtarea de constrângeri rigide este descurajantă, dar este și eliberatoare. Ne uităm la site-uri web, le ascultăm, le vorbim. Fiecare este ca un mic HAL, cu atâta sau puțină personalitate și/sau intenție criminală pe cât credem de cuviință să creăm în el.

Iată pașii pe care îi putem lua pentru ca site-urile web să fie mai ușor de comunicat, indiferent dacă construim de la zero sau actualizăm proiecte vechi:

• Navigați pe site-ul dvs. folosind cititoare de ecran.
• Încercați interogări vocale prin telefon/asistenți acasă.
• Utilizați marcaj semantic.
• Implementați un marcaj care poate fi vorbit.

Proiectarea site-urilor web pentru situații fără ecran le îmbunătățește accesibilitatea, dar le sporește și personalitatea, scopul și utilitatea lor. După cum scrie Preston So pentru A List Apart , „este o modalitate eficientă de a analiza și de a testa stres cât de independent de canal este cu adevărat conținutul tău”.

Făcându-vă site-urilor web ușor de vorbit, acestea le pregătesc pentru web-ul agnostic al canalului, care devine rapid o realitate. Mai degrabă decât textul și imaginile pe un ecran, site-urile trebuie să fie abstracte și flexibile, gata să interacționeze cu o gamă în continuă creștere de dispozitive.