Some links have empty names for assistive technologies and are therefore problematic for accessibility and also search engines

[BogdanCerovac]

I love Rive and just wanted to make it even better - and especially more accessible. Some links have accessible names but some don't. This is a huge problem for many, especially blind screen-reader users and also search engines.

Example on https://rive.app - first, main call to action button "Get Started" that has the rocket animation on mouse hover.

When I check the generated HTML I get:

<div class="framer-1sl7iyo-container">
  <div data-framer-generated="true" class="framer-shBnO framer-v-hzrkcv" style="display:contents" tabindex="0">
    <div id="rocket-link">
      <!-- -->
      <div class="framer-hzrkcv" data-framer-name="GetStartedRocket" style="opacity: 1;">
        <div class="framer-1h19a31-container" style="opacity: 1;">
          <div class="" style="width:100%;height:100%"><canvas style="vertical-align: top; width: 500px; height: 500px;" width="500" height="500"></canvas></div>
        </div><a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;"></a>
      </div>
    </div>
  </div>
</div>

The semantic part that is important for accessibility tree is the anchor part:
<a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;"></a>

As you can see - it's empty. Therefore link text won't be announced to screen-readers, for example.
And search engines will also have it difficult if not impossible to extract link text from <canvas>.

Solution can be to insert link text and make it visually hidden but available to screen-readers.
This can be achieved with some CSS:

<a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;">
<span class="sr-only">Get Started</span>
</a>

with following CSS:

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

(CSS source: https://kittygiraudel.com/snippets/sr-only-class/)

With this fix link text would be invisible but at the same time available for both assistive technologies and search engines.

This should be fixed not only for React but for all web technologies that generate HTML.

Also - remove the tabindex="0" on <div data-framer-generated="true" class="framer-shBnO framer-v-hzrkcv" style="display:contents" tabindex="0">.

[BogdanCerovac]

@avivian - thanks for labeling, but I think this should be labelled as a bug, not as a feature-request.

We need to fix the missing link text, we don't need a new feature for it...

[avivian]

Hey @BogdanCerovac

Firstly, thanks for raising this issue. The specific issue you raised about link text is an issue with the https://rive.app website, not the react runtime. Any fix we do will, for now, be outside the react runtime.

However I think it would be cool for anyone creating a rive animation to add some text that can be exposed to screen readers. The exact implementation of this we'll need to discuss with the team, but it will likely be a new feature required in our runtimes and perhaps our editor. Hence the tag!