Web Sitelerini Konuşmayı Kolaylaştırmak

Ekranı olmayan bir web sitesi kulağa hoş gelmiyor, değil mi? Sayfaları olmayan bir kitap veya direksiyonu olmayan bir araba gibi. Yine de sesli kitaplar, eller serbest araçlar var. Ve giderek daha fazla web siteleri, en azından insanlar tarafından, bakılmadan kullanılıyor.

Telefon asistanları ve ev hoparlörleri, İnternet ekosisteminin büyüyen bir parçasıdır. Makalede, bunun ileriye dönük web siteleri için ne anlama geldiğini, tasarımcıların bu konuda neler yapabileceğini ve bunun neden sonunda erişilebilirlik için bir sıçrama olabileceğini açıklamaya çalışacağım. Neticede internetin üçte ikisinden fazlası görme engelliler için erişilemez durumda. Web sitelerini konuşulması kolay hale getirmenin zamanı geldi.

Ev Konuşmacılarının İstilası

Küresel akıllı hoparlör satışları 2019'da 147 milyonu aştı ve pandemi veya pandemi yok trend artıyor. Sonuçta konuşmak, yazmaktan daha hızlıdır. Google Home'dan Alexa'ya, akıllı telefon asistanlarına, arabalara ve hatta buzdolaplarına kadar, giderek daha fazla insan web'de kendi adlarına arama yapmak için programlar kullanıyor.

Bu eğilimin oldukça uğursuz alt tonlarını bir kenara bırakırsak, yüz milyonlarca insanın her gün aslında ona bakmadan web'i keşfettiğini söylemek güvenlidir. Web'de gezinmek için ekranlar artık gerekli değildir ve siteler bu yeni gerçekliğe uyum sağlamalıdır. Yapmayanlar kendilerini yüz milyonlarca insandan ayırıyorlar.

Geliştiriciler, tasarımcılar ve yazarlar, çalışmalarının hiç görülmemesi veya tıklanmaması, işitilmesi ve konuşulması olasılığına hazırlıklı olmalıdır.

“

Görünmezliği Tasarlamak

Web sitesi konuşma konusunun iki ana yönü vardır – teknoloji ve dil. Temel içerik yapısından anlamsal biçimlendirmeye ve ötesine kadar tüm yolu yöneten teknoloji ile başlayalım. Ben de herkes kadar iyi yazmaya hevesliyim ama başlamanın yeri burası değil. Daniel Day-Lewis performansına layık bir web sitesi kopyanız olabilir, ancak düzgün bir şekilde düzenlenmezse ve işaretlenmezse, kimse için fazla bir değeri olmayacaktır.

Yaşlı Temeller

Web sitelerinin görülmeden anlaşılması fikri yeni değil. Ekran okuyucular, kullanıcıların üçte ikisi çıktı olarak konuşmayı, son üçte biri de braille'i seçmesiyle on yıllardır ortalıkta dolaşıyor.

Bu makalenin odak noktası bundan daha ileri gidiyor, ancak web sitelerini ekran okuyucu dostu hale getirmek, aşağıdaki daha meraklı şeyler için sağlam bir temel sağlar. Başkaları konu hakkında kapsamlı bir şekilde yazdığı için (aşağıdaki bağlantılar) bu konuda çok fazla oyalanmayacağım, ancak aşağıda her zaman düşünmeniz gereken şeyler var:

• Sayfa içi ve site genelinde gezinmeyi temizleyin.
• DOM yapısını görsel tasarımla hizalayın.
• 16 kelimeden uzun olmayan alternatif metin, bir görüntünün alternatif metne ihtiyacı yoksa (örneğin bir arka plansa) boş alternatif metne sahiptir, alternatif metne sahip değildir .
• Açıklayıcı köprüler.
• 'İçerik bağlantılarına geç'.

Görsel düşünme aslında bizi birçok tasarım hatasına karşı kör eder. Kullanıcılar parçaları kendileri bir araya getirebilir ve çoğu zaman da yapabilir, ancak bu, makine tarafından okunabilen web siteleri için pek bir şey yapmaz. Web sitelerini konuşmayı kolay hale getirmek, onları metinden konuşmaya (TTS) uyumlu hale getirmekle başlar. Bu iyi bir uygulamadır ve erişilebilirliği büyük ölçüde artırır. Kazan kazan.

TTS Tasarımı ve Erişilebilirlik Üzerine Daha Fazla Okuma

