Ad

Display Initial Element In React For Bots And Screen Readers

- 1 answer

Thinking about accessibility and crawlers, let's say I have a dynamic component that updates every second.

<LiveComponent />

output:

<div id="live">
  <!-- Something that changes very frequently -->
</div>

However, if someone has a screen reader, or if a bot crawls it, the constantly updating component won't be very helpful. I'd rather show something like a snapshot, summary, or alternative piece of information on that very first paint that bots will grab, and screenreaders will process, but won't be visible to the user. (Prefer to not have a flash of refresh.):

<div id="live">
  <p>This is a static version of the dynamic data that's just as informative</p>
</div>

Possible options:

  • useEffect(()=>{ }, []); tied to a display class... but hiding / revealing elements with CSS will clutter things up (both bits of info will be seen by bots / readers)
  • Conditional-rendering: won't work (I think) because I need this to be client side...
Ad

Answer

I would use a different <div class="accessibility-live"> for accessibility and put there the static version of the dynamic data. You can use CSS: position absolute off-screen, something like:

.accessibility-live {
position: absolute;
left: -9999em;
}

So the content will be part of the DOM and detected by assistive technologies and crawlers.

Then you can use aria-hidden for your #live div: <div aria-hidden="true" id="live" >

Here you can read more about the aria-hidden attribute.

Ad
source: stackoverflow.com
Ad