Problem statement
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
<a href="/wiki/Communication" title="Communication" aria-describedby="UID">communication</a>
<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.
Developer notes
https://www.sarasoueidan.com/blog/accessible-tooltips/ should be a helpful read.
Sign off steps
Test environment setup at https://a11y.wmflabs.org/wiki/Main_Page
- Make sure solution is technically sound
- Make sure it's not to verbose for screenreader users, but provides improvement