I have an application using Gatsby. The home page uses a video with text over the top. This text changes on a timer. The text is also the pages h1. So the static site generated by gatsby has the initial h1 this is fine for our SEO. On the client there's still only ever one h1, it just changes every few seconds, cycling through about 3-4 options.
Since we only ever have 1 h1 on the page I think SEO should be fine, these elements are mounted/unmounted by react so only one exists at a time. Would this have an impact on SEO? In addition we're making sure we meet accessibility standards, since this header changes will this be confusing for a screen reader
Example: if I am using a screen reader and read the hero and then continue down the page a little and finally return to the top the title has now changed.
Is there a way to make sure this is clear to the screen reader?
Some links I've used to research this so far