讓網站更容易交談

已發表: 2022-03-10
快速總結 ↬現代網站不再與屏幕密不可分。 在電話助理、家庭揚聲器和屏幕閱讀器之間，越來越多的人甚至不看就使用網絡。 網站需要以實物進化。

沒有屏幕的網站聽起來不正確。 就像一本沒有書頁的書，或者一輛沒有方向盤的汽車。 然而，有聲讀物，免提車。 越來越多的網站被使用甚至沒有被查看——至少被人類查看。

電話助理和家庭揚聲器是互聯網生態系統中不斷增長的一部分。 在本文中，我將嘗試分解這對未來的網站意味著什麼，設計師可以做些什麼，以及為什麼這最終可能會成為可訪問性的飛躍。 畢竟，有視覺障礙的人無法訪問超過三分之二的網絡。 是時候讓網站易於交談了。

入侵家庭揚聲器

2019 年全球智能音箱銷量突破 1.47 億部，大流行或無大流行的趨勢正在上升。 畢竟，說話比打字快。 從 Google Home 到 Alexa，再到智能手機助手、汽車甚至冰箱，越來越多的人正在使用程序來代表他們搜索網絡。

改編自喬治·奧威爾的《1984》的電影截圖。
對下一代谷歌家庭揚聲器的用戶測試。 （大預覽）

撇開這一趨勢不祥的“老大哥公司”暗示不談，可以肯定地說，每天都有數億人在沒有實際查看的情況下瀏覽網絡。 屏幕不再是瀏覽網頁所必需的，網站應該適應這一新現實。 那些不這樣做的人正在與數億人隔絕。

開發人員、設計師和作家都應該為他們的作品根本不會被看到或點擊的可能性做好準備——它會被聽到和說話。

“

設計隱形

網站談話性主題有兩個主要方面——技術和語言。 讓我們從技術開始，它從基本的內容結構到語義標記等等。 我和任何人一樣熱衷於寫作，但這不是開始的地方。 您可以擁有值得 Daniel Day-Lewis 表演的網站副本，但如果沒有正確安排和標記，它對任何人都沒有多大價值。

古老的基礎

網站被理解而不被看到的想法並不是一個新的想法。 屏幕閱讀器已經存在了幾十年，三分之二的用戶選擇語音作為他們的輸出，最後三分之一的用戶選擇盲文。

本文的重點遠不止於此，但使網站屏幕閱讀器友好為下面更花哨的東西提供了堅實的基礎。 只要其他人已就該主題（下面的鏈接）進行了廣泛的寫作，我就不會在此停留太久，但以下是您應該始終考慮的事情：

  • 清除頁面內和整個站點的導航。
  • 使 DOM 結構與視覺設計保持一致。
  • 替代文本，不超過 16 個字左右，如果圖像不需要替代文本（例如，如果它是背景），則替代文本為空，而不是沒有替代文本。
  • 描述性超鏈接。
  • '跳到內容鏈接'。

視覺思維實際上使我們對許多設計失敗視而不見。 用戶可以並且經常自己將這些部分組合在一起，但這對於機器可讀的網站並沒有多大作用。 使網站易於交談首先要使它們對文本轉語音 (TTS) 友好。 這是一種很好的做法，它極大地提高了可訪問性。 贏贏。

進一步閱讀 TTS 設計和可訪問性

  • W3C 的文字轉語音
  • Front End North Pt 2：Leonie Watson 讓我大吃一驚
  • 使用 AWS 進行文本轉語音（第 1 部分）
  • 使用 AWS 進行文本轉語音並再次返回（第 2 部分）
  • 關於客戶端呈現的可訪問性的註釋
  • W3C 的標籤控件
  • 使用 Mozilla 的 aria-label 屬性
  • 我用屏幕閱讀器上網了一天
  • 來自專家：COVID-19 期間的全球數字可訪問性發展

更花哨的東西

除了打下堅實的基礎外，為屏幕閱讀器和可訪問性設計本身也是一件好事。 有足夠的理由先提一下。 但是，它並沒有完全提供我在本文開頭談到的“免提”瀏覽的增加。 語音用戶界面或 VUI。 為此，我們必須深入研究語義標記。

使網站易於交談意味著在更精細的級別上標記內容。 當人們向家庭助理詢問最新消息、菜譜或餐廳是否在周二晚上營業時，他們不想使用語音瀏覽網站。 他們想要信息。 現在。 為此，需要明確標記網站上的信息。

今年我相當跌倒了語義網兔子洞，我不打算在這裡重複自己。 網絡可以而且應該渴望機器可讀，這包括談話性。

