Summary: Real world example on the Empty button Error.
You can review what this means technically and the impact inside of our Icon dictionary. Today I am only looking at this from the perspective of a common Empty button error found on a higher ed website from our Higher Ed in 4k project.
Example
In this example found on a University college of law website there is a search form in the header with a search submit button.
Button html:
<button type="submit">
<svg id="search" viewBox="0 0 16 16.9">
<path d="M16, 15.7L11.3,11C12.4,9.8,13, 8.2,13,6.5C13"></path>
</svg>
</button>WAVE has flagged this an accessibility error of an Empty button because the only content inside of the search submit button is an inline SVG that has no content. When a screen reader reads this button what could it possibly read out?
There is no content, a user will have to guess the purpose of the button from the context around it such as the search input, which unfortunately in this case also doesn’t have a label. They might be read the placeholder in some cases but this isn’t very accessible or easy to use at all.
Solution
There are 2 main types of solutions for this. The first would be to save the SVG as an image and load it like a typical image. Now that it is a normal image you can just add an alt attribute.
html for <img> SVG:
<button type="submit">
<img src="/search-icon.svg" alt="Search"/>
</button>I would recommend this option as it is easy and very accessible. The button now has the clear content of “Search”. There is a bug with Microsoft Edge where the alt attribute isn’t exposed if it is the content of a <button> with some possible work arounds. You can read about possible strategies and really go in depth on SVGs with Scott O’Hara’s posts on accessible images and SVGs.
The 2nd option is to keep it as an inline SVG like the html below:
<button type="submit">
<svg id="search" role="img" aria-describedby="searchIcon" viewBox="0 0 16 16.9">
<title id="searchIcon">Search</title>
<path d="M16, 15.7L11.3,11C12.4,9.8,13, 8.2,13,6.5C13"></path>
</svg>
</button>You will notice I added role=”img” to the <svg>, this aria tells the browser to treat this like an image when it announces it. I also added aria-described by that points to an ID of the <title> that I want to be read by a screen reader. This is read by most screen reader combinations with a few double reading it. If for some reason the image was blocked you wouldn’t visually see the text like you would with a <img> alt attribute. For both of these reasons I recommend simply making it an <img>.
Tired of testing pages one at a time?
Pope Tech can get you up and running with usable web accessibility data in just a few minutes.
Email Newsletter
Want to receive emails with accessibility content similar to this article?
If you subscribe, we will email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.