HTML - relationship between vs

Question

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?

Generally, if you are going to a page or an area on a page, you should semantically wrap it in an `` tag. If it's performing a function, you should wrap it in a ` — Joe Lissner, Mar 30 '17 at 18:39
Take for example the case when I delete something by clicking on item. Should it be a button ? — Edgar Navasardyan, Mar 30 '17 at 18:44

zzzzBov · Accepted Answer · 2017-03-30T18:50:53.393

1

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.

edited Mar 30 '17 at 18:50

answered Mar 30 '17 at 18:45

zzzzBov

174,988
54
320
367

thanks for detailed info. Could you take a minute to edit my jsFiddle (http://jsfiddle.net/9npoexkL/) according to your coding style ? – Edgar Navasardyan Mar 30 '17 at 18:55
1

@EdgarNavasardyan, I'm sorry but I'm going to decline to do your work for you in this instance, however I will link you to [my recommended solution for dropdowns](http://stackoverflow.com/a/38317768/497418). Note, that it *does* in fact use an `` element, but it's actually making use of the `href` attribute to actively be a link. ` – zzzzBov Mar 30 '17 at 19:04
I am not lazy :) Simply I can't figure out how you place the inside button to look it really like an icon rather than a button. My code (http://jsfiddle.net/afe1o7qt/) ends up rendering a button :( – Edgar Navasardyan Mar 30 '17 at 19:09
Or should I just surround by a div? Looks like this is what you were talking about when mentioning `phrasing content` (I am not familiar with concept). Should I use `
– Edgar Navasardyan Mar 30 '17 at 19:10

HTML - relationship between vs

1 Answers1