跳躍後更多！ 繼續往下看↓

為此已經存在語義標記。 一個叫做“speakable”，這是一個 Schema.org 屬性，目前處於測試階段，它突出顯示網頁中“特別適合文本到語音轉換”的部分。

例如，我和兩個朋友將每週回顧一張專輯作為一種愛好。 我們最近重新設計了集成語義標記的網站。 以下是頁面結構化數據的一部分，顯示了可說的實際情況：

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

因此，如果有人問他們的家庭揚聲器助理Audioxide對 Muse 的Origin of Symmetry的看法，speakable 應該將其指向專輯名稱、藝術家和簡短的評論摘要。 方便又切中要害。 （並且免除了人們聽我們完整摘要的痛苦。）沒有什麼是以前不存在的。 它只是正確標記。 您還會注意到，選擇一個 CSS 類就足夠了。 簡單。

這種功能比其他功能更適合某些類型的網站，但可能性很大。 食譜、新聞故事、票務可用性、聯繫信息、雜貨店購物……只要我們養成讓網站更容易交談的習慣，所有這些以及更多的事情都會變得更好，每個頁面都包含結構清晰和標記清楚的信息，隨時待命當他們來的時候回答問題。

除此之外，谷歌和 Mozilla 等地的大腦還在努力開發專用的網絡語音 API，允許用戶與表單和控件等進行更複雜的交互。 像這樣的技術還處於早期階段，但絕對值得關注。

家庭揚聲器的興起意味著新舊世界正在發生碰撞。 為一個提供另一個。 我們不要忘記，幾十年來，網站應該是為屏幕閱讀器設計的。

延伸閱讀

  • 會說話的 Web 應用程序 — Speech Synthesis API 簡介
  • Mozilla 的網絡語音概念和使用
  • 什麼是語音用戶界面？ 由交互設計基金會

寫作口語

您已採取措施讓屏幕閱讀器、搜索引擎和所有好東西更好地理解您的網站。 恭喜。 現在我們開始討論更模糊的語氣和個性主題。

設計一個可以說話的網站與設計一個可以閱讀的網站是不同的。 用戶交互的性質是不同的。 要記住的一個要點是，在涉及語音查詢的地方，網站幾乎總是響應式的——回答問題、提供食譜、確認訂單。

紐約時報的一項開放研究發現，對於家庭用戶來說，“與他們的智能揚聲器互動有時會導致令人沮喪甚至有趣的交流，但這感覺比被束縛在推送通知的手機上更好。”

換句話說，你不能也不應該強迫這個問題。 彈出窗口和廣告的“看我”精神以及無休止的參與在這裡沒有立足之地。 你的任務是建立一個好的網站，盡可能清晰簡潔地提供有關指揮的信息。 一個虛擬管家，如果你願意的話。

這在語言上的含義是：

  • 簡潔的句子，
  • 通俗易懂的語言，
  • 前置信息（想想倒金字塔），
  • 將答案表述為完整的句子。

大聲說出你寫的東西，讓 TTSReacher 等免費的文本到語音系統向你回饋。 單詞的聲音聽起來與寫下來的聲音大不相同，反之亦然。 我對可讀性算法有所保留，但它們是衡量清晰度的有用工具。

延伸閱讀

  • A List Apart上的“語音內容的可讀性測試”
  • 小威廉·斯特倫克的風格元素。

HAL，沒有壞位

與網站交談是向與渠道無關的網絡體驗更廣泛轉變的一部分。 網站的性質正在發生變化。 從桌面到移動，從移動到智能家居系統，它們變得越來越流暢。 我們都知道“移動優先”索引。 距離“語音優先”還有多久？

擺脫嚴格的約束是令人生畏的，但它也是一種解放。 我們瀏覽網站，聆聽它們，與它們交談。 每一個都像一個小 HAL，具有或多或少的個性和/或我們認為適合設計的殺人意圖。

無論是從頭開始構建還是更新舊項目，我們都可以採取以下步驟使網站更易於溝通：

  • 使用屏幕閱讀器瀏覽您的網站。
  • 嘗試通過電話/家庭助理進行語音查詢。
  • 使用語義標記。
  • 實施可說的標記。

為無屏幕情況設計網站可以提高其可訪問性，但也可以增強其個性、目的和實用性。 正如 Preston So 為A List Apart所寫的那樣，“這是一種分析和壓力測試您的內容真正與渠道無關的有效方法。”

讓您的網站易於交談，讓它們為與渠道無關的網絡做好準備，這正在迅速成為現實。 而不是屏幕上的文本和視覺效果，網站必須是抽象和靈活的，準備好與越來越多的設備進行交互。