CODEWITHSUNDEEP
htmlcss
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

HTML - relationship between <a> vs <i>

My goal is to come up with a dropdown menu:

$(document).on('click', '.dropdown', function() {
  var is_visible = $(this).find('.dropdown-content').is(":visible");
  $('.dropdown-content').toggle(false);

  if (is_visible == false){
    $(this).find('.dropdown-content').toggle(true);
  }
});
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

div.dropdown-content {
  display: none;
  white-space: nowrap;
  position: absolute;
  padding: 12px 16px;
  z-index: 1;
  margin-top: 15px;
  background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='dropdown'>
  <i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
  <div class="dropdown-content">
    <div><i class="fa fa-share-alt" aria-hidden="true"></i> Share</div>
    <div><a href="#" id="contact_delete"><i class="fa fa-trash-o fa-fw"></i> Delete</a></div>
  </div>
</div>

The question is, what is the semantic role of <a> tag in the dropdown-content item definition (provided I don't use its href attribute and use JavaScript to handle the click event)?

In other words: if I want to have a clickable icon, in which cases should I surround it with an <a> tag?

Upvotes: 0

Views: 622

Answers (1)

zzzzBov
zzzzBov

Reputation: 179046

if I want to have a clickable icon, in which cases should I surround it with <a> tag?

The only case where you should wrap anything with an <a> tag is if it's a link, or a placeholder for where a link could be.

Otherwise, if you want to make something clickable, the appropriate element is <button type="button">.

The one exception to that is if you need to wrap anything that's not phrasing content, in which case I recommend using <div role="button" tabindex="0> with a keydown handler to trigger click events on Enter, and Space.

Additional notes about accessibility for icons, and icon fonts in general: If a network request fails and the icon font fails to load, your sighted users will find themselves in the same situation as your non-sighted users, where it's unclear as to what the button should do.

Generally speaking it's better to pair icons with textual labels, but if that's not possible, consider using an <img> element with [alt] text instead of the icon.

If that's not possible, at least add an [aria-label] attribute.

Upvotes: 1

Related Questions