github.com/angrybunnyman.com

Portrait of the Man as a...

Eighteen: an addendum to next/previous styling and feeling shame about missing a screen reader bug

Portrait of a Shameful Bug
## Forgive me, Eye, for I have sinned Accessibility process is my core job at work which means directing company procedure for design and testing of all our code to ensure it interoperates with screen reader and other assistive tech.

Eye, I have failed you. The post on customization of the {{ previous_post }} and {{ next_post }} functions resulted in an accessibility issue. By puling the title out of the link itself and injecting it into the DOM, screen readers would see and read BOTH the title and the text. So you'd get double readout for those links and related strings

No, not the end of the world, but certainly obnoxious.

UNFORTUNATELY there is no CSS-based fix for this becaue you can't, for example, selectively hide elements through CSS alone for assistive tech. No.

But, you can adjust the DOM with javascript:

document.querySelectorAll('a.previous-post, a.next-post').forEach(a => {
  const dir = a.classList.contains('previous-post') ? 'Previous post' : 'Next post';
  a.setAttribute('aria-label', `${dir}: ${a.title}`);
});

What this does is, after the page loads it will inject the title as an aria label for the element which overrides the primary read out (depending on some user settings). So you don't get double link reading though you may still get some doubling of text alone.

Not perfect but better.

A B M

#accessibility #blaugust #javascript