There are 2 accessibility issues that needs to be looked at. I included a patch that attempts to fix both.
Wetkit_bootstrap is using
<div> instead of
When looking at the official WET-BOEW Alerts documentation: http://wet-boew.github.io/wet-boew-styleguide/v4/design/alerts-en.html
The Alerts are wrapped in
<section> element. This is essential because the alerts include a H4 that can be displayed before the H1 on the page.
While not part of WET-BOEW, the ability to dismiss a message box via the X is useful but has been reported to case accessibility issues.
There is a “X” that closes the “Attention” message. The “X” is identified as “a link” with NVDA and “link TIMES” with JAWS 16, the alt text should be more descriptive for the screen reader user. CEA recommends for example: “Close attention message” would be more appropriate.
Source code: ×
WCAG 2.0 Reference:
1.1.1 Non-Text Content
3.3.2 Labels or Instructions
I'm unsure if this is the best way to do it but the patch adds an
aria-hidden="true" to the close link for screen readers to simply ignore it.
We could also provide a title attribute that dynamically reflect the header of this box (To avoid repeating the same title on multiple alert boxes on the same page).