The close button is currently marked up as a link with no helpful text for screen readers. It should use the button element and provide text.

CommentFileSizeAuthor
#1 dismiss-accessibility-2083375-1.patch1.62 KBdcmouyard

Comments

dcmouyard’s picture

dcmouyard commented
Status: Active » Needs review
StatusFileSize
new dismiss-accessibility-2083375-1.patch1.62 KB

Here's a patch.

The button element has more semantic meaning and provides better functionality with the accessibility API in browsers.

rupl’s picture

rupl
he/him
Primary language English
commented

Thanks for fixing this. Your patch is a very straightforward example that will help me write more accessible JS in general.

One question. As I looked at the code, I started wondering if jQuery append() would be better than prepend(). I don't have a screen reader, so you have an opinion on whether the "Close this message" text should be read before or after the actual message?

dcmouyard’s picture

dcmouyard commented

That's a tough one, but prepend is probably better.

Having it before the message gives it the correct tab order and allows screen readers to close the message without having to hear it first. It might cause confusion, though, since you won't know exactly what you're closing at first.

rupl’s picture

rupl
he/him
Primary language English
commented
Status: Needs review » Fixed

Alrighty then, patch in #1 is committed!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.