CODEWITHSUNDEEP
angularaccessibilitywai-ariascreen-readersjaws-screen-reader
Shisha Chhotray
Shisha Chhotray

Reputation: 9

How to make screen readers read the current page content instead of reading out everything?

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.

Navigation bar: home, gallery, event, feedback, and a search bar

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>

Upvotes: 0

Views: 1070

Answers (1)

George Chapman
George Chapman

Reputation: 532

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.

Upvotes: 1

Related Questions