how to fix “empty button” web accessability error when using bootstrap's glyhicons
Multi tool use
how to fix “empty button” web accessability error when using bootstrap's glyhicons
I have a page where a button is labelled with a glyphicon (bootstrap).
I have a new requirement that there must be no "Errors" when the page is checked with the "Wave" tool ( https://wave.webaim.org/extension/ ).
The problem is that Wave throws an Error for the button because it is an "empty button".
I tried to use an image with alt text. That fixes the Wave error, but it makes the button slightly larger, and I am also uneasy about the abuse of the image for this.
This is the minimal version of my page showing the problem:
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
</body>
</html>
Is there a better way to ensure accessibility (provide alternative text for the glyphicon) than dummy img?
2 Answers
2
Instead of adding an image with an alt text, add aria-label or title attribute on the button with the required text.
aria-label
title
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
</body>
</html>ibb.co/mf0KsJ
– Nandita Arora Sharma
Jul 3 at 9:30
For good accessibility every interaction element needs to have an text, in your case you could add the corresponding text to the button element in an extra tag, which is invisible but technical readable.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
This class is already included in bootstrap https://getbootstrap.com/docs/4.1/getting-started/accessibility/
To have an readable text there is also the possibility to add an aria-label attribute as described here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
But I'm not sure if this fits the checker you mentioned.
aria-label
Your code extenden with aditional description and aria-label:
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
Description
Description
</body>
</html>Thanks for the hint that bootstrap has a built in style for invisible element via the "sr-only" class. However in my particular case, aria-label is enough.
– riskop
Jul 3 at 9:56
i just wanted to present different approaches (aria-lable and hidden text) because both would solve the question
– Lars-Olof Kreim
Jul 3 at 10:08
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I already have wave installed on my chrome, just checked it doesnt show the error any more.
– Nandita Arora Sharma
Jul 3 at 9:27