加载按钮应该具有哪种 ARIA 角色?

问题描述 投票:0回答:1

我有一个带有提交按钮的表单。当用户单击按钮时,我需要执行异步操作(例如,向后端发出 HTTP 请求)。 为了提供有关该过程的反馈,我禁用了提交按钮并在其中显示了一个加载器图标,正如大多数组件库允许的那样。

一些例子:

因为我使用

<button />
,所以
HTMLButtonElement
自动有一个
role=button
,这很好。

当用户单击按钮时,在异步操作期间会出现一个加载图标。在这种情况下,按钮的行为就像“进度条”。 来自MDN

progressbar 角色定义了一个元素,用于显示需要很长时间的任务的进度状态。

适合这个案例。

我对按钮是否应该在加载期间具有“role=progressbar”属性或保留“role=button”感到困惑。

我是否应该更新指定

role=progressbar
的 HTML 元素?

html forms accessibility wai-aria
1个回答
0
投票

正如 Andy 在评论中指出的那样,您不应该动态更改已经接触辅助技术的元素的角色。

另一个重要的一点是加载旋转器不是进度条。进度条显示进度级别,而加载旋转器仅指示进程正在进行,而不指示级别进度。

您可以考虑在正在更新的内容的容器上使用

aria-busy=true
。显然,这不是提交按钮。

© www.soinside.com 2019 - 2024. All rights reserved.