一个列表

菜单

会话的语义

作为Alexa,Cortana,苹果智能语音助手,甚至客户支持聊天机器人也成为了常态,我们必须开始认真考虑内容的外观和声音。我们可以也应该使用HTML和ARIA来构建我们的内容,明智的,最重要的是,有意义的。

内容,受限制的

继续下面的条

大多数机器人和数字助理使用特殊编码的数据集,API和模型,但是网上有超过45亿页的内容,被困,在许多情况下,在我们的网站上。betway体育注册的文章,故事,博客文章,教材,书,以及网络上的营销信息,但在许多情况下,在非可视上下文中是不可用的。一些搜索蜘蛛的项目,尤其是正在努力改变我们的混乱,将非结构化网页转换为可用的内容。但是,我们可以做更多的事情来促进这一点,使我们的网页更容易被真实的人和计算机使用,从而为基于语音的用户体验提供动力。

让我们从屏幕上释放我们的内容,并授权它去任何地方。我们可以帮助它找到进入虚拟助理和其他语音响应技术,甚至无语音聊天机器人的方法,而无需反复编码和重新编码这些内容,冗余格式。我们甚至可以让用户通过填写表单和纯粹通过语音操作Web上的小部件来积极参与我们的内容。这都是可能的,但是我们需要花很长时间,仔细看看我们的标记。

考虑一下这个新兴市场元素:

真的?很高兴见到你。

肯定的是,它是视觉上的提供斜体字,但它也增加了对内容的强调。HTML充满了有助于传达意义的元素,细微的差别,和关系。了解它们可以使我们编写更具表现力的文档。忽略它们会破坏我们标记的内容的可用性。当我们创建网页时,我们需要注意在这个过程中我们与客户的对话,并用心选择元素。

HTML如何成为我们的虚拟助手的最佳指标之一是另一项辅助技术:屏幕阅读器。屏幕阅读器不仅像它们的名字所暗示的那样,它们还允许用户以各种方式快速浏览页面,并提供转换视觉设计结构的机制——接近性,比例,等。——变成有用的信息。至少当文档被精心编写时,它们是可以做到的。

所以,让我们来看看如何创建更有意义的文档,并使它们在“无头”ui中更有用。

有力的短语

我们将从所谓的“措辞”元素开始。前面看到的重点是这种元素类型的一个示例。我们以前称它们为“内联”元素,因为,默认情况下,它们以内嵌文本的形式显示。但是“措辞”更准确地描述了它们在我们的网页中所扮演的角色,因为,好吧,他们标记短语。

我们之前看过这个例子:

真的?很高兴见到你。

在这里,“真的”这个词是用来强调的。我不知道现在任何一个语音合成器都像我们一样强调文本,但这还只是宏伟计划的早期阶段。我相信它会发生的——很多人都在关注如何打造更人性化的声音——听起来可能是这样的:

使用语音合成模拟强调

有时候强调是不够的。当我们想指出内容对于我们的客户来说是至关重要的,的强大的元素是正确的方法。“强”的意思是“非常重要”。

请填写下表与我们联系。所有字段都是必需的。

视觉上,新兴市场强大的显示为斜体(如前所述)和粗体,分别。

真的?很高兴见到你。
请填写下表与我们联系。 所有字段都是必需的。

现在我们还有元素,哪一种渲染是完全一样的新兴市场强大的,分别。在互联网的早期,这让我们中的许多人相信它们是可以互换的。与写得比较短,它们在网络上扩散开来。从语义上说,然而,的元素与它们的掺杂剂有很大的不同。

这个元素类似于强调元素,但更通用的。它用来表示另一种声音或情绪。它可以用来表示讽刺,惯用语,语言的变化。

这是一部糟糕的电影,它赚了2亿美元。去图!她的精力和生活乐趣

在后一个例子中,你可能还注意到我已经指出了短语“joie de vivre”是用另一种语言法语使用属性。这个属性让数字助理知道它可能想要改变发音。

支持语音合成中的语言转换

