浏览数据行时让屏幕阅读器不读取整个 HTML 表格列标题

Question

在我们正在开发的网页中，我们有一些表格，其中的列标题（标记为

th

和

scope="col"

）包含一个排序按钮，当浏览标题行时，屏幕阅读器会读出该按钮（我在 Windows 上使用 NVDA 和 Chrome，因为它的价值）就像“排序”、“升序排序”、“降序排序”。 （这些是我们显示的相应可排序、升序排序和降序排序图标上的咏叹调标签。）因此，例如，屏幕阅读器可能会读取“行 1 列 1 标题 ID 按钮升序排序 第 2 列标题名称 按钮排序”。

但是，当浏览标题行下的数据行时，如果只听到“row 2 column 1 ID '472' column 2 name 'Kasey Snodgrass' ...”，而不是重复有关按钮和排序。有办法实现吗？

Answer 1

我解决了。我一直在做的，没有这么说，是添加一个带有

class="visually-hidden'

的跨度（这是 Bootstrap 的）以及详细信息。我将其移至按钮的

aria-description

中，效果很好。排序详细信息是在浏览标题行的过程中说出的，但在浏览数据行时不包含在列标识中。