KPC
Kevin Powell - Community•2mo ago
Tim Rinkel

Is an anchor with changing text in-accessible?

I have an anchor link to a party invitation that will be styled as a button. Inside the button is a series of spans which rotate visibility every five seconds to coerce the reader into clicking the button ('click me', 'this is the button', 'here I am' etc). The visibility is handled with opacity. My thought is that this would be sensory overload with a screen reader. I'm thinking add aria-hidden to all of the spans and add an aria-label of something like "Read more: 30th Anniversary Party" to the anchor. Am I over thinking this? Should I let those using screen readers enjoy the (subjective) whimsy as well? Is there a better way to implement accessibility in a case like this (or is it needed)? Here's a pen of the anchor button.
3 Replies
clevermissfox
clevermissfox•2mo ago
I don’t believe you are overthinking it and you def should add aria hidden if you’re going to have all these spans. However it does seem a little over complicated; since the text isn’t translating in and out (I was picturing a marquee style from your post) you could simplify it by having a before or after and just change its content property in an animation while hiding whichever phrases you want from screen readers by leaving the content properties alt text empty. Or hide all of them and just leave the aria label on the anchor link and hide the pseudo element content . As always please test across different browsers and devices. 
@property --txt {
  syntax: "<string>";
  inherits: false;
  initial-value: "click me";
}

a::before {
  content: var(--txt, "click me") / "";
}

@keyframes toggle {
  0%, 100% { --txt: "click me"; }
  25% { --txt: "I’m a button"; }
  50% { --txt: "yep still a button"; }
  75% { --txt: "I’m clickable"; }
}
@property --txt {
  syntax: "<string>";
  inherits: false;
  initial-value: "click me";
}

a::before {
  content: var(--txt, "click me") / "";
}

@keyframes toggle {
  0%, 100% { --txt: "click me"; }
  25% { --txt: "I’m a button"; }
  50% { --txt: "yep still a button"; }
  75% { --txt: "I’m clickable"; }
}
As always there’s many ways to approach any one thing so this is just one suggestion [disclaimer one suggestion that popped into my head there may be some drawbacks or reasons not to approach this way 😆] Here’s browser support https://caniuse.com/mdn-css_properties_content_alt_text
Rägnar O'ock
Rägnar O'ock•5w ago
Having the button change label isn't inherently inaccessible, especially if you don't have an aria-live=assertive on the element (I would say try it with aria-live=polite and see (or rather hear) if it sounds too much to you or not, if it is just set it to off so changes in visible text isn't played out by the narrator. There's only one silver bullet in a11y, it is to try to use the thing like someone with assistive technology would. If that means installing NVDA and trying for yourself then so be it (NVDA is a free (and I think open source) narrator software, you can also try with your OS' default narrator. Your button/link doesn't sound like it breaks a11y by changing it's label but rather by having a label that isn't useful without any context (you did say if there was a "click here to access the party" before the link) if all the textual info you have is the button's / label's face text then I would argue it's not accessible regardless of the fact the text changes You must simply ask yourself "If I couldn't see my screen could I navigate this interface?", if the answer is "no" then it's not accessible, if yes then you don't know because maybe your color contrast ratio is bad or you override the user's font size, or the pictures are too big and prevent the page from loading on a slow connection. All those are a11y concerns.
Tim Rinkel
Tim RinkelOP•5w ago
Sorry for the delayed response, I got stuck on another project for awhile. There is more context in relation to the link. I've tried listing with a screen reader, and to me, it didn't seem that annoying, but I knew what the button was doing. I wasn't sure how others feel. In all honesty, screen readers are a bit of sensor overload for me anyway. I will definitely look into these ideas. I did't realize you could transition text in a keyframe like that. I figured they'd be hard cutovers. I'll have to give that a shot as well as the aria-live=polite Thanks for the input.

Did you find this page helpful?