Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be hi-CSDN博客

本文链接：https://blog.csdn.net/m0_74149462/article/details/141194689

Blocked aria-hidden on a <input> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

1，我们使用element-ui的单选框radio，点击的时候报错如下图的错，究其原因是访问ibility问题：这个错误可能是因为HTML元素<input>上的aria-hidden属性被错误地使用了。aria-hidden属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。如果一个<input>元素被设置为aria-hidden="true"，这可能违反了无障碍性web的最佳实践，因为屏幕阅读器用户依赖这类元素来理解应用的结构和内容

解决办法

1. 自定义指令

// 1.在vue 项目 main.js文件中创建一个全局自定义指令。

Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    let ariaEls = el.querySele