让网站更容易交谈

已发表: 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所写的那样，“这是一种分析和压力测试您的内容真正与渠道无关的有效方法。”

让您的网站易于交谈，让它们为与渠道无关的网络做好准备，这正在迅速成为现实。 与屏幕上的文本和视觉效果不同，网站必须抽象且灵活，可以与越来越多的设备进行交互。