一个网站是由许多直接或间接影响用户体验的元素组成的. To offer accessible content and maintain a consistent conversion, adhering to web development best practices is mandatory. 当涉及到所有网络元素的可访问性时，网站按钮就是其中之一.
有时，网站会禁用影响用户与网站互动的按钮. However, 由于某些技术要求，例如该功能不可用，这些按钮被故意禁用, missing or invalid link, or the link being unauthorized for users.
However, in any case, 重要的是要确保禁用按钮不会增加网站的跳出率和损害其可访问性.
禁用按钮的缺点-改善其可访问性的原因!
Disabled buttons create confusion and mislead users!
Users suffering from cognitive or learning disabilities 可能会觉得奇怪，为什么一个按钮不工作，或者这可能会让他们感到困惑. 因为界面的其余部分都在工作，只有按钮不起作用, it will be confusing for them. 有时，禁用按钮不提供任何信息，为什么他们不工作. 这种情况会导致消极的用户体验并降低转化率.
Disabled buttons are difficult to find!
WCAG accessibility guidelines has no specific requirement for disabled buttons' color contrast. Thus, websites that conform with accessibility standards, have disabled buttons mostly in gray color or muted color, 对于低视力或有视觉障碍的用户来说，哪些是有问题的.
Assistive technologies cannot perceive disabled buttons!
Disabled buttons are invisible to assistive technologies，因此依赖这些技术的用户无法听到禁用按钮的存在.
Tips to make disabled buttons accessible!
ARIA can help!
If in website settings, the ARIA-disabled attribute is kept ‘true’, 然后，按钮将接收TAB焦点，并向屏幕阅读器指示该按钮处于非活动状态. 如果按钮(使用了aria-disabled)故意保留在DOM顺序中, the used web design is needed to pass the contrast minimum.
使用aria禁用属性并允许按钮接收焦点的代码:
要从选项卡顺序中删除禁用按钮，可以使用负选项卡索引. 当使用HTML disabled属性时，它将复制控件的行为.
If a custom control is made using
or non-HTML elements, 即使使用role="button"，它们也不支持aria-disabled属性. 在这种情况下，应该使用aria等效项来禁用该控件.Edit重要的是要确保焦点顺序是一致的，并且禁用aria属性有助于保持所有交互元素的可见性，同时使它们保持禁用状态. Thereby, the buttons do not need to be removed completely. 提交用户暂时无法使用的表单和项目中的按钮是至关重要的.
但是，由于缺乏验证而保持禁用按钮并不是一个好的设计. But if such a design pattern must be used, 建议提供错误消息来解释确切的问题.
On the other hand, the
HTML attribute fully disables the button by removing it from the tab order. 然而，它被宣布为“不可用”的辅助技术在浏览模式. Visual indicators are to eliminate the problem!
在禁用按钮上放置CSS属性光标是一个很好的设计实践. 它提供了一个额外的视觉指示器来显示按钮处于非活动状态.
Provide help text assistance!
可以在禁用按钮周围放置可见文本以使其可访问. 文本向用户提供了为什么按钮不可用的上下文. It is quite similar to instructions on forms. For example, if a user is filling out a form, 在提交按钮上方有一个说明-“在点击提交按钮之前，必须填写此表单中的所有字段”。. So, 如果用户没有填写所有的字段，他们就会知道为什么提交按钮不适合他们.
考虑对帮助文本进行不同的样式设计，使其可见并与禁用按钮区分开来.
Avoid muting colors!
Often, disabled buttons have muted colors or poor color contrast, which reduces their visibility for users with low vision.
To solve this issue, do not use default colors for disabled buttons, instead, make them different from primary and secondary buttons. 因此，用户将知道经常使用的按钮与禁用的按钮是不同的. 通过对比度检查器检查符合wcag的颜色.
Try not disabling buttons!
解决禁用按钮可访问性问题的更好方法是不要禁用它们. But if it is important to disable them, 坚持可访问性指导方针，以确保流畅的用户体验.
Wrapping up
增强禁用按钮的可访问性涉及视觉, technical, and contextual strategies. 通过坚持最佳实践，例如保持清晰的视觉指示器, using appropriate HTML and ARIA roles, providing relevant information, and conducting thorough testing, 创建一个包容和用户友好的web体验是可能的.
Accessibility is an ongoing commitment, and by prioritizing it in web design and development processes, 一个组织致力于为每个人创造一个更公平的数字世界.
At Skynet Technologies, we provide complete digital accessibility solution including accessibility audit, remediation, document accessibility, training, ongoing monitoring, and support to make and improve website accessibility. We provide AI-based “All in One Accessibility工具，是一种简单、快速、经济高效的可访问性解决方案. Let’s make your website or web app accessible for everyone, so that every user can engage in a seamless way. For more information, reach out us to [email protected].