• Metinden Konuşmaya W3C
• Front End North Pt 2: Leonie Watson aklımı başımdan aldı
• AWS ile Metin Okuma (Bölüm 1)
• AWS ile Metin Okuma ve Geri Dönme (2. Bölüm)
• İstemci Tarafından Oluşturulan Erişilebilirlik Üzerine Notlar
• W3C ile Etiketleme Kontrolleri
• Mozilla'nın aria-label niteliğini kullanma
• Web'i Ekran Okuyucu Kullanarak Bir Gün Kullandım
• Uzmanlardan: COVID-19 Sırasında Küresel Dijital Erişilebilirlik Gelişmeleri

meraklısı şeyler

Ekran okuyucular ve erişilebilirlik için tasarım yapmak, güçlü bir temel oluşturmanın yanı sıra, kendi iyiliği için de iyidir. Bu, önce bahsetmek için yeterli bir sebep. Ancak, bu parçanın başında bahsettiğim 'eller serbest' taramanın artışını pek sağlamıyor. Sesli kullanıcı arayüzleri veya VUI'ler. Bunun için anlamsal işaretlemeye girmeliyiz.

Web sitelerini konuşmayı kolay hale getirmek, içeriği çok daha ayrıntılı bir düzeyde etiketlemek anlamına gelir. İnsanlar ev asistanlarından en son haberleri veya bir yemek tarifini ya da o restoranın Salı gecesi açık olup olmadığını sorduğunda, seslerini kullanarak bir web sitesinde gezinmek istemiyorlar. Bilgileri istiyorlar. Şimdi. Bunun gerçekleşmesi için web sitelerindeki bilgilerin açıkça etiketlenmesi gerekir.

Bu yıl Semantik Web tavşan deliğinden aşağı yuvarlandım ve burada kendimi tekrar etmek niyetinde değilim. Web, makine tarafından okunabilir olmayı arzulayabilir ve arzu etmelidir ve buna konuşkanlık da dahildir.

Bunun için anlamsal işaretleme zaten var. Bunlardan biri, şu anda beta aşamasında olan ve bir web sayfasının 'metinden sese dönüştürme için özellikle uygun' kısımlarını vurgulayan bir Schema.org özelliği olan 'konuşulabilir' olarak adlandırılır.

Örneğin, ben ve iki arkadaşım hobi olarak haftada bir albümü inceliyoruz. Yakın zamanda web sitesini semantik işaretlemeyi entegre ederek yeniden tasarladık. Aşağıda, bir sayfanın yapılandırılmış verilerinin eylem halinde konuşulabilir olduğunu gösteren bir kısmı verilmiştir:

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

Bu nedenle, biri ev hoparlör asistanına Audioxide'in Muse'un Origin of Symmetry'sinin ne düşündüğünü sorarsa, konuşulabilir bunu albüm adına, sanatçıya ve incelemenin kısa özetine yönlendirmelidir. Uygun ve noktaya. (Ve insanları tüm özetlerimizi dinleme zahmetinden kurtarır.) Daha önce orada olmayan hiçbir şey yoktur; sadece düzgün etiketlenmiş. Bir CSS sınıfı seçmenin yeterli olduğunu da fark edeceksiniz. Kolay.

Bu tür işlevsellik, belirli türdeki siteler için diğerlerinden daha iyidir, ancak olanaklar çok geniştir. Tarifler, haberler, bilet bulunabilirliği, iletişim bilgileri, bakkal alışverişi… Tüm bu şeyler ve daha fazlası, yalnızca web sitelerini konuşmayı daha kolay hale getirme alışkanlığını edinirsek, her sayfa açıkça yapılandırılmış ve etiketlenmiş bilgilerle dolu ve hazır ve beklerse daha iyi hale getirilebilir. Soruları yollarına çıktıklarında cevaplamak için.

Bunun ötesinde, Google ve Mozilla gibi yerlerdeki büyük beyinler, formlar ve kontroller gibi şeylerle daha karmaşık kullanıcı etkileşimlerine izin veren özel web konuşma API'leri üzerinde sıkı bir şekilde çalışmaktadır. Bunun gibi teknoloji için erken günler ama kesinlikle dikkat edilmesi gereken bir şey.

Ev hoparlörlerinin yükselişi, eski ve yeni dünyaların çarpıştığı anlamına geliyor. Birini sağlamak diğerini sağlar. Web sitelerinin onlarca yıldır ekran okuyucular için tasarlandığını unutmayalım.

Daha fazla okuma

