首页 » 自定义焦点状态时要为最需要的用户进行设计

自定义焦点状态时要为最需要的用户进行设计

浏览器使用outlineCSS 属性来呈现元素处于焦点状态的某种视觉指示。焦点状态旨在帮助用户在使用键盘浏览页面时识别哪个元素将注册键盘事件。

设计师和开发者经常会替换浏览器呈现的默认焦点状态。这可能涉及更新默认的,或将其完全删除并用其他 CSS 属性(例如、、、或)outline替换。

无论如何,我们决定在应用中呈现自定义焦点状态,我们都应确自定义焦点状态时要为 它们满足以下可访问性要求:

足够的颜色对比度

我们的焦点状态和周围的颜色之间应该有足够的对比度,以便视障用户可以轻松跟踪当前处于焦点的元素。
颜色变化与其他视觉指标搭配使用:元素边框、字体或背景颜色的变化可能对色盲用户来说不太明显。应与其他不需要用户辨别颜色的视觉变化搭配使用。这也适用于涉及颜色变化的悬停和错误状态。
在高对比度主题中可见:在 Windows 设备上启用高对比度模式时,某些 CSS 属性(包括background和box-shadow)会被忽略。颜色变化可能也不会被记录下来,这就是为什么依赖额外的指示器显得尤为重要,这些指示器对于需要更多背景色和前景色对比度的人来说是可感知的。
虽然可以覆盖默认outline属性,但切勿在没有提供替代方案的情况下删除默认焦点状态。

5. 为键盘用户提供快捷方式
如果有人使用鼠标浏览网页,他们可以在页面加载时滚动 墨西哥电话号码数据 跳过无关的标题内容,以找到他们想要的信息。对于键盘用户来说,这个过程并不那么简化,他们可能需要通过多个导航链接或页面主要内容之前的任何其他控制元素进行切换。

作为开发者,我们可以在应用的每个页面顶部提供一个“跳过链接”,让键盘用户能够绕过页面主要内容之前的控制元素。跳过链接通常隐藏在视图之外,直到获得焦点。使用鼠标与应用交互的用户看不到它,但对于使用键盘的用户来说,它将是第一个获得焦点的元素。

单击链接时,焦点转移到主要内容容器,键盘用户可以立即开始浏览页面上的主要控制元素。

键盘可访问性:Shopify 启动您的业务主页的部分屏幕截图,显示“跳到内容”功能

跳过链接不仅仅是方便的快捷方式。它们是绕过块的示例,需要满足 A 级 WCAG 标准。

通过亲自成为键盘用户来经常测试你的应用
对于不习惯使用辅助技术或设备的人来说,测试键盘辅助功能的学习难度相对较低。您只需要有键盘、熟悉标准键盘行为以及 Windows 高对比度模式(通过购买 Windows 设备或安装虚拟机即可)。

在测试应用程序的键盘可访问性时

请记住以下一些问题:

我可以使用键盘与任何响应鼠标点击和手势的东西进行交互吗?
当该元素获得焦点时,有人会知道如何与它交互吗?
焦点顺序是否与页面上交互元素的视觉顺序相匹配?
即使我需要更高的颜色对比度,我能否跟 8 家顶级定性市场研究公司 踪当前焦点所在的元素?
我可以轻松找到页面的主要内容吗?
对所有这些问题都回答“是”并不需要花费太多精力,并且可以对任 印度手机号码 何情况下的用户产生积极的影响:无论他们是否有身体残疾、正在寻找节省时间的方法,还是需要用一只手使用电脑。

无障碍测试是应用开发的一个重要组成部分。具体来说,键盘无障碍与为使用屏幕阅读器的用户提供替代文本或为听不到音频内容的用户提供字幕一样重要。归根结底,如果您希望应用完全无障碍,则不应要求用户必须使用鼠标。

滚动至顶部