Verified checkmark is not accessible, lacks contrast in dark mode

[paulrobertlloyd]

The new verified checkmark on web profiles includes the following markup:

<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" viewBox="0 0 24 24" width="20" height="20" clip-rule="evenodd" baseProfile="basic">
  <circle cx="12" cy="12" r="9.25" fill-rule="evenodd" clip-rule="evenodd"></circle>
  <circle cx="12" cy="12" r="9.25" fill="#34708e" stroke="#34708e" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></circle>
  <path fill="#fff" d="M11,15.75c-0.199,0-0.39-0.079-0.53-0.22l-3.255-3.255c-0.293-0.293-0.293-0.768,0-1.061 s0.768-0.293,1.061,0L11,13.939l4.731-4.732c0.293-0.293,0.768-0.293,1.061,0s0.293,0.768,0,1.061L11.53,15.53 C11.39,15.671,11.199,15.75,11,15.75z"></path>
</svg>

Unfortunately, this checkmark is not accessible, and would likely not be announced by screen readers. To fix this, you can:

• add role="img" so that it’s purpose can be correctly identified
• add a <title> so that the graphic has an accessible name (this is the equivalent of adding alt to <img>)
• Finally, as not all user agents may make this association, add aria-labelledby and point it to the <title>.

This gives you the following:

- <svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" viewBox="0 0 24 24" width="20" height="20" clip-rule="evenodd" baseProfile="basic">
+ <svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" viewBox="0 0 24 24" width="20" height="20" clip-rule="evenodd" baseProfile="basic" role="img" aria-labelledby="verified-checkmark">
+   <title id="verified-checkmark">Verified URL</title>
    <circle cx="12" cy="12" r="9.25" fill-rule="evenodd" clip-rule="evenodd"></circle>
    <circle cx="12" cy="12" r="9.25" fill="#34708e" stroke="#34708e" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></circle>
    <path fill="#fff" d="M11,15.75c-0.199,0-0.39-0.079-0.53-0.22l-3.255-3.255c-0.293-0.293-0.293-0.768,0-1.061 s0.768-0.293,1.061,0L11,13.939l4.731-4.732c0.293-0.293,0.768-0.293,1.061,0s0.293,0.768,0,1.061L11.53,15.53 C11.39,15.671,11.199,15.75,11,15.75z"></path>
</svg>

---

These changes make the checkmark audibly accessible, but there’s a further consideration: dark mode. Right now, the check remains dusky blue but in dark mode appears on a dark blue background, meaning it lacks colour contrast:

One way to fix this would be to change the icon so that the tick is cutout of the circle, and then filling the icon with the colour of the surrounding text.

Put all together, you’d end up with this:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" style="vertical-align: middle;" role="img" aria-labelledby="verified-checkmark">
  <title id="verified-checkmark">Verified URL</title>
  <path fill="currentcolor" d="M9.5 1a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm4.3 6.2a.6.6 0 0 0-.9 0l-4 4L6.6 9a.6.6 0 0 0-1 1l2.8 2.7c.3.2.7.2 1 0L13.7 8c.3-.3.3-.7 0-1Z"></path>
</svg>

And this is how it appears in dark mode:

and in light mode:

Less code, and yet more robust and accessible code 😀

[manton]

This is live now. Thanks!

[paulrobertlloyd]

🎉 Thanks for the quick update!