如何让屏幕阅读器阅读当前页面内容而不是读出所有内容？答案

【问题标题】：How to make screen readers read the current page content instead of reading out everything?如何让屏幕阅读器阅读当前页面内容而不是读出所有内容？
【发布时间】：2022-06-18 03:37:09
【问题描述】：

屏幕阅读器从上到下阅读所有内容。我有一个 flex 导航栏，希望屏幕阅读器只阅读所选页面并避免导航栏的其余内容。

如果在导航栏中选择了“主页”，我希望屏幕阅读器读取主页，而不是读取导航栏的其余部分（如画廊等）。如果选择了“画廊”，我希望屏幕阅读器不读取主页和所有。我试过 aria-hidden 隐藏其他元素，但它本质上不是动态的

真实导航栏的示例代码如下：

<div class="d-flex flex-row justify-content-around mt-auto mb-auto" style = "   " > 
  <ul style="list-style:none;  class="d-flex flex-row justify-content-around mt-auto mb-auto">
    <li> <a routerlink="/Home" routerLinkActive="is-active"> </li> 
    <li> <a routerlink="/Gallery" routerLinkActive="is-active"> </li> 
    <li> <a routerlink="/Event" routerLinkActive="is-active"> </li> 
    <li> <a routerlink="/Feedback" routerLinkActive="is-active"> </li> 
    <li> <a routerlink="/Contact" routerLinkActive="is-active"> </li> 
  </ul> 
</div>

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。
这个编程有什么关系？
您能否详细说明您是如何使用屏幕阅读器导航的？如果我通过您的导航菜单 TAB，屏幕阅读器将只宣布具有制表位的元素。大概这只是“家”或“画廊”或“活动”等，尽管您没有发布代码，所以我们无法确认。如果我使用屏幕阅读器（而不是 TAB）向下箭头，遍历 DOM（实际上是遍历 AOM），那么有时屏幕阅读器会宣布容器中的所有元素（如果它们是非块元素）。所以我猜你可能没有正确使用屏幕阅读器。
嗨，这是一个示例导航栏。我可以尝试为此目的发布示例代码
有什么意义？用户应该如何使用屏幕阅读器访问其他页面？

标签： angular accessibility wai-aria screen-readers jaws-screen-reader

【解决方案1】：

我认为您可能误解了 ARIA 的用途以及屏幕阅读器的工作原理。

辅助功能的重点是为辅助技术 (AT) 用户提供与非辅助技术用户相同的用户体验。作为有视力的用户，即使您在主页上，您也会看到导航栏和可用选项。但是，使用 aria-hidden 或任何其他 ARIA 机制向 AT 用户隐藏这些选项将违反可访问性原则。这意味着屏幕阅读器用户无法知道还有哪些其他导航栏选项可用。通过动态隐藏导航栏选项，您实际上会破坏您的网站对 AT 用户的功能。

如果您想指定当前选择的导航链接，那么我建议您使用类似 aria-current="page" 的内容。见这里：https://www.aditus.io/aria/aria-current/

开发人员并非旨在控制屏幕阅读器的语音输出。在可访问性方面，开发人员的角色是为 AT 和非 AT 用户提供相同的信息，并允许用户的屏幕阅读器偏好决定他们如何阅读页面信息。

因此，我强烈警告您不要在这里尝试实现什么，因为它会完全违背可访问性的目的。

【讨论】：