Łatwiejsze rozmowy na stronach internetowych

Strona bez ekranu nie brzmi dobrze. Jak książka bez stron albo samochód bez kierownicy. Są jednak audiobooki, pojazdy bez użycia rąk. Coraz częściej strony internetowe są używane bez oglądania — przynajmniej przez ludzi.

Asystenci telefoniczni i głośniki domowe stanowią coraz większą część ekosystemu internetowego. W artykule postaram się wyjaśnić, co to oznacza dla przyszłych stron internetowych, co projektanci mogą z tym zrobić i dlaczego może to być w końcu skok w kierunku dostępności. W końcu ponad dwie trzecie sieci jest niedostępnych dla osób z wadami wzroku. Nadszedł czas, aby strony internetowe były łatwe do rozmowy.

Inwazja głośników domowych

Globalna sprzedaż inteligentnych głośników przekroczyła 147 milionów w 2019 roku, a pandemia lub brak pandemii trend rośnie. W końcu mówienie jest szybsze niż pisanie. Od Google Home, przez Alexę, po asystentów smartfonów, samochody, a nawet lodówki, coraz więcej osób korzysta z programów do przeszukiwania sieci w ich imieniu.

Odkładając na bok dość złowrogie podteksty tego trendu, Big Brother Inc, można śmiało powiedzieć, że setki milionów ludzi już codziennie eksploruje sieć, nie patrząc na nią. Ekrany nie są już niezbędne do przeglądania sieci, a witryny powinny dostosowywać się do tej nowej rzeczywistości. Ci, którzy tego nie robią, odcinają się od setek milionów ludzi.

Deweloperzy, projektanci i pisarze powinni być przygotowani na możliwość, że ich praca nie zostanie w ogóle zobaczona lub kliknięta — zostanie wysłuchana i porozmawiana.

“

Projektowanie niewidzialności

W temacie gadania na stronach internetowych są dwa główne aspekty — technologia i język. Zacznijmy od technologii, która obejmuje całą drogę od podstawowej struktury treści po znaczniki semantyczne i nie tylko. Lubię dobre pisanie jak każdy, ale to nie jest miejsce na rozpoczęcie. Możesz mieć kopię strony internetowej godną występu Daniela Day-Lewisa, ale jeśli nie zostanie odpowiednio zaaranżowana i oznaczona, nie będzie dla nikogo wiele warta.

Starodawne fundamenty

Pomysł, by strony internetowe były rozumiane i niewidoczne, nie jest nowy. Czytniki ekranowe istnieją od dziesięcioleci, dwie trzecie użytkowników wybrało mowę jako wyjście, a ostatnia trzecia wybrała Braille'a.

Temat tego artykułu idzie dalej, ale uczynienie stron internetowych przyjaznymi dla czytników ekranu zapewnia solidną podstawę dla bardziej wyszukanych rzeczy poniżej. Nie będę się nad tym zastanawiał zbyt długo, ponieważ inni obszernie pisali na ten temat (linki poniżej), ale poniżej są rzeczy, o których zawsze powinieneś myśleć:

• Przejrzysta nawigacja na stronie i w całej witrynie.
• Dopasuj strukturę DOM do projektu wizualnego.
• Tekst alternatywny, nie dłuższy niż 16 słów lub więcej, jeśli obraz nie wymaga tekstu alternatywnego (jeśli jest to na przykład tło), ma pusty tekst alternatywny, a nie tekst alternatywny.
• Opisowe hiperłącza.
• „Przejdź do linków do treści”.

Myślenie wizualne w rzeczywistości zaślepia nas na wiele błędów projektowych. Użytkownicy mogą i często robią to sami, ale to niewiele daje w przypadku witryn do odczytu maszynowego. Tworzenie stron internetowych, z którymi można się łatwo rozmawiać, zaczyna się od przystosowania ich do zamiany tekstu na mowę (TTS). To dobra praktyka, która znacznie poprawia dostępność. Wygraj wygraną.

Dalsza lektura na temat projektowania i dostępności TTS

