在我们开发的网页中，我们有一些表格，其中列标题（标记为ths scope="col"）包含一个排序按钮，浏览标题行时，屏幕阅读器会将其读出（我使用的是 Windows 上的 NVDA 和 Chrome，仅供参考）内容为“排序”、“按升序排序”、“按降序排序”。 （这些是我们显示的可排序、按升序排序和按降序排序图标上的 aria 标签。）因此，例如，屏幕阅读器可能会读取“行 1 列 1 标题 ID按钮按升序排序列 2 标题名称按钮排序”。
但是，在浏览标题行下的数据行时，最好只听到“第 2 行第 1 列 ID '472' 第 2 列名称 'Kasey Snodgrass'...”，而无需重复按钮和排序的开销。有没有办法实现这一点？
我搞定了。我一直在做的是，虽然没有说出来，但就是
class="visually-hidden"在它上面添加了一个带有详细信息的 span（这是使用 Bootstrap 的）。我将其移到了按钮中aria-description，效果很好。在浏览标题行的过程中会说出排序详细信息，但在浏览数据行时不会将其包含在列标识中。