十大靠谱网赌平台-十大赌博平台排行榜

十大靠谱网赌平台-十大赌博平台排行榜

可访问组件设计示例:关于ARIA属性、焦点顺序等的设计器指南

表的内容

这篇文章针对的是谁?

如果你负责设计新组件,这些信息将派上用场, 测试接口, 与前端工程师一起工作, 或者你自己就是这样一个工程师,但对可访问性不太了解.

我会讲一些基本的 可访问性 指引及注意要点: 关注订单, 键盘交互, ARIA属性. 我还将展示文档如何帮助开发可访问组件.e. 满足可访问性需求的组件.

注意:可访问性, I mean meeting 可访问性 requirements for people with disabilities; for further details, 请阅读更多内容 十大靠谱网赌平台关于可访问性的文章. 还有,一个善意的提醒: 好的设计 不单单意味着花哨的设计吗, 它也应该是用户友好的, 可访问性是可用性的一部分.

在开发组件时,请记住可访问性

让十大靠谱网赌平台假设您需要设计一个工具提示,当您将鼠标悬停在一个信息图标上时,它会显示出来. 这意味着您应该为您的每个用户提供对这些信息的平等访问权, 不管他们的残疾. 然后,您可能想要坚持以下方法.

假设你的用户正在使用:

  • 只有一个键盘
  • 只有鼠标或其他类似的指向设备
  • 屏幕放大器
  • 屏幕阅读器.

所有这些都已经被W3C开发Web内容可访问性指南(WCAG)的人考虑在内了, 目前正在运行 版本2.1. 指导方针不仅列出了基本原则, 但也包括细节:为什么每个原则是重要的, 它是如何帮助有特定健康状况的人的, 以及如何确保它在实践中得到落实.

注:在一些国家,遵守WCAG具有法律约束力. 如果你正在开发一个将在美国使用的网站或应用程序,你将必须遵守 第508节 而不是. 这两个标准非常相似, 但仍有一些差异, 哪些是被列出和详细的 在这里.

使用鼠标

如果您的用户正在使用鼠标,他们可以悬停在图标上,并看到提示i.e. 这里没有问题. 只需记住,鼠标用户的图标大小必须至少是24x24像素, 对于触摸屏用户,44-48像素.

最小尺寸

用键盘

当用户只使用键盘访问网站时, 他们可能已经遇到了问题, 因为他们没有什么东西可以悬停在图标上. 对于这样的用户, 您必须提供一个选项来用键盘激活提示, 即, 通过Tab键进入图标,查看提示. 为此,您必须将您的图标包含到 关注订单. 用户还必须有一个选项,可以使用Esc键关闭工具提示.

一个工具提示的例子

使用屏幕放大器

对于屏幕放大镜的用户,您应该特别遵守本文中概述的原则 第一节.4.13: Hover或Focus上的内容 WCAG的. 基本上,当鼠标悬停在一个元素或聚焦它时显示的内容必须是:

  • 可解雇的:用户可以在不移动焦点或光标的情况下解散内容., e.g.,按Esc键.
  • Hoverable:用户可以将光标从按钮移动到显示的内容(在十大靠谱网赌平台的例子中, 提示), 内容不会消失. 当屏幕被显著放大时, 很有可能, 在某个时间点, 用户将只看到部分内容, e.g.,一个触发按钮和工具提示的开始. 查看整个技巧, 用户必须有一个选项,可以在不关闭工具提示的情况下将光标从按钮移动到弹出窗口.
  • 持续的:显示的任何附加内容必须保持可见,直到焦点或光标移离按钮或此类附加内容, 或者直到用户用Esc键拒绝该内容.

不符合“可悬浮”标准 未能满足“可悬停”标准:在这个例子中, 用户无法将光标从触发器移动到工具提示.

当屏幕大幅放大时,提示的一部分可能会保持不可见 当屏幕大幅放大时,提示的一部分可能会保持不可见. Hoverable原则说,用户必须有一个选项,当光标移动到整个提示时,可以查看整个提示.

使用屏幕阅读器

