Membuat Situs Web Lebih Mudah Untuk Dibicarakan

Sebuah situs web tanpa layar tidak terdengar benar bukan. Seperti buku tanpa halaman, atau mobil tanpa setir. Namun ada buku audio, kendaraan bebas genggam. Dan semakin banyak situs web yang digunakan bahkan tanpa dilihat — setidaknya oleh manusia.

Asisten telepon dan speaker rumah adalah bagian yang berkembang dari ekosistem Internet. Dalam artikel ini, saya akan mencoba menguraikan apa artinya itu bagi situs web di masa mendatang, apa yang dapat dilakukan desainer tentang hal itu, dan mengapa ini akhirnya bisa menjadi lompatan maju untuk aksesibilitas. Lagi pula, lebih dari dua pertiga web tidak dapat diakses oleh mereka yang memiliki gangguan penglihatan. Saatnya membuat situs web mudah untuk diajak bicara.

Invasi Pembicara Rumah

Penjualan speaker pintar global mencapai 147 juta pada tahun 2019 dan tren naik saat pandemi atau tanpa pandemi. Lagi pula, berbicara lebih cepat daripada mengetik. Dari Google Home hingga Alexa hingga asisten ponsel cerdas, mobil, dan bahkan lemari es, semakin banyak orang yang menggunakan program untuk menelusuri web atas nama mereka.

Mengesampingkan nada Big Brother Inc yang agak tidak menyenangkan dari tren ini, dapat dikatakan bahwa ratusan juta orang sudah menjelajahi web setiap hari tanpa benar-benar melihatnya. Layar tidak lagi penting untuk menjelajahi web dan situs harus beradaptasi dengan kenyataan baru ini. Mereka yang tidak memisahkan diri dari ratusan juta orang.

Pengembang, desainer, dan penulis sama-sama harus bersiap untuk kemungkinan bahwa karya mereka tidak akan dilihat atau diklik sama sekali — karya itu akan didengar dan dibicarakan.

“

Merancang Gaib

Ada dua cabang utama topik pembicaraan situs web — teknologi dan bahasa. Mari kita mulai dengan teknologi, yang menjalankan tantangan mulai dari struktur konten dasar hingga markup semantik dan seterusnya. Saya tertarik pada tulisan yang bagus seperti orang lain, tetapi ini bukan tempat untuk memulai. Anda dapat memiliki salinan situs web yang layak untuk pertunjukan Daniel Day-Lewis, tetapi jika tidak diatur dan diberi markup dengan benar, itu tidak akan berarti banyak bagi siapa pun.

Yayasan Tua Usia

Gagasan tentang situs web yang dipahami tanpa terlihat bukanlah hal baru. Pembaca layar telah ada selama beberapa dekade, dengan dua pertiga pengguna memilih ucapan sebagai output mereka, dengan sepertiga terakhir memilih braille.

Fokus artikel ini lebih jauh dari ini, tetapi membuat situs web yang ramah pembaca layar memberikan dasar yang kokoh untuk hal-hal yang lebih menarik di bawah ini. Saya tidak akan berlama-lama dalam hal ini karena orang lain telah banyak menulis tentang topik ini (tautan di bawah) tetapi di bawah ini adalah hal-hal yang harus selalu Anda pikirkan:

• Hapus navigasi di halaman dan di seluruh situs.
• Sejajarkan struktur DOM dengan desain visual.
• Teks alt, tidak lebih dari 16 kata atau lebih, jika gambar tidak memerlukan teks alt (jika itu latar belakang misalnya) kosongkan teks alt, bukan teks alt.
• Hyperlink deskriptif.
• 'Lewati ke tautan konten'.

Pemikiran visual sebenarnya membutakan kita pada banyak kegagalan desain. Pengguna dapat dan sering menyatukan bagian-bagian itu sendiri, tetapi itu tidak banyak membantu situs web yang dapat dibaca mesin. Membuat situs web mudah untuk diajak bicara dimulai dengan membuatnya ramah text-to-speech (TTS). Ini praktik yang baik dan secara besar-besaran meningkatkan aksesibilitas. Menang menang.

Bacaan Lebih Lanjut Tentang Desain Dan Aksesibilitas TTS

