search

Wruczek / Bootstrap-Cookie-Alert

A simple, good looking cookie alert built for Bootstrap 3/4. No dependencies required.
https://wruczek.github.io/Bootstrap-Cookie-Alert/demo-bs5.html
MIT License
240 stars 50 forks source link

A couple of accessibility-related improvements #12

Closed maxstarkenburg closed 4 years ago

maxstarkenburg commented 4 years ago

My colleague noted that since this cookie markup is always present in the DOM, but just visually hidden via opacity: 0 and transform: translateY, folks who may be unable to use a mouse and instead rely on keyboards alone (or other assistive technology) would always have to tab past any buttons or links in this markup, even after they've accepted the cookie.

Changing the CSS to display: none or visibility: hidden should prevent its contents from being focusable, but display: none doesn't mesh well with CSS transitions, so my commit uses visbility: hidden instead, which at least in my testing seems to wait till the end of the post-.show-removal transition to take effect.

I was also listening to this content in some screen readers (JAWS and NVDA) to confirm that visibility: hidden removes the text content from the accessibility tree (wouldn't want low-vision users having to hear that content on every page load), but was surprised to hear "Close" instead of "I agree" when tabbing to that button. Since I didn't see a reason that said button text should, by default, be different for blind/low-vision users (and in our case, the lawyers were very intentional in the specific button language they wanted), I also made a commit to remove the aria-label.

Wruczek commented 4 years ago

Thank you! The aria-label was just a leftover from the default bootstrap alert markup. I agree that its unnecessary.