我有一个带有提交按钮的表单。当用户单击按钮时,我需要执行异步操作(例如,向后端发出 HTTP 请求)。 为了提供有关该过程的反馈,我禁用了提交按钮并在其中显示了一个加载器图标,正如大多数组件库允许的那样。
一些例子:
因为我使用
<button />
,所以HTMLButtonElement
自动有一个role=button
,这很好。
当用户单击按钮时,在异步操作期间会出现一个加载图标。在这种情况下,按钮的行为就像“进度条”。 来自MDN:
progressbar 角色定义了一个元素,用于显示需要很长时间的任务的进度状态。
适合这个案例。
我对按钮是否应该在加载期间具有“role=progressbar”属性或保留“role=button”感到困惑。
我是否应该更新指定
role=progressbar
的 HTML 元素?
正如 Andy 在评论中指出的那样,您不应该动态更改已经接触辅助技术的元素的角色。
另一个重要的一点是加载旋转器不是进度条。进度条显示进度级别,而加载旋转器仅指示进程正在进行,而不指示级别进度。
aria-busy=true
。显然,这不是提交按钮。