不可否认,复制此使用语音合成美国石油学会还是有点粗糙,但随着时间的推移,这无疑也会有所改善。

这个元素用于应与周围文本分隔或“样式偏移”的内容。不过,这并不意味着这个短语有更大的重要性。我喜欢用它来称呼人和产品的名字。关键词将是另一种选择。书,电影,其他媒体也有自己的元素,我马上就去。

连续12年,超过10万家公司采用了巴斯坎普的工作方式。不是试过了,但签约,说:“啊哈!”从不回头。没有什么比这更好的了巴斯坎普

在功能上,的元素非常像跨度-通用短语内容,尽管标签较短。

既然我提到电影和书籍,我会很快提出引用元素,是指被引用或被引用作品的标题。

我写了这本书自适应网页设计。如果你喜欢这篇文章,您将在其中找到关于语义的深入信息(以及更多)。

专用语法

HTML还有其他专门的短语结构,如ABBR缩写和首字母缩写。传统上,我们建议使用title来提供一个扩展:

HTML是用于创建网页和Web应用程序的标准标记语言。

就像网上的很多东西一样-黑帽SEO实践涉及标题促使屏幕阅读器完全忽略该属性。视觉浏览器仍然提供工具提示,所以它们不是完全无用的,但鉴于屏幕阅读器不注意标题当前属性,他们不太可能被虚拟助理发现。

说实话,最好避免标题完全。为了绝对清楚起见,你应该介绍和解释重要的缩写词和首字母缩写词第一次使用。甚至还有表示定义上下文的元素:DFN

超文本标记语言(HTML)是用于创建网页和Web应用程序的标准标记语言。

更多的技术性写作,的KBD代码元素非常有用。它们表示用户可能需要按的键以及用于编写软件或编码文档的单词和短语:

新闻标签在文档中从一个链接移动到另一个链接KBD元素用于指示键盘键名。

然后是跨度元素,用于一般短语,如前所述。这是一个没有意义的元素,因此,默认情况下不会以任何不同的方式发表意见。

没有什么特别有趣的在这句话中。

更多的措辞元素,但是这些是你在大多数项目中最可能需要的。

清除连接

链接也是措辞元素,但是我特别想把他们叫出来,因为他们提供了一组更丰富的选项来微调我们的用户如何与我们的页面交互。

我们使用链接的主要方式是连接相关内容。选择有意义的单词和短语作为链接文本非常重要。一般来说,像“单击此处”和“阅读更多内容”这样的链接并不是非常有用,尤其是当每个链接的文本被读出给你时,这是无头用户界面浏览网页的一个关键方法。把你链接的地方弄清楚。如果需要,可以对句子进行重组,以便提供良好的链接文本。

如果你被“阅读更多”风格的链接所吸引,你可以把你的蛋糕也吃了吧通过在链接中包含不可见的文本。这给了你一个简短的,从视觉角度看统一的链接,但也允许您在无头场景中提供上下文。这里有一个例子我的网站导航。我把它分成几行,让它更容易理解:


	讲话

在链接中,我有两个在我的CSS中被分类为“hidden”的元素,我把里面的内容藏起来不让有眼光的用户看到,但我将它们隐藏起来,让辅助技术仍然可以使用它们。因此,有视力的用户只能看到“演讲”,而屏幕阅读器或数字助理只能看到“我演讲活动的列表”。

你也可以提供扩展唱名标注在锚元素上。如果那个“咏叹调”插嘴唱名标注你看起来很奇怪,它来自可访问的富Internet应用程序(ARIA)规范,将类似操作系统的复杂UI结构映射为可访问的UI结构的持续工作。我选择了隐藏的文本路径,这让我能够在特定的场景中灵活地显示隐藏的内容。

你们中有些人可能想知道为什么我不提唱名标注当我提到ABBR元素。看起来很合适,和唱名标注规格当前允许属性ABBR元素。问题不是规格,但事实上唱名标注不是每次都会被浏览器曝光,也不是总是被辅助技术在诸如ABBR。有很好的理由,他们已经做了很多了专注于暴露唱名标注在互动元素上,地标,小部件