• Konuşan web uygulamaları — Konuşma Sentezi API'sine Giriş
• Mozilla'nın Web Konuşması Kavramları ve Kullanımı
• Sesli Kullanıcı Arayüzleri nedir? Etkileşim Tasarımı Vakfı tarafından

Konuşmak için Yazmak

Web sitenizin ekran okuyucular, arama motorları ve tüm bu güzel şeyler tarafından daha iyi anlaşılması için adımlar attınız. Tebrikler. Şimdi ton ve kişilik gibi daha bulanık konulara geçiyoruz.

Konuşmak için bir web sitesi tasarlamak, onu okunacak şekilde tasarlamaktan farklıdır. Kullanıcı etkileşimlerinin doğası farklıdır. Akılda tutulması gereken önemli bir nokta, sesli sorgular söz konusu olduğunda web sitelerinin neredeyse her zaman yanıt vermesidir - soruları yanıtlamak, yemek tarifleri vermek, siparişleri onaylamak.

Bir Open NYT araştırması, ev kullanıcıları için 'akıllı hoparlörleriyle etkileşim kurmanın bazen sinir bozucu, hatta komik alışverişlerle sonuçlandığını, ancak bu, bildirimleri gönderen bir telefona bağlı olmaktan daha iyi bir deneyim gibi geliyor'' buldu.

Başka bir deyişle, sorunu zorlayamazsınız ve zorlamamalısınız. Pop-up'ların, reklamların ve sonsuz etkileşimin bana bakma etiğinin burada yeri yoktur. Göreviniz, komut hakkında mümkün olduğunca açık ve özlü bilgi veren iyi bir siteye sahip olmak. İstersen sanal bir uşak.

Bunun dilbilimsel açıdan anlamı şudur:

• Kısa cümleler,
• Sade, sade bir dil,
• Önden yüklenen bilgiler (ters piramidi düşünün),
• Cevapları tam cümleler olarak ifade etmek.

Yazdıklarınızı yüksek sesle söyleyin, TTSRacher gibi ücretsiz metin-konuşma sistemlerine sahip olun. Sözcükler, yüksek sesle yazılı olduklarından çok farklı gelebilir ve bunun tersi de geçerlidir. Okunabilirlik algoritmaları hakkında çekincelerim var, ancak bunlar netliği ölçmek için faydalı araçlar.

Daha fazla okuma

• Ayrı Bir Listede 'Ses İçeriği için Okunabilirlik Testi'
• Tarzın Unsurları, William Strunk Jr.

HAL, Kötü Bitler Olmadan

Web siteleriyle konuşmak, kanaldan bağımsız web deneyimlerine doğru daha geniş bir geçişin parçasıdır. Web sitelerinin doğası değişiyor. Masaüstünden mobile, mobilden akıllı ev sistemlerine kadar her şey daha akıcı hale geliyor. Hepimiz 'mobil öncelikli' indekslemeyi biliyoruz. 'Önce ses' olana kadar ne kadar var?

Katı kısıtlamalardan uzaklaşmak göz korkutucu ama aynı zamanda özgürleştirici. Web sitelerine bakıyoruz, onları dinliyoruz, onlarla konuşuyoruz. Her biri küçük bir HAL gibidir, içinde tasarlamaya uygun gördüğümüz kadar çok veya az kişilik ve/veya öldürücü niyet vardır.

İster sıfırdan inşa edin, ister eski projeleri güncelleyin, web sitelerini konuşmayı daha kolay hale getirmek için atabileceğimiz adımlar:

• Ekran okuyucuları kullanarak sitenizde gezinin.
• Telefon/ev yardımcıları aracılığıyla sesli sorguları deneyin.
• Anlamsal işaretleme kullanın.
• Konuşulabilir işaretlemeyi uygulayın.

Web sitelerini ekransız durumlar için tasarlamak erişilebilirliklerini artırır, ancak aynı zamanda kişiliklerini, amaçlarını ve kullanışlılıklarını da keskinleştirir. Preston So'nun A List Apart için yazdığı gibi, 'içeriğinizin gerçekte ne kadar kanaldan bağımsız olduğunu analiz etmenin ve stres testi yapmanın etkili bir yolu.'

Web sitelerinizi konuşmayı kolay hale getirmek, onları hızla gerçeğe dönüşen kanaldan bağımsız web'e hazırlar. Bir ekrandaki metin ve görseller yerine siteler soyut ve esnek olmalı, giderek büyüyen bir cihaz yelpazesiyle etkileşime hazır olmalıdır.