A website is made of many elements that impact its user experience directly or indirectly. 提供可访问的内容并保持一致的转换, 坚持web开发最佳实践是强制性的. And when it comes to accessibility of all web elements, website buttons are one of them.
At times, websites have disabled buttons that impact user interaction profoundly with the website. However, such buttons are kept disabled purposely due to some technical requirements such as unavailability of that feature, 缺少或无效链接, 或者链接是未经授权的用户.
However, in any case, it is important to ensure that disabled buttons do not increase the website bounce rate and harm its accessibility.
Disadvantages of disabled buttons – reasons to improve their accessibility!
禁用按钮会造成混淆并误导用户!
患有 认知或学习障碍 may find it weird that’s why a button is not working, or it may make them perplexed. Because the rest of the interface is working and only the button is not, 这会让他们感到困惑. At times, disabled buttons don’t give any information on why they are not working. Such a situation leads to a negative user experience and decreases conversions.
禁用按钮很难找到!
WCAG无障碍指南 对禁用按钮的颜色对比度没有具体要求. Thus, 符合无障碍标准的网站, 禁用按钮大多为灰色或静音颜色, which is problematic to see for users with low vision or visual impairments.
辅助技术无法感知被禁用的按钮!
禁用按钮是不可见的 辅助技术, thereby users relying on these technologies cannot hear the presence of disabled buttons.
使禁用按钮可访问的提示!
ARIA can help!
如果在网站设置中, aria禁用属性保持为“true”。, then the button will receive tab focus and indicate to screen readers that the button is inactive. If the button (which is using aria-disabled) is left in the DOM order intentionally, 使用的网页设计需要通过对比度最小值.
Code to use the ARIA-disabled attribute and allow the button to receive focus:
To remove the disabled button from the tab order, a negative tabindex can be used. It will replicate the behavior of control when the HTML disabled attribute is used.
If a custom control is made using
or non-HTML elements, they do not support the aria-disabled attribute even with the role="button". In such cases, the aria equivalent should be used to disable the control.EditIt is important to ensure that focus order is consistent and aria-disabled attribute helps maintain all interactive elements' visibility while keeping them disabled. 因此，不需要完全移除按钮. It is crucial to submit buttons in forms and items temporarily unavailable for users.
Though, it is not a good design to keep a disabled button due to a lack of validation. 但是如果必须使用这样的设计模式, 建议提供错误消息来解释确切的问题.
On the other hand, the
HTML attribute fully disables the button by removing it from the tab order. However, it is announced as ‘unavailable’ to assistive technology in browse mode. 视觉指标是为了消除这个问题!
Putting a CSS property cursor on a disabled button is a good design practice. It provides an additional visual indicator to show that the button is inactive.
提供帮助文本协助!
Visible text can be placed around the disabled button to make them accessible. The text gives context to the users on why the button is not available. 这与表格上的说明非常相似. For example, 如果用户正在填写表单, there is an instruction above the submit button – “all fields in this form must be filled before clicking on the submit button”. So, the users will know why the submit button is not working for them if they haven’t filled all the fields.
Consider styling help text differently to make it visible and distinct from the disabled button.
Avoid muting colors!
Often, 禁用按钮颜色暗淡或颜色对比差, 这会降低低视力用户的可见度.
To solve this issue, 禁用按钮不使用默认颜色, instead, 使它们不同于主要和次要按钮. Thereby users will know that frequently used buttons are different from disabled buttons. Use WCAG-compliant colors by checking them through the contrast checker.
尽量不要禁用按钮!
A better way to solve the disabled button accessibility problem is not disabling them. 但如果让它们失效很重要的话, adhere to accessibility guidelines to ensure a smooth user experience.
Wrapping up
Enhancing accessibility for disabled buttons involves a combination of visual, technical, 以及情境策略. By adhering to best practices such as maintaining clear visual indicators, 使用适当的HTML和ARIA角色, 提供相关信息, 进行彻底的测试, it is possible to create an inclusive and user-friendly web experience.
可访问性是一个持续的承诺, 通过在网页设计和开发过程中优先考虑它, an organization contributes to a more equitable digital world for everyone.
在天网科技，我们提供 完整的数字无障碍解决方案 包括可访问性审核, remediation, 文档可访问性, training, ongoing monitoring, 并支持制作和改进网站的可访问性. 我们提供基于人工智能的“All in One辅助功能” tool, is a simple, quick, and cost-effective accessibility solution. 让我们使您的网站或web应用程序为每个人访问, 这样每个用户都可以无缝地参与进来. 欲了解更多信息，请pg电子官网 [email protected].
