镇江市建设审图网站,怎么介绍vue做的购物网站项目,网站建设邀请函,免费制作logo生成器在线设计、交流和实现不同领域内容的易访问性决策#xff0c;涉及到一系列考虑因素#xff0c;以达到更容易访问的产品体验。
Material使用的框架借鉴了WCAG标准和行业最佳实践#xff0c;以帮助任何人预测、计划、记录和实现可访问体验。
下面描述的三个阶段有助于将可视化UI…设计、交流和实现不同领域内容的易访问性决策涉及到一系列考虑因素以达到更容易访问的产品体验。
Material使用的框架借鉴了WCAG标准和行业最佳实践以帮助任何人预测、计划、记录和实现可访问体验。
下面描述的三个阶段有助于将可视化UI转换为基于文本的线性用户体验并将其映射到代码。
一 概述
易访问性标记是为设计规范创建文档的一个组成部分。
产品的可访问性有三个关键方面需要指定:结构、流程和屏幕上的元素。 二 结构:标识和标题
定义内容和UI布局以改进导航和便于功能理解。
辅助技术(AT)依靠清晰、轮廓分明的结构来处理页面信息主要通过使用标题和标识进行导航。许多辅助技术如屏幕阅读器将设计转换为线性体验这意味着许多用户以分层的、预先确定的顺序与内容交互。因此提前考虑结构决策可以提高产品的可访问性。
仅适用于网页:地标和标题可以帮助辅助技术用户定位到网页并允许轻松导航和遍历文档或页面的大部分内容。
通过对页面的各个部分进行分类和标记通过布局设计可视化地传达的结构信息也可以用代码实现并通过页面显示。 一个页面关系图的例子它映射了一个UI的区域以便考虑相对的标志和标题
banner 网站logo或网站名字search 搜索navigation 导航main 主要信息展示区域region padding之内的信息展示区域complementary 补充内容有些后台现在没有这部分
2.1 识别标识和标题
2.1.1 定义标识
标识是建立布局高层结构的大块内容。它们是一组ARIA角色为web页面的公共内容区域提供了方便的访问和重要的意义。
有八个角色:导航、搜索、主要区域、横幅、补充、内容信息、区域和表单。
W3C ARIA指南中的八个里程碑式角色包括:
导航:包含导航链接列表(可以有多个在这种情况下您应该在标签中进行区分)搜索:搜索字段主要区域:由UX定义的主要内容区域。应该只有一个。横幅:通常是页眉;页面之间重复的内容通常包含导航和工具栏。应该只有一个。补充性:可以独立于主要内容的侧边栏或侧边栏内容信息:通常是页脚;包含描述网站及其内容的信息(例如版权)。应该只有一个。区域:内容区域是重要的内容块。它们可以嵌套在“主”地标内。区域应该用名称标记使该区域的目的清晰。表单:获取并存储用户信息
添加无障碍标签
向多次出现的任何里角色(通常是区域或导航)添加清晰且特定的标签。这将有助于用户区分信息。
所有地区以及任何标识都应添加标签标签将增强其意义。例如解释侧边栏的内容或目的。
不要在标签中重复标识角色。 这个布局有两个区域分配了导航角色。
每个标识都应该有一个唯一的标签以帮助用户区分元素之间的区别。
2.1.2 定义标题 使用辅助技术的用户经常在标题的帮助下浏览网页。它们创建了一个清晰的层次结构来帮助用户导航和操作。
根据内容层次结构而不是视觉样式来定义标题标题不应该跳过一个级别例如不要从H2直接到H4而不使用H3根据内容的层次结构将页面上的内容按顺序映射到标题(H1-H6)建议使用一个H1作为页面整体标题 标题展示例子图中h1到h4标签为html代码。
除了风格之外还要考虑层次结构。
确保标题与整体的标题一致。如果他们不这样做考虑改变UI中的标题样式确保用户体验良好或者添加标签。
人话主标题(页面整体标题)内容下子标题要和主标题信息相关否则应改变UI中的样式。其实不相关的信息不应该在一个页面中都设置为标题。
标题级别由布局的信息体系结构展示——应用于一组项目的结构层次结构。页面的视觉样式不需要在视觉突出和视觉层次方面匹配标题级别。这个不太懂
人话标题仅用于信息展示其组内内容没必要在视觉突出和视觉层次方面和标题匹配。比如H1组内的信息非标题内容没必要字号比小组中字号大。
当然仅个人理解……
三 流程:焦点顺序和键盘导航
定义和优化线性和键盘辅助用户体验。
屏幕阅读器、键盘和其他辅助技术用户可以在不使用传统鼠标或触摸屏的情况下处罚导航并与应用程序交互。能够通过使用标签、箭头和其他常见的导航按钮完成他们在应用程序中的使用目标。通过有策略地排序元素位置简化流程并降低整个页面的复杂性。
通过使用预定义的选项卡排序避免增加更多的操作除非用户操作需要特殊定制。默认阅读顺序遵循DOM(内容在源代码中编写的顺序)通常从左到右;从上到下。键盘导航可以在公共组件中预先定义。使用默认模式详见UI 学习 二 可访问性 模式-CSDN博客除非有打破默认模式的用户体验模式或自定义组件。
3.1 用例分组
用例分为主要和次要用户操作重要性。用例的优先级应该影响关于用户操作优先级的决策。
3.2 定义初始焦点和组件级焦点
焦点是指哪个控件是当前用户交互的活动目标例如鼠标点击或键盘点击。通常tab键在交互元素之间移动焦点。
定义用户加载屏幕时的初始焦点以及具有多个交互元素(如复杂的卡片或对话框)的组件的初始焦点。 在Google主页的例子中尽管在页面的搜索字段上方和周围有链接和按钮但应将用户最初的注意力放在支持最常见用户目标的元素上。
当元素由用户激活或用户更改上下文时焦点尤为重要。
例如当一个对话框被触发时检查以下内容:
焦点被设置为对话框组件可能是对话框中的特定交互元素例如文本输入字段或编辑按钮当用户关闭或取消对话框时焦点将返回到启动该操作的交互元素 1、定义初始焦点和组件级焦点
3.3 定义非典型键盘导航
用户应该能够使用选项卡、方向键和其他键盘快捷键完成主要和次要用户操作。 通过标签导航卡片上的交互元素体现操作顺序和操作重要性。
Tab通常在交互元素之间移动焦点通常用作主要导航。Tab Shift反转方向。
箭头键通常用于在组件中导航(例如在表单中的单元格之间移动或遍历菜单中的选项)。
点击激活链接或按钮或者在表单提交按钮具有焦点时提交表单。 在独特布局和用例的情况下可以帮助将一组交互元素分组为单个选项卡。
并使用箭头键遍历子元素。
使用Tab导航进行焦点组使用箭头键遍历子元素
四 元素
添加辅助功能标签、定义角色并指示装饰元素
需要标签的视觉元素
没有可见文本或文本中没有足够上下文的交互式图标或按钮(例如带有铅笔图标的编辑按钮)交互式图像视觉提示(包括进度条和错误处理)有意义的图标(例如e.g., 状态图标)有意义的图像(例如图表、图片和插图)
文本元素需要标签来添加额外的上下文
一般链接如(例如“了解更多”)带有通用文本的按钮(例如“保存” 当页面上有多个这样的按钮时)
不需要标签的元素
非交互式UI文本因为这将由屏幕阅读器自动读取带有足够文字的按钮(例如“下载图像”)
注意:本文使用通用术语的可访问性标签来指代几种不同的类型包括ARIA标签和alt标签。当可访问性标签在代码中实现时它们将被转换为平台的适当类型。此外角色这个术语用于涵盖web应用程序的一般组件控制类型和ARIA角色。
4.1 标签元素
易访问性标签帮助那些不能依赖产品视觉界面的用户。
周到的标签有助于使基于文本的体验与视觉体验一样可用。
标签应该简明地描述元素的内容、目的和行为。 示例:这些图标的可访问性标签描述了它们的用途而不是图标的外观(例如“放大镜”)。
4.2 为有意义的图像和交互元素添加标签
在视觉上添加标签以传达意义或增强内容。
标签应该简洁具有描述性并传达图像的内容和背景。
这适用于在支持文档中找到的信息图图形和其他有指导意义的图像。 标签“语音搜索”描述了与输入法(语音)配对的用户任务(搜索)。
不要在标签中包含元素类型(按钮、菜单等)。这将通过为元素分配适当的角色而自动添加。 microphone:麦克风
隐藏图像
装饰性的图标和图像不能增强视障用户的体验应该标注为装饰性以便将它们隐藏在代码中。
不太理解……装饰性元素是点击无效果吗 将装饰性视觉元素标记为“隐藏”。
4.3 为交互元素分配角色
ARIA角色适用于web应用程序并指定如何在HTML之上增加网页的可访问性。
对于web为所有交互元素分配ARIA角色对于非web根据您的设计系统组件(按钮滑块菜单等)分配角色。
分配ARIA角色(web)或组件类型(移动端)来将期望的交互模式传递到操作中。请注意有些视觉元素可能看起来相同但行为不同。
通过为交互元素分配角色来定义它的类别可以帮助使用辅助技术的用户建立对如何与该元素交互的期望并预测交互时可能发生的事情。 不要在标签中包含控件类型。屏幕阅读器会自动添加控件所以您可以让它重复(例如“Got it button button”差不多就是“点我点我”)