• Teks ke Ucapan oleh W3C
• Front End North Pt 2: Leonie Watson mengejutkan saya
• Text-To-Speech Dengan AWS (Bagian 1)
• Text-To-Speech Dan Kembali Lagi Dengan AWS (Bagian 2)
• Catatan Tentang Aksesibilitas yang Diberikan Klien
• Kontrol Pelabelan oleh W3C
• Menggunakan atribut aria-label oleh Mozilla
• Saya Menggunakan Web Selama Sehari Menggunakan Pembaca Layar
• Dari Para Ahli: Perkembangan Aksesibilitas Digital Global Selama COVID-19

Barang Lebih Mewah

Selain meletakkan dasar yang kuat, mendesain untuk pembaca layar dan aksesibilitas baik untuk kepentingannya sendiri. Itu alasan yang cukup untuk menyebutkannya terlebih dahulu. Namun, itu tidak cukup memberikan peningkatan penjelajahan 'bebas genggam' yang saya bicarakan di awal artikel ini. Antarmuka pengguna suara, atau VUI. Untuk itu kita harus menggali markup semantik.

Membuat situs web mudah untuk diajak bicara berarti memberi label konten pada tingkat yang jauh lebih terperinci. Saat orang bertanya kepada asisten rumah mereka tentang berita terbaru, atau resep, atau apakah restoran itu buka pada Selasa malam, mereka tidak ingin menavigasi situs web menggunakan suara mereka. Mereka menginginkan informasinya. Sekarang. Agar itu terjadi, informasi di situs web perlu diberi label dengan jelas.

Saya lebih suka jatuh ke lubang kelinci Semantic Web tahun ini, dan saya tidak bermaksud mengulangi diri saya di sini. Web dapat dan harus bercita-cita untuk dapat dibaca mesin, dan itu termasuk bicara.

Markup semantik sudah ada untuk ini. Salah satunya disebut 'speakable', properti Schema.org yang saat ini dalam versi beta yang menyoroti bagian halaman web yang 'sangat sesuai untuk konversi text-to-speech.'

Misalnya, saya dan dua orang teman meninjau album seminggu sebagai hobi. Kami baru-baru ini mendesain ulang situs web dengan markup semantik yang terintegrasi. Di bawah ini adalah bagian dari data terstruktur halaman yang menunjukkan tindakan yang dapat diucapkan:

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

Jadi, jika seseorang bertanya kepada asisten pembicara rumah mereka apa pendapat Audioxide tentang Origin of Symmetry oleh Muse, speakable harus mengarahkannya ke nama album, artis, dan ringkasan ulasan. Nyaman dan to the point. (Dan menghindarkan orang dari cobaan mendengarkan ringkasan lengkap kami.) Tidak ada yang tidak ada sebelumnya; itu hanya diberi label dengan benar. Anda juga akan melihat bahwa memilih kelas CSS sudah cukup. Mudah.

Fungsionalitas semacam ini lebih cocok untuk jenis situs tertentu daripada yang lain, tetapi kemungkinannya sangat luas. Resep, berita, ketersediaan tiket, informasi kontak, belanja bahan makanan... semua hal ini dan banyak lagi dapat dibuat lebih baik jika saja kita terbiasa membuat situs web lebih mudah untuk diajak bicara, setiap halaman dikemas dengan informasi terstruktur dan berlabel yang jelas siap dan menunggu untuk menjawab pertanyaan ketika mereka datang.

Selain itu, otak besar di tempat-tempat seperti Google dan Mozilla bekerja keras pada API ucapan web khusus, memungkinkan interaksi pengguna yang lebih canggih dengan hal-hal seperti formulir dan kontrol. Ini adalah hari-hari awal untuk teknologi seperti ini tetapi benar-benar sesuatu yang harus diperhatikan.

Munculnya speaker rumah berarti dunia lama dan dunia baru bertabrakan. Menyediakan untuk satu menyediakan untuk yang lain. Jangan lupa bahwa situs web seharusnya dirancang untuk pembaca layar selama beberapa dekade.

Bacaan lebih lanjut

