一个网站是由许多直接或间接影响用户体验的元素组成的. 提供可访问的内容并保持一致的转换, 坚持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属性光标是一个很好的设计实践. 它提供了一个额外的视觉指示器来显示按钮处于非活动状态.
提供帮助文本协助!
可以在禁用按钮周围放置可见文本以使其可访问. 文本向用户提供了为什么按钮不可用的上下文. 这与表格上的说明非常相似. 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].