值得注意的是,链接中隐藏的文本可能会给依赖于屏幕和口述软件组合与计算机交互的人带来问题。如果显示的链接文本与标记中的实际链接文本不匹配,如果用户说在我的网站导航中可见的链接文本(如“speaking”)不会实际激活链接。同样值得重申的是质量链接文本的重要性;不要使用唱名标注在文字错误的链接或不必要的冗余(如“阅读更多”)上打印。

我们还可以使用链接来引用当前文档中的内容,甚至在另一个文档中的特定位置:

为了说明分层样式的概念,也许最好从一开始就开始:不应用样式。图3.3显示Safari中仅应用默认浏览器样式的住宿文章…。
       

在这个代码示例的末尾,我们有一个元素,该元素在文档的其他位置引用。我们可以使用片段标识符将读取器直接跳转到引用,而不是让读取器自己查找“图3.3”。为设计中的每个重要元素添加一个唯一的ID属性,可以方便您或其他人直接链接到它们。

如同我之前分享的元素示例,你可以告诉你的读者链接页面使用的语言哈桑


	西班牙语

这是西班牙语,意思是“用西班牙语阅读本页”,链接指向该页的西班牙语翻译。这里使用的是隐藏内容方法,同样的,有视力的用户只能看到“西班牙语”。

你可以指出被链接的内容,使用类型属性:

这部电影下载

我们还有下载关键字,这将通知浏览器应该下载而不是显示相关文件。再一次,一个简单的属性,使一个简单的HTML文档能够做这么多:

这部电影下载

当在语音上下文中遇到这种类型的链接时,您的数字助理可以提示您将文件保存到一个连接的存储帐户,像Dropbox一样。很酷,但值得注意的是,浏览器会忽略下载用于安全目的的跨源链接的属性。不幸的是,这意味着您不能使用此方法从内容传递网络(CDN)下载文件。

锚元素还支持非web“伪”协议。最常见的两个例子是“mailto:”表示电子邮件链接,“tel:”表示电话号码,但是“短信息”和“网络电话”也很常见。

给我发电子邮件

致电康卡斯特客服

一些操作系统(和浏览器)允许已安装的应用程序注册可提供应用程序内功能访问的自定义协议。但是需要注意的是:未识别的协议可能会提示用户搜索可以使用它的应用程序。

所有这些措辞的内容都很棒,但我在杂草丛中度过了很多时间。让我们往后退一点,看看文档本身。

合理的结构

毫无疑问,你知道,无头ui给用户带来了更大的认知负担。当你看不到界面时,你很难知道你在界面的哪个位置。当你不能根据视觉提示来收集界面信息时,四处走动也很有挑战性。界面越复杂,这将变得更具挑战性。

视觉界面也是一样,这就是为什么“手机第一”思想鼓励我们把每一页都集中在一项任务上。这样可以降低噪音并提高信号。但是大多数网页都是清晰和直接的对立面。随着屏幕尺寸的增大,我们找到了更多的东西来填补这个空间。分享链接,相关内容,交叉促销,等等。有时很容易忽略实际内容。

为了对抗这一点,屏幕阅读器提供许多机制使用户能够收集有关UI的信息并高效地在其中移动。。最常见的一种是将focus carat从一个交互元素移动到另一个元素。传统上,移动是通过键盘选项卡键完成的,但在大多数文档中,也可以通过语音使用诸如“next”和“previous”这样的关键字,用户正在从一个链接移动到另一个链接。这就是为什么提供信息性链接文本如此重要的原因。

这个扭转是什么约翰哈萨尼-早期的博弈论者称为无知之幕以及罗尔斯发现的,一次又一次,参与实验的人会倾向于建立最平等的社会。

值得注意的是表单元素按钮,输入,等等。—也是网页的默认选项卡顺序的一部分。