• Aplikasi web yang berbicara — Pengantar Speech Synthesis API
• Konsep dan Penggunaan Web Speech oleh Mozilla
• Apa itu Antarmuka Pengguna Suara? Oleh Yayasan Desain Interaksi

Menulis Untuk Berbicara

Anda telah mengambil langkah-langkah untuk membuat situs web Anda lebih dipahami oleh pembaca layar, mesin telusur, dan semua hal bagus itu. Selamat. Sekarang kita sampai pada topik nada dan kepribadian yang lebih kabur.

Merancang situs web untuk berbicara berbeda dengan mendesainnya untuk dibaca. Sifat interaksi pengguna berbeda. Poin utama yang perlu diingat adalah terkait pertanyaan suara, situs web hampir selalu responsif — menjawab pertanyaan, memberikan resep, mengonfirmasi pesanan.

Sebuah studi Open NYT menemukan bahwa untuk pengguna rumah tangga 'berinteraksi dengan speaker pintar mereka terkadang menghasilkan pertukaran yang membuat frustrasi, atau bahkan lucu, tetapi itu terasa seperti pengalaman yang lebih baik daripada ditambatkan ke telepon yang mendorong keluar notifikasi.'

Dengan kata lain, Anda tidak bisa dan tidak boleh memaksakan masalah ini. Etos pop up dan iklan yang melihat saya dan keterlibatan tanpa akhir tidak memiliki tempat di sini. Tugas Anda adalah memiliki situs bagus yang memberikan informasi tentang perintah sejelas dan sesingkat mungkin. Pelayan virtual, jika Anda mau.

Apa artinya ini dalam istilah linguistik adalah:

• Kalimat ringkas,
• Bahasa yang sederhana, sederhana,
• Informasi yang dimuat di depan (pikirkan piramida terbalik),
• Frasa jawaban sebagai kalimat lengkap.

Ucapkan apa yang Anda tulis dengan lantang, minta sistem text-to-speech gratis seperti TTSReacher untuk mengatakannya kembali kepada Anda. Kata-kata bisa terdengar sangat berbeda dari yang tertulis, dan sebaliknya. Saya memiliki keraguan tentang algoritme keterbacaan, tetapi itu adalah alat yang berguna untuk mengukur kejelasan.

Bacaan lebih lanjut

• 'Pengujian Keterbacaan untuk Konten Suara' di Daftar Terpisah
• Elemen Gaya oleh William Strunk Jr.

HAL, Tanpa Bagian Buruk

Berbicara dengan situs web adalah bagian dari perubahan yang lebih luas menuju pengalaman web agnostik saluran. Sifat situs web berubah. Dari desktop ke seluler, dan dari seluler ke sistem rumah pintar, semuanya menjadi lebih lancar. Kita semua tahu tentang pengindeksan 'mobile-first'. Berapa lama sampai 'suara-pertama'?

Menjauh dari batasan yang kaku memang menakutkan, tetapi juga membebaskan. Kami melihat situs web, kami mendengarkan mereka, kami berbicara dengan mereka. Masing-masing seperti HAL kecil, dengan kepribadian dan/atau niat membunuh sebanyak atau sesedikit yang kita anggap cocok untuk dirancang ke dalamnya.

Berikut adalah langkah-langkah yang dapat kita ambil untuk membuat situs web lebih mudah untuk diajak bicara, baik membangun dari awal atau memperbarui proyek lama:

• Navigasikan situs Anda menggunakan pembaca layar.
• Coba pertanyaan vokal melalui asisten telepon/rumah.
• Gunakan markup semantik.
• Terapkan markup yang dapat diucapkan.

Merancang situs web untuk situasi tanpa layar meningkatkan aksesibilitasnya, tetapi juga mempertajam kepribadian, tujuan, dan kegunaannya. Seperti yang ditulis Preston So untuk A List Apart , 'ini adalah cara yang efektif untuk menganalisis dan menguji seberapa jauh konten Anda benar-benar agnostik saluran.'

Membuat situs web Anda mudah untuk diajak bicara mempersiapkan mereka untuk web saluran-agnostik, yang dengan cepat menjadi kenyataan. Daripada teks dan visual di layar, situs harus abstrak dan fleksibel, siap untuk berinteraksi dengan berbagai perangkat yang terus berkembang.