Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Why is WAVE throwing an "empty button" error when there's a type attribute specified?
Running the WAVE browser extension on a site, I'm getting an "Empty button" error on a search submit box:
A <button> element is present that contains no text content (or alternative text), or an <input type="submit">, <input type="button">, or <input type="reset"> has an empty or missing value attribute.
The HTML that's highlighted as being responsible for this error shows as this, including a "type=" attribute:
<button type="submit" class="button is-filled is-outlined">
<i class="fa fa-search"></i>
</button>
The source code in Ruby for this element is this:
<%= form_tag search_path, method: :get, role: 'search' do %>
<div class="grid is-nowrap">
<%= search_field_tag :search, params[:search], class: 'form-element' %>
<div class="h-m-1">
<%= button_tag type: :submit, class: 'button is-filled is-outlined', name: nil do %>
<i class="fa fa-search"></i>
<% end %>
</div>
</div>
<% end %>
On a development instance running on localhost, I tried adding input_type: :submit to the button_tag, which results in input_type="submit" being added to the HTML, but I'm still getting the same WAVE error.
Why is WAVE giving me this error even though there is a type attribute (or input_type attribute) specified, and how can I resolve it?
1 answer
Let's take a look at what WAVE is telling us.
A <button> element is present that contains no text content (or alternative text), or an <input type="submit">, <input type="button">, or <input type="reset"> has an empty or missing value attribute.
The HTML that's highlighted as being responsible for this error shows as this, including a "type=" attribute:
<button type="submit" class="button is-filled is-outlined"> <i class="fa fa-search"></i> </button>
Like WAVE says, the button has
- No text content (the only content is an empty
<i>element) - No alt text
- No value attribute
To fix this issue, add one or more of these.
Since you're using Font Awesome, I'll refer you Font Awesome's guidelines on accessibility with icons.
Icons Used as Semantic Elements
If your icons have semantic meaning, you'll need to manually add a few things so that your icon is appropriately accessible:
Web Fonts Implementations
- Add an
aria-hidden="true"attribute to the icon.- Provide a text alternative inside a
<span>(or similar) element that is a sibling to the icon.- Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.
- Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.
Following the example there, you could change it to the following to make it more accessible:
<button type="submit" class="button is-filled is-outlined">
<i aria-hidden="true" class="fa fa-search"></i>
<span class="fa-sr-only">Submit search</span>
</button>
1 comment thread
0 comment threads