如何让屏幕阅读器阅读当前页面内容而不是读出所有内容?
屏幕阅读器从上到下读取所有内容。我有一个灵活的导航栏,希望屏幕阅读器仅读取所选页面并避免导航栏的其余内容。
我希望屏幕阅读器在“home”时读取“home”在导航栏中选择“画廊”,而不读取导航栏的其余部分,例如画廊等。如果选择“画廊”,我希望屏幕阅读器不读出主页和所有内容。 我尝试过 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>
The screen reader reads everything from top to bottom. I have a flex navigation bar and want the screen reader to only read the selected page and avoid rest of the navigation bar content.
I want the screen reader to read home if 'home' is selected in navigation bar and not read the rest of the navigation bar like gallery etc. If 'gallery' is selected, I want the screen reader to not read out home and all.
I have tried aria-hidden which hides other elements but it's not dynamic in nature
Sample code for the real navigation bar goes like this:
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

我认为您可能误解了 ARIA 的目的以及屏幕阅读器的工作原理。
可访问性的重点是为辅助技术 (AT) 用户提供与非 AT 用户相同的用户体验。作为视力正常的用户,即使您位于主页上,您也会看到导航栏和可用的选项。但使用 aria-hidden 或任何其他 ARIA 机制向 AT 用户隐藏这些选项将违反可访问性原则。这意味着屏幕阅读器用户无法知道还有哪些其他可用的导航栏选项。通过动态隐藏导航栏选项,您实际上会破坏网站对 AT 用户的功能。
如果您想指定当前选择的导航链接,那么我建议您使用类似 aria-current="page" 的内容。请参阅此处:https://www.aditus.io/aria/aria-current/
开发人员无意控制屏幕阅读器的语音输出。在可访问性方面,开发人员的作用是为 AT 和非 AT 用户提供相同的信息,并允许用户的屏幕阅读器首选项决定他们如何阅读页面信息。
因此,我强烈警告您不要在这里尝试实现的目标,因为它会完全违背可访问性的目的。
I think that maybe you're misunderstanding the purposes of ARIA and how screen readers work.
The point of accessibility is to provide the same user experience to assistive technology (AT) users as to non-AT users. As a sighted user, you'd see the navigation bar and the options that are available, even though you're on the Home page. But it would be a violation of accessibility principles to hide those options from AT users using aria-hidden or any other ARIA mechanism. It would mean that a screen reader user wouldn't have any way of knowing what other navigation bar options are available. You would essentially break your site's functionality for AT users by dynamically hiding the navigation bar options.
If you want to specify which navigation link is currently selected, then I'd suggest you use something like aria-current="page". See here: https://www.aditus.io/aria/aria-current/
Developers are not meant to control the speech output of screen readers. In terms of accessibility, the role of the developer is to provide the same information for AT and non-AT users, and allow the user's screen reader preferences to dictate how they read the page information.
So, I'd strongly caution against what you're trying to achieve here, because it would completely defeat the purpose of accessibility.