Hi everyone. Noodling around with a new idea for showing related pull requests in Trac, and would like some accessibility advice.
The current approach is below using all text.
New approach is to provide that info graphically in an effort to match what you would see on github. The visual contrast of the icons is ok (or at least, not worse than the text). Has the added bonus that it’s now structured as a HTML list.
With the markup looking roughly like the below how best to make this as accessible as possible?
<ul>
<li>
<span>
<svg icon merged, open, etc />
</span>
<a href="https://github.com/12345">12345</a>
<span>
<svg icon optional build success or fail />
</span>
</li>
</ul>
Hiding the icon spans and adding a single naturally spoken summary seems promising e.g. “open PR 21037 build successful”. Better to put that on the parent <li> or deeper with the <a>? Experimenting with Voiceover suggests navigation is smoother with the latter (one step per list item vs two), though not sure what other considerations there might be.
Appreciate any advice.
James