aria-hidden属性与页面交互问题

1.背景与问题

1.背景

页面中表格有60多条数据，在不做分页处理的情况下，设置表格的最大高度，展示滚动条。

2.问题

在对前二十条已经展示在页面上的数据进行操作时，没有问题。滚动表格展示出新数据时，对数据进行操作，会有如图报错。并且对于新数据的操作并不生效。

2.aria-hidden属性

1.原理

1. 影响焦点的管理：当元素被设置为 aria-hidden="true" 时，不仅是屏幕阅读器，键盘用户也将无法与该元素交互（例如，不能聚焦或触发事件）。因此，在隐藏元素时需要特别注意焦点管理，避免将焦点置于不可访问的元素上。

2. 继承特性：如果某个元素设置了 aria-hidden="true"，它的所有子元素也会被隐藏。换句话说，设置了该属性的父元素会将此状态传递给其子元素。你可以通过为特定的子元素重新设置 aria-hidden="false" 来覆盖父元素的隐藏行为。

aria-hidden="true"  // 元素及其子元素对辅助技术不可见
aria-hidden="false" // 元素对辅助技术可见

  
这段文字将被屏幕阅读器忽略
  
但这段文字会被屏幕阅读器读取

2.功能和用途

• aria-hidden 是一个控制元素是否被辅助技术（如屏幕阅读器）访问的属性。
• aria-hidden="true" 使元素不可被读取和交互。
• aria-hidden="false"（或未设置此属性）使元素对辅助技术可见。
• 它可以用来隐藏视觉上不需要的元素，改善无障碍体验，但需要谨慎使用，避免与焦点管理或交互行为冲突。

3.解决方法

可见出现此种报错，可能是因为该元素或其某个祖先元素上设置了 aria-hidden="true"，导致其不可进行交互。

更改aria-hidden属性

aria-hidden="false" // 元素对辅助技术可见

动态控制 aria-hidden

if (elementIsVisible) {
  element.removeAttribute('aria-hidden');
} else {
  element.setAttribute('aria-hidden', 'true');
}