search

ericwbailey / a11y-webring.club

🌐 A webring for digital accessibility practitioners.
https://a11y-webring.club/
MIT License
35 stars 86 forks source link

[Bug] Missing Whitespace Between Words of Previous/Random/Next Website Links #150

Closed jscholes closed 11 months ago

jscholes commented 11 months ago

What happened?

Within the <nav> containing the "Previous/Random/Next website" links, the mark-up looks like:

<a class="contact-link" ...>
    <svg ... aria-hidden="true">...</svg>
    <span>Previous/Random/Next<span class="hide-visually"> website</span></span>
</a>

I.e. the visible labels are "Previous", "Random", and "Next", with additional context of "website" appended for screen reader users. Unfortunately, there is no whitespace rendered between the visible label and off-screen context in Chromium-based browsers, creating accessible names for these links of: "Previouswebsite", "Randomwebsite", and "Nextwebsite".

I can think of several ways to fix this (probably too many), in no particular order:

  1. Add a non-breaking space (&nbsp;) at the beginning of each off-screen span. This will fix the issue in Chromium-based browsers, but result in two spaces between the words in browsers not currently exhibiting the issue.
  2. Make the full text of each link visible, including the word "website", removing the off-screen text altogether. This may look cluttered (I'm blind so I legitimately have no idea), but it would make the website consistent with the sample code for members which doesn't include off-screen text.
  3. Add aria-label to each link with the correct accessible name in each case. @ericwbailey has already amply covered the problems with aria-label.
  4. Add an ID to the single span that wraps the visible label and off-screen text, and use that ID as the value of an aria-labelledby attribute on the parent link. It's a bit weird that this seems to fix things in Chromium, given that the link is getting its acc name from the same mark-up that is otherwise problematic. I've only tested that this doesn't break anything else in Firefox and iOS Safari, but I recall some recent discussion around aria-labelledby being broken... somewhere? Otherwise, this is probably my preferred approach after #2.
  5. Move the off-screen span so that it is a sibling of the visible label span, give each span an ID, and use two space-separated IDs in aria-labelledby on the parent link. This is similar to #4, but a bit more... standard.
  6. Add a <title> to the <svg>, give the title an ID, and use that ID in aria-labelledby on the parent link. This would duplicate the visible label, introducing technical debt and making visible/accessible name drift more likely in the future.
  7. Same as #6, but just have the accessible name of the SVG bubble up to become the acc name of the link, and add aria-hidden="true" to the current spans. This would cause screen reader announcements of "link graphic" instead of "link" (and a corresponding increase in braille verbosity), and otherwise shares the downside of #6.

Thank you for reading my essay.

Operating systems

Windows 10 Pro, Windows 11 Pro

Browsers

Google Chrome, Microsoft Edge

Anything else?

No response

Code of conduct

ericwbailey commented 11 months ago

Thanks for submitting this, as well as the detailed writeup about possible ways to address the issue!

I've addressed the fix in https://github.com/ericwbailey/a11y-webring.club/pull/151, using technique number 2. Since the webring code visually shows the word "website" as part of each link's accessible name, I figured we should do the same at the source of it all and updated the content on the webring's homepage itself to match the convention.