通过添加a,可以将传统上不可调焦的元素包括在选项卡顺序中TAB顺序属性的值为“0”(0)。这可以确保关键的接口组件不会被用户意外地绕过,而这些用户正通过选项卡浏览接口。顺便说一下,它还可以给有视力的用户键盘控制可滚动的元素

文档遍历的另一种模式是按标题浏览。各种各样HTML标题级别创建一个自然的文档大纲,辅助技术可以让用户使用这些标题浏览内容:

这是页面的标题

这是一个部分的标题

此标题为小节

……等

由于在这种模式下只读取标题元素的内容,最好避免使用滑稽的营销用语,坚持总结一节的内容。

最近,文件“地标”有出现,提供对页面关键部分的快速访问。地标元素最初是作为咏叹调的一部分引入的。使用角色属性,您可以定义页面特定区域的功能。考虑以下事项:


       

在这个例子中,导航列表位于div用一个id“nav.”虽然这是一个有意义的标识符,用于样式设计,脚本编写,锚定,的div实际上不会像导航那样接触辅助技术。添加一个角色“导航”,然而,使该函数显式:


       

有许多角色价值观可以作为标志:

  • 横幅
  • 航行
  • 搜索
  • 主要
  • 互补的
  • contentinfo

地标还让用户有机会直接跳到界面中的某个位置,这非常有用。在语音环境中,用户可以要求他们的数字助理“给我读这个页面的导航”或“搜索木制婴儿玩具”,助理可以使用这些标志快速响应这些命令。

值得注意的是,这些地标中的大多数都有等价的HTML元素。这是因为HTML5和ARIA同时开发,两人都希望解决网络的相同局限性。以下是ARIA里程碑角色与HTML等价物的概要:

  • 旗帜-第一页眉元素不在内部分段内容
  • 导航-导航
  • 主-主要
  • 互补-一边
  • ContentInfo-第一个页脚元素不在内部分段内容

这里显示的每个HTML5元素都会自动分配其相应的aria角色被现代浏览器识别,并被现代辅助技术识别。然而,在旧的浏览器和辅助技术组合中,自动角色分配可能不会发生。这就是为什么我们经常看到导航带有“导航”的元素角色或者类似的,即使验证器将它标记为不必要的。

在我结束之前最后一点我想接触的是div元素。


       
这只是内容的一般划分。

我们经常雇用div当我们想把一些元素组合在一起时。很好,但是div是一个没有意义的元素,在上下文中对接口没有任何添加。相比之下,其他组织元素确实为页面增加了价值:

  • p——一个段落;语音合成器自然会在它们之间暂停。
  • -订单重要的项目清单
  • UL-顺序无关紧要的项目列表
  • -列表中的一项
  • 戴斯。莱纳姆:-术语及其相关描述的列表
  • dt-描述表中描述的术语
  • dd-描述列表中术语的描述
  • 引用-一长段引用内容
  • -参考内容(图像,桌子,等)
  • 图幅-数字的标题

其中一些元素属于以下类别的元素“流”内容。在更高的层次上,有许多组织元素可供选择:

  • 文章-一段可以独立存在的内容
  • 部分文件或文章的一部分
  • 页眉-文件的序言内容,文章中,或部分
  • 页脚-文件的补充信息,文章中,或部分
  • 主要-文件的主要内容
  • 导航——导航内容
  • 一边——补充内容

有很多有意义的元素可以让我们的数字助理为我们的客户做更多的事情。我们用得越多,我们的助手越有用,我们的用户感觉越强大。例如,使用文章标题元素可以支持语音命令,如“请为我读纽约时报今天“不涉及任何类型的专门数据馈送。

一个通用的div这些都不会给你带来任何好处。

创建对话

HTML是一种真正强大和富有表现力的语言,经常被忽视和低估,但是它有着令人难以置信的潜力,可以培养与用户的对话,而不需要我们付出很多努力。只要花时间编写好web页面的代码,我们的站点就可以像与客户交流一样与客户交流。想想我们的网站现在是如何体验无头界面的,这将为现实世界和数字世界之间更自然的互动奠定基础。

9读者评论

加载评论