• Tekst na mowę W3C
• Front End North Pt 2: Leonie Watson zawalił mnie w głowie
• Zamiana tekstu na mowę z AWS (część 1)
• Zamiana tekstu na mowę i z powrotem z AWS (część 2)
• Uwagi dotyczące dostępności renderowanej przez klienta
• Kontrola etykietowania przez W3C
• Używanie atrybutu aria-label przez Mozillę
• Korzystałem z Internetu przez jeden dzień za pomocą czytnika ekranu
• Od ekspertów: globalny rozwój dostępności cyfrowej podczas COVID-19

Hodowca rzeczy

Projektowanie pod kątem czytników ekranu i ułatwień dostępu nie tylko stanowi solidne podstawy, ale także jest dobre samo w sobie. To wystarczający powód, aby wspomnieć o tym najpierw. Jednak nie zapewnia to popularności przeglądania „bez użycia rąk”, o której mówiłem na początku tego artykułu. Głosowe interfejsy użytkownika lub VUI. W tym celu musimy zagłębić się w znaczniki semantyczne.

Ułatwienie komunikacji ze stronami internetowymi oznacza etykietowanie treści na znacznie bardziej szczegółowym poziomie. Kiedy ludzie pytają swojego asystenta domowego o najnowsze wiadomości, przepis lub o to, czy restauracja jest otwarta we wtorek wieczorem, nie chcą nawigować po witrynie za pomocą głosu. Chcą informacji. Ale już. Aby tak się stało, informacje na stronach internetowych muszą być wyraźnie oznakowane.

W tym roku raczej wpadłem do króliczej nory sieci semantycznej i nie zamierzam się tutaj powtarzać. Sieć może i powinna aspirować do tego, by była czytelna dla maszyn, w tym gadatliwość.

W tym celu istnieje już znacznik semantyczny. Jedna z nich to „speakable”, właściwość Schema.org obecnie w wersji beta, która wyróżnia te części strony internetowej, które są „szczególnie odpowiednie do konwersji tekstu na mowę”.

Na przykład ja i dwóch przyjaciół recenzujemy album w ramach hobby. Niedawno przeprojektowaliśmy stronę internetową ze zintegrowanymi znacznikami semantycznymi. Poniżej znajduje się część uporządkowanych danych strony, w których można mówić w działaniu:

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

Tak więc, jeśli ktoś zapyta swojego asystenta głośnika domowego, co Audioxide myśli o Origin of Symmetry by Muse, Speakable powinien skierować go do nazwy albumu, wykonawcy i krótkiego podsumowania recenzji. Wygodne i na temat. (I oszczędza ludziom męki słuchania naszych pełnych podsumowań.) Nie ma tam nic, czego nie było wcześniej; jest po prostu właściwie oznakowany. Zauważysz również, że wystarczy wybrać klasę CSS. Łatwo.

Ten rodzaj funkcjonalności sprawdza się lepiej w niektórych typach witryn niż w innych, ale możliwości są ogromne. Przepisy, wiadomości, dostępność biletów, informacje kontaktowe, zakupy spożywcze… wszystkie te rzeczy i wiele więcej można ulepszyć, jeśli tylko przyzwyczaimy się do tworzenia stron internetowych, z którymi łatwiej się rozmawia, a każda strona jest wypełniona przejrzyście ustrukturyzowanymi i oznaczonymi informacjami gotowymi i czekającymi aby odpowiadać na pytania, gdy się pojawią.

Poza tym wielkie mózgi w miejscach takich jak Google i Mozilla ciężko pracują nad dedykowanymi internetowymi interfejsami API mowy, pozwalającymi na bardziej wyrafinowane interakcje użytkowników z takimi rzeczami, jak formularze i kontrolki. To wczesne dni dla takiej technologii, ale absolutnie coś, na co warto mieć oko.

Powstanie głośników domowych oznacza zderzenie starego i nowego świata. Zapewnienie jednego zapewnia drugiemu. Nie zapominajmy, że strony internetowe miały być projektowane dla czytników ekranu od dziesięcioleci.

Dalsza lektura

• Aplikacje internetowe, które mówią — wprowadzenie do interfejsu API syntezy mowy
• Koncepcje i wykorzystanie mowy internetowej przez Mozillę
• Co to są głosowe interfejsy użytkownika? Przez Fundację Interaction Design

