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 />


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

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>

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...


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.