JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Accessible Link</h1>
        <h2>Original</h2>
        <div>
            <a href="/event-1/">First Event</a>
            <a href="/event-1/?response=yes">Yes</a>
            <a href="/event-1/?response=no">No</a>
            <a href="/event-1/?response=maybe">Maybe</a>
        </div>
        <div>
            <a href="/event-2/">Second Event</a>
            <a href="/event-2/?response=yes">Yes</a>
            <a href="/event-2/?response=no">No</a>
            <a href="/event-2/?response=maybe">Maybe</a>
        </div>    
        <h2>Title &amp; Role</h2>
        <div>
            <a href="/event-1/">First Event</a>
            <a href="/event-1/?response=yes" title="First Event" role="link">Yes</a>
            <a href="/event-1/?response=no" title="First Event" role="link">No</a>
            <a href="/event-1/?response=maybe" title="First Event" role="link">Maybe</a>
        </div>
        <div>
            <a href="/event-2/">Second Event</a>
            <a href="/event-2/?response=yes" title="Second Event" role="link">Yes</a>
            <a href="/event-2/?response=no" title="Second Event" role="link">No</a>
            <a href="/event-2/?response=maybe" title="Second Event" role="link">Maybe</a>
        </div>
        <h2>Aria-describedby &amp; Role</h2>
        <div>
            <a href="/event-1/" id="event-1">First Event</a>
            <a href="/event-1/?response=yes" title="First Event" aria-describedby="event-1">Yes</a>
            <a href="/event-1/?response=no" title="First Event" aria-describedby="event-1">No</a>
            <a href="/event-1/?response=maybe" title="First Event" aria-describedby="event-1">Maybe</a>
        </div>
        <div>
            <a href="/event-2/" id="event-2">Second Event</a>
            <a href="/event-2/?response=yes" aria-describedby="event-2" role="link">Yes</a>
            <a href="/event-2/?response=no" aria-describedby="event-2" role="link">No</a>
            <a href="/event-2/?response=maybe"...

CSS

.hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

JavaScript

$("a.answer").each(function() {
     $(this).attr("title", $(this).parent().find("a.question").text()).append(' <span class="hidden">" + $(this).parent().find("a.question").text() + "</span>');
 });