当有条件地呈现输入时,在输入元素上使用 autoFocus prop 是否不好?
Is using autoFocus prop on input element bad when the input is conditinally rendered?
此 eslint 表示自动对焦元素可能会导致视力正常和视力不佳的用户出现可用性问题。
我正在将输入元素渲染为模态(即有条件地渲染),当模态被渲染时,我希望将焦点放在输入元素上。
另一种方法是使用 useRef
钩子做同样的事情,但我认为 autoFous prop 和 useRef 对 a11y 有相同的影响(我不确定所以问)。
autoFocus 是一种在呈现输入后立即聚焦的简单方法,这就是我认为在显示模式时 a11y 方面最好的方法。当 autoFocus 在初始页面加载本身中完成时,该错误可能适用。
我对 autofocus
属性的理解是,它主要在页面首次加载时使用。我读过的可访问性问题(例如,Bruce Lawson's article on the autofocus
attribute)是关于 autofocus
在用户通常使用屏幕 reader 阅读来自从上到下,这可能会影响可访问性。
在我看来,这不适用于模态框,因为模态框旨在吸引用户的注意力。事实上,W3C WAI-ARIA Authoring Example of a modal 对话框声明焦点应该放在第一个可聚焦元素上(例如,输入、第一段、OK 按钮等)
所以,这就是说,我认为从可访问性的角度来看,在首次加载时在模式中的 <input>
元素上使用 autofocus
应该没问题。
此 eslint 表示自动对焦元素可能会导致视力正常和视力不佳的用户出现可用性问题。
我正在将输入元素渲染为模态(即有条件地渲染),当模态被渲染时,我希望将焦点放在输入元素上。
另一种方法是使用 useRef
钩子做同样的事情,但我认为 autoFous prop 和 useRef 对 a11y 有相同的影响(我不确定所以问)。
autoFocus 是一种在呈现输入后立即聚焦的简单方法,这就是我认为在显示模式时 a11y 方面最好的方法。当 autoFocus 在初始页面加载本身中完成时,该错误可能适用。
我对 autofocus
属性的理解是,它主要在页面首次加载时使用。我读过的可访问性问题(例如,Bruce Lawson's article on the autofocus
attribute)是关于 autofocus
在用户通常使用屏幕 reader 阅读来自从上到下,这可能会影响可访问性。
在我看来,这不适用于模态框,因为模态框旨在吸引用户的注意力。事实上,W3C WAI-ARIA Authoring Example of a modal 对话框声明焦点应该放在第一个可聚焦元素上(例如,输入、第一段、OK 按钮等)
所以,这就是说,我认为从可访问性的角度来看,在首次加载时在模式中的 <input>
元素上使用 autofocus
应该没问题。