增强按钮的可访问性:一个深入的指南!

By: 天网科技美国有限责任公司
8 mins
500
禁用按钮的可访问性

一个网站是由许多直接或间接影响用户体验的元素组成的. 提供可访问的内容并保持一致的转换, 坚持web开发最佳实践是强制性的. 当涉及到所有网络元素的可访问性时,网站按钮就是其中之一.

有时,网站会禁用影响用户与网站互动的按钮. However, 由于某些技术要求,例如该功能不可用,这些按钮被故意禁用, 缺少或无效链接, 或者链接是未经授权的用户.

However, in any case, 重要的是要确保禁用按钮不会增加网站的跳出率和损害其可访问性.

禁用按钮的缺点-改善其可访问性的原因!

  • 禁用按钮会造成混淆并误导用户!

    患有 认知或学习障碍 可能会觉得奇怪,为什么一个按钮不工作,或者这可能会让他们感到困惑. 因为界面的其余部分都在工作,只有按钮不起作用, 这会让他们感到困惑. 有时,禁用按钮不提供任何信息,为什么他们不工作. 这种情况会导致消极的用户体验并降低转化率.

  • 禁用按钮很难找到!

    WCAG无障碍指南 对禁用按钮的颜色对比度没有具体要求. Thus, 符合无障碍标准的网站, 禁用按钮大多为灰色或静音颜色, 对于低视力或有视觉障碍的用户来说,哪些是有问题的.

  • 辅助技术无法感知被禁用的按钮!

    禁用按钮是不可见的 辅助技术,因此依赖这些技术的用户无法听到禁用按钮的存在.

使禁用按钮可访问的提示!

  • ARIA can help!

    如果在网站设置中, aria禁用属性保持为“true”。, 然后,按钮将接收TAB焦点,并向屏幕阅读器指示该按钮处于非活动状态. 如果按钮(使用了aria-disabled)故意保留在DOM顺序中, 使用的网页设计需要通过对比度最小值.

    使用aria禁用属性并允许按钮接收焦点的代码:

    要从选项卡顺序中删除禁用按钮,可以使用负选项卡索引. 当使用HTML disabled属性时,它将复制控件的行为.

    If a custom control is made using

    or non-HTML elements, 即使使用role="button",它们也不支持aria-disabled属性. 在这种情况下,应该使用aria等效项来禁用该控件.

    Edit

    重要的是要确保焦点顺序是一致的,并且禁用aria属性有助于保持所有交互元素的可见性,同时使它们保持禁用状态. 因此,不需要完全移除按钮. 提交用户暂时无法使用的表单和项目中的按钮是至关重要的.

    但是,由于缺乏验证而保持禁用按钮并不是一个好的设计. 但是如果必须使用这样的设计模式, 建议提供错误消息来解释确切的问题.

    On the other hand, the HTML attribute fully disables the button by removing it from the tab order. 然而,它被宣布为“不可用”的辅助技术在浏览模式.

  • 视觉指标是为了消除这个问题!

    在禁用按钮上放置CSS属性光标是一个很好的设计实践. 它提供了一个额外的视觉指示器来显示按钮处于非活动状态.

    disabled button

  • 提供帮助文本协助!

    可以在禁用按钮周围放置可见文本以使其可访问. 文本向用户提供了为什么按钮不可用的上下文. 这与表格上的说明非常相似. For example, 如果用户正在填写表单, 在提交按钮上方有一个说明-“在点击提交按钮之前,必须填写此表单中的所有字段”。. So, 如果用户没有填写所有的字段,他们就会知道为什么提交按钮不适合他们.

    考虑对帮助文本进行不同的样式设计,使其可见并与禁用按钮区分开来.

  • Avoid muting colors!

    Often, 禁用按钮颜色暗淡或颜色对比差, 这会降低低视力用户的可见度.

    To solve this issue, 禁用按钮不使用默认颜色, instead, 使它们不同于主要和次要按钮. 因此,用户将知道经常使用的按钮与禁用的按钮是不同的. 通过对比度检查器检查符合wcag的颜色.

  • 尽量不要禁用按钮!

    解决禁用按钮可访问性问题的更好方法是不要禁用它们. 但如果让它们失效很重要的话, 坚持可访问性指导方针,以确保流畅的用户体验.

Wrapping up

增强禁用按钮的可访问性涉及视觉, technical, 以及情境策略. 通过坚持最佳实践,例如保持清晰的视觉指示器, 使用适当的HTML和ARIA角色, 提供相关信息, 进行彻底的测试, 创建一个包容和用户友好的web体验是可能的.

可访问性是一个持续的承诺, 通过在网页设计和开发过程中优先考虑它, 一个组织致力于为每个人创造一个更公平的数字世界.

在天网科技,我们提供 完整的数字无障碍解决方案 包括可访问性审核, remediation, 文档可访问性, training, ongoing monitoring, 并支持制作和改进网站的可访问性. 我们提供基于人工智能的“All in One辅助功能工具,是一种简单、快速、经济高效的可访问性解决方案. 让我们使您的网站或web应用程序为每个人访问, 这样每个用户都可以无缝地参与进来. 欲了解更多信息,请pg电子官网 [email protected].

0