Pisanie do mówienia

Podjąłeś kroki, aby Twoja witryna była lepiej rozumiana przez czytniki ekranu, wyszukiwarki i inne dobre rzeczy. Gratulacje. Teraz przechodzimy do bardziej rozmytych tematów tonu i osobowości.

Projektowanie strony internetowej do mówienia różni się od projektowania jej do czytania. Charakter interakcji użytkownika jest inny. Ważną kwestią, o której należy pamiętać, jest to, że w przypadku zapytań głosowych strony internetowe prawie zawsze reagują — odpowiadając na pytania, podając przepisy, potwierdzając zamówienia.

Badanie Open NYT wykazało, że w przypadku użytkowników domowych „interakcja z inteligentnymi głośnikami czasami prowadzi do frustrujących, a nawet zabawnych wymian, ale wydaje się to lepszym doświadczeniem niż bycie przywiązanym do telefonu, który wysyła powiadomienia”.

Innymi słowy, nie możesz i nie powinieneś wymuszać problemu. Nie ma tu miejsca na etos wyskakujących okienek i reklam oraz niekończące się zaangażowanie. Twoim zadaniem jest posiadanie dobrej strony, która podaje informacje na polecenie tak jasno i zwięźle, jak to tylko możliwe. Wirtualny lokaj, jeśli wolisz.

Co to oznacza pod względem językowym to:

• Zwięzłe zdania,
• Zwykły, prosty język,
• Informacje ładowane z przodu (myśl odwróconą piramidę),
• Wyrażanie odpowiedzi jako pełnych zdań.

Mów na głos to, co piszesz, korzystaj z darmowych systemów zamiany tekstu na mowę, takich jak TTSReacher, odpowiedz ci. Słowa mogą brzmieć na głos zupełnie inaczej niż napisane i na odwrót. Mam zastrzeżenia do algorytmów czytelności, ale są to przydatne narzędzia do mierzenia jasności.

Dalsza lektura

• „Testowanie czytelności treści głosowych” na innej liście
• Elementy stylu Williama Strunk Jr.

HAL, bez złych bitów

Rozmowa ze stronami internetowymi jest częścią szerszej zmiany w kierunku doświadczeń internetowych niezależnych od kanału. Zmienia się charakter stron internetowych. Od komputerów stacjonarnych po urządzenia mobilne i od urządzeń mobilnych po inteligentne systemy domowe, stają się one coraz bardziej płynne. Wszyscy wiemy o indeksowaniu „zoptymalizowanym pod kątem urządzeń mobilnych”. Ile czasu upłynie, zanim będzie „najpierw głos”?

Odejście od sztywnych ograniczeń jest zniechęcające, ale także wyzwalające. Oglądamy strony internetowe, słuchamy ich, rozmawiamy z nimi. Każdy z nich jest jak mały HAL, z tak dużą lub małą osobowością i/lub morderczymi intencjami, jak uważamy za stosowne, aby go zaprojektować.

Oto kroki, które możemy podjąć, aby ułatwić komunikację z witrynami, niezależnie od tego, czy tworzymy od zera, czy aktualizujemy stare projekty:

• Poruszaj się po witrynie za pomocą czytników ekranu.
• Wypróbuj zapytania głosowe przez telefon / asystentów domowych.
• Użyj znaczników semantycznych.
• Implementuj znaczniki do wypowiadania.

Projektowanie stron internetowych do sytuacji bezekranowych poprawia ich dostępność, ale także wyostrza ich osobowość, cel i użyteczność. Jak pisze Preston So dla A List Apart , „jest to skuteczny sposób na analizowanie i testowanie, jak naprawdę treści są niezależne od kanału”.

Ułatwienie komunikacji z Twoimi witrynami przygotowuje je do sieci niezależnej od kanału, która szybko staje się rzeczywistością. Zamiast tekstu i elementów wizualnych na ekranie, witryny muszą być abstrakcyjne i elastyczne, gotowe do interakcji z coraz większą liczbą urządzeń.