Problem: Page previews are not screen reader friendly. We have some ideas about how to fix it, but we'll want to make use of researchers time to work out the best way.
Potential solution: We can use aria-describedby
In order to be referenced, the excerpt has to carry a (unique) `id`
Resulting HTML should look like
calling anchor with dynamically inserted `aria-describedby`
```lang=html
<a href="/wiki/Communication" title="Communication" aria-describedby="UID">communication</a>
```
```lang=html
<div class="mwe-popups mwe-popups-fade-in-up flipped_x mwe-popups-no-image-tri mwe-popups-is-not-tall" role="tooltip" aria-hidden="" style="top: 291px; left: 338px; display: block;">
<div class="mwe-popups-container">
<a dir="ltr" class="mwe-popups-extract" href="/wiki/Communication" lang="en" id="UID"><p><b>Communication</b> is the act of conveying intended meanings from one entity or group to another through the use of mutually understood signs and semiotic rules.</p></a>
<footer>
<a class="mwe-popups-settings-icon mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-settings" href="/wiki/Special:Preferences#mw-prefsection-rendering"></a>
</footer>
</div>
</div>
== Acceptance criteria
[] The change should be made inside a feature branch so that user research can be carried out. We haven't decided whether this is the correct approach so this should NOT be deployed to production.
= Sign off steps
Handover to @Volker_E for user testing. We'll probably need to test up a test environment where this can be tested.