至于那些使用屏幕阅读器的人, 你已经将你的图标包含在焦点顺序中, 这意味着视觉障碍的人可以用键盘导航到它. 这需要大声阅读提示,在十大靠谱网赌平台的例子中,这里是ARIA属性, aria-describedbycome into play起作用. (十大靠谱网赌平台将在下面更详细地介绍ARIA属性.将这个标签添加到图标的HTML属性后, 工具提示内容将变为“可见”, 或声音, 更准确地说, 给屏幕阅读器用户. 当元素被聚焦时,它会读出如下内容: Information Icon, .

因此, 您的每个用户肯定都会看到或听到工具提示文本, 也就是说你的任务已经成功完成了.

ARIA属性

wai - aria标准 是一个工具,使网页内容可访问. 它也是由W3C开发的,目前运行版本1.1. 而WCAG描述了网站和应用程序可访问性的基本原则, 当您想要添加更多功能时,WAI-ARIA就会发挥作用, 例如动态内容或自定义控件.

从技术上讲, 屏幕阅读器和其他辅助技术能够进行交互, 默认情况下, 只使用常规的HTML元素, 如按钮, 输入字段, 头, 等. 这意味着你网站的一些高级功能和定制组件可能对那些不使用鼠标或运行屏幕阅读器的人来说是无法访问的. 这些情况使 ARIA属性 不可缺少的. A designer does not need to know them all; 然而, underst和ing how they work is of great helpful. 下面,十大靠谱网赌平台将通过几个例子来进一步解释这个主题.

Aria-label:帮助将一个标题分配给一个组件,该组件将只对屏幕阅读器可见.

例如, 让十大靠谱网赌平台假设你的UI有一个带有铅笔图标的编辑按钮, 因为它看起来很漂亮,不占太多空间, 而铅笔图像通常与编辑操作相关联.

对于视力正常的用户, this should be pretty much underst和able; for a 屏幕阅读器 user, 然而, 十大靠谱网赌平台必须添加一个解释性的标签,这个标签将从视图中隐藏,但不会从屏幕阅读器中隐藏. 要做到这一点,你可以使用 aria-label = "编辑" 财产; when the focus is on the button, it will be read out as 编辑按钮.

aria-label属性

当您不想用可视内容重载UI时,可以使用此属性, 但同时需要为残障人士提供清晰的信息.

Aria-labelledby:允许你引用另一个可见的标题或标题,e.g.,如果您有一组具有共同标题的单选按钮.

Aria-describedby:为现有的可见标题提供附加信息,e.g.,当你有一个输入字段命名为 密码 以及描述密码可能有多长以及它可能包含什么内容的文本.

使用由谷歌提供的Web Accessibility课程的aria-describedby属性的一个例子使用 aria-describedby 财产. Web可访问性课程由谷歌驱动课5. 要查看课程,请在Udacity注册(不需要信用卡信息).

Aria-disabled:允许您在焦点顺序中包含非活动(禁用)组件. 正常情况下, 当你按Tab键时, 不活动的组件将被跳过, 这意味着这个组件对于屏幕阅读器用户来说是不存在的. This is generally correct; in some cases, 然而, 您可能也想让残疾人“看到”这个元素.

让十大靠谱网赌平台假设您有一个带有 提交 button. 默认情况下, 按钮处于非活动状态, but will become available once all fields get filled out; a fairly common 和 familiar pattern. 虽然按钮是半透明的, 它仍然存在, 当所有字段都被填满时,它变得完全可见和活动. 在这种情况下, 屏幕阅读器用户还需要知道表单中最初有一个按钮, 尽管不活跃, 这将帮助他们理解他们需要填写所有字段来激活它.

一个表单示例,其中需要禁用aria属性

查看所有ARIA属性,请参见 W3的完整名单.org.

关注订单

让只使用键盘的人的生活更轻松, 你需要知道集中行为的基本要求:

  • 只有互动元素,我.e. 按钮、链接、复选框等., may be in focus; 屏幕阅读器s have other tools to navigate through text, titles, tables.
  • 焦点顺序必须与交互元素的视觉或逻辑顺序相匹配.
  • 不活跃的控制可能无法聚焦.
  • Tab键将注意力转移到下一个组件,而Shift+Tab键则将注意力转移到上一个组件. 箭头键用于在组件内移动焦点(请参阅下一节中的详细信息).

下面的示例显示 重点遵循规则 违反了, 作为非交互式元素, 即通过复选框接受协议的文本, 是焦点. 来帮助用户阅读与 我接受这些条件 复选框,则可以使用 aria-describedby 属性十大靠谱网赌平台已经提到过.

的 agreement text should not be included into the 关注订单; 而不是, 应该使用aria-describedby属性的 agreement text should not be included into the 关注订单; 而不是, one should use the aria-describedby 财产.

注意:这一原则可以简化问题,甚至对那些没有任何残疾的人, 永久的或暂时的, 因为有些人只是喜欢使用键盘来处理表单.

键盘交互

当用户使用UI时,他们希望对象以某种方式响应特定的击键. 例如, 大多数人都习惯了这样一个事实,即您可以用空格勾选或取消勾选复选框, 用Alt + Down Arrow打开下拉列表, 等. 当控件没有以十大靠谱网赌平台期望的方式响应键盘时, 它很容易看到,并解决问题,使用鼠标或触摸屏. 然而,当用户无法看到界面元素或单击它时,十大靠谱网赌平台就会遇到一个问题.

这是W3C的另一个指南, wai - aria创作实践 方便. 它的目的是向您展示如何在开发可访问组件时使用WAI-ARIA. 的 设计模式和小部件 部分描述了键盘交互以及在创建此类交互时有用的角色和ARIA属性.

例如,对于一个 单选按钮组,十大靠谱网赌平台有以下规则:

  • Tab或Tab+Shift将焦点放在单选按钮组上.
  • 空格键选择单选按钮(如果还没有选中的话).
  • 向右和向下方向键将焦点从一个单选按钮移动到组中的另一个单选按钮, 取消选中前一个按钮,选择当前按钮, 等.

一个单选按钮组的例子

一定要定期查看本指南,并将有用的页面设为书签.

使用文档

最后但同样重要的是, 让十大靠谱网赌平台根据一个开发模态对话的例子来看看如何使用可访问性文档. 让十大靠谱网赌平台假设屏幕上显示了一条错误消息. A sighted user will instantly notice it; a visually challenged one, 然而, 不会, 所以你需要用另一种方式通知他们.

如上所述,WAI-ARIA标准和WAI-ARIA手动状态 所有主要组件应该如何运行. 在十大靠谱网赌平台的例子中,你需要使用 警报dialog (警告和消息对话框)角色,即错误对话框或消息框.

现在是时候讨论WAI-ARIA的关键概念之一,角色.

A 角色,由角色aria属性决定,是用户与UI交互的特定模式. 标准的有 角色的详尽列表 一个人可以分配给控制. 特别地,十大靠谱网赌平台可以 div 表现得像一个复选框, 在这种情况下,屏幕阅读器不仅会读出这个区块的文本, 但也会通知复选框是否被选中, 并播放适当的声音. 对于视力不佳的用户,这种声音将与视力正常的用户的复选框信号相同. 因此, 用户会明白,他们可以通过点击空格键来勾选或取消勾选该元素.

你应该记住那件事, 将某个角色分配给控制元素时, 您需要至少为这个元素配置屏幕阅读器需要的基本ARIA属性,以便正确地读出它. 因此, 对于一个复选框, 您不仅需要指定它的名称, 还有它的州, 选中或未被选中. 正如WAI-ARIA创作实践所说, 没有咏叹调比糟糕的咏叹调好.

现在让十大靠谱网赌平台回到十大靠谱网赌平台的对话. 的 警报dialog 角色允许辅助技术和浏览器识别警报或错误消息对话框,并使其以特殊的方式显示, 比如通过播放系统警报声音.

警报dialog角色的解释 在WAI-ARIA Roles中, 州, 和属性部分, 你们会学到的, 对于具有警报dialog角色的元素, 你必须指定下列属性之一的值(详情见上面):

  • aria-labelledby:指包含对话标题的可见元素,或
  • aria-label:当没有可见的标题,你只需要为屏幕阅读器指定它.

另外,您必须为 aria-describedby 属性,以防对话框中有任何描述文本. 如上所述 aria-labelledby 属性表示元素确实有一个标题. 在十大靠谱网赌平台的例子中,它是一个对话框,引用它自己的名字,当打开时,听起来像: Dialog,

(e.g. Confirm Delete), (e.g. 您确定要删除这个吗? 此操作无法撤消). 因此, 视觉上有问题的用户会清楚地知道屏幕上显示的是什么样的对话框.

接下来,WAI-ARIA说 警报dialog 是模态对话框的子类(dialog 角色),这意味着您必须满足此角色的需求. 简单地说,你会从 模态对话框向导:

  • 焦点移到对话框中的第一个活动元素.
  • 一旦对话框关闭, 焦点移到前面的元素, 除非逻辑要求它被放置到前一个元素之后的下一个元素.
  • 对话框背景上的内容是灰色和非活动的.

如果你不符合这些要求, 您的用户将无法与对话框内容进行交互.

一个对话框

当对话框出现时,它的标题会根据 aria-labelledby 属性,焦点移到第一个交互元素,即文本框. 当焦点移到 特殊指令 场, aria-describedby 属性也会使屏幕阅读器大声读出描述.

因此, 在这里,人们不需要重新发明轮子, 因为所有的要点都已包含在文档中.

注意:WAI-ARIA不只是详细说明每个特定的角色, 它还可以帮助你选择最适合你的需求. 特别是,您将了解到警报dialog角色应该与 警报 角色, 哪个是包含重要和/或紧急信息的活动区域(一种动态内容),您需要向用户提供这些信息,而无需关注这些信息. wai - aria定义 生活区域 由于外部事件的影响,网页区域会发生变化, 而用户的焦点在同一页面的其他地方. 聊天窗口、汇率小部件或计时器都是活动区域的例子. 以前, 这些领域是辅助技术所看不到的, 但现在他们可能会使用咏叹调现场处理, aria-relevant, aria-atomic, 和aria-busy属性.

测试

在您基本熟悉ARIA属性之后, 关注行为规则, 以及键盘交互规则, 你可以自己测试你的UI.

  • 确保所有的交互元素都有焦点, 而焦点在视觉上是可区分的,并且与屏幕上元素的顺序相匹配.
  • 测试键盘与每个交互元素的交互:按下Alt + Down Arrow后必须出现下拉列表, 列表项和单选按钮必须可以用方向键选择, 当您按下Enter键时,必须单击按钮, 复选框必须用空格键选中和取消选中, 当你按下Esc键时,工具提示必须被取消, 等.
  • 安装 屏幕阅读器от谷歌,一个免费的Chrome扩展,将帮助您检查您的UI元素是否发音正确.

结论

现在你可能会问这对我的日常工作有什么帮助. 好吧, 对可访问性需求进行独立的研究,并坚持组件行为的明确规则,这为任何参与十大赌博平台排行榜前端部分的开发人员节省了时间.

You can put down the requirements into a separate document; for me, 然而, 更方便的做法是直接在Figma文件中将符合参数列表放在组件设计旁边.

最后, 再次善意的提醒:无障碍设计将提高可用性,而不仅仅是对永久残疾的人, 但也适用于普通用户. 在以下情况下,所有用户都将受益:

  • 所有的交互元素都可以通过键盘和
  • 每件事都清晰而有逻辑地贴上文字标签.

为此,目标是使用常规的HTML/CSS, 一般用户体验标准,以及常识,并确保坚持:

  • WCAG,其中描述了可访问性原则
  • wai - aria标准, 您不必在网站或应用程序对屏幕阅读器的可访问性和创建复杂的动态设计之间进行选择, 因为你可以同时实现这两个
  • wai - aria创作实践,它详细描述了如何使特定控件可访问.

注:你也可以拿一个 谷歌在Udacity上提供免费课程 如果你想更深入地探讨这个话题.

你可能也喜欢

博客文章 基于表达式树的业务规则编译器
2022年2月09年,
在这篇文章中, 我将告诉您十大靠谱网赌平台如何创建用户通知特性,以及十大靠谱网赌平台如何最终构建了一个基于表达式树的编译器,帮助十大靠谱网赌平台成功地完成了这项任务.
博客文章 例外中的例外 .净
2021年12月24日
c# /中的异常 .净可以有不同的行为. 并不是所有的,也不是所有的,都可以被处理和拦截. 本文描述了一组“击败”尝试-捕获-最终模式的异常.
博客文章 开发SQL查询测试系统. 第2部分
2021年10月21日
十大靠谱网赌平台开发了一个数据层测试框架,以自动化和简化在大型项目上测试复杂SQL查询的过程. 以下是对结果和变化的简短总结.