<main>
  <h1>Accessible Emoji, Tweaked</h1>

  <p>
    This is a demo for my post <a href="">Accessible Emoji, Tweaked</a>
  </p>
  
  <p>
    As an old guy, I can never be certain what a particular emoji means, such as <span role="img" aria-label="Snowman">&#9731;</span> or <span role="img" aria-label="peach or bum">&#x1f351;</span> or <span role="img" aria-label="Bacon. Sweet, sweet bacon." tabindex="0">&#129363;</span>.
  </p>
  
  <p>
    Some ARIA and CSS allows us to polish that <span role="img" aria-label="poop">&#x1f4a9;</span>, letting sighted, clueless users like me to benefit. To experience it, put your <span role="img" aria-label="mouse">&#x1f5b0;</span> over any emoji here to see what it means.
  </p>
  
  <p>
    This does not help <span role="img" aria-label="keyboard" tabindex="0">&#x1f5ae;</span>-only users unless I start dropping a <code>tabindex</code> on them, as I did with the keyboard and bacon above.
  </p>
</main>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 130%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(204,204,204,.7);
  border: .07em solid rgba(0,0,0,.5);
  border-radius: .5em;
}

/* The animation */

@keyframes TOOLTIP {
  from {
    bottom: .5em;
    background-color: rgba(0,0,0,0);
    border: .05em solid rgba(255,255,255,0);
    color: rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(0,0,0,1);
  }
  to {
    bottom: 1.5em;
    background-color: rgba(0,0,0,.85);
    border: .05em solid rgba(255,255,255,1);
    color: rgba(255,255,255,1);
    box-shadow: .15em .15em .5em rgba(0,0,0,1);
  }
}

/* Style for the tool-tip */

span[role=img][aria-label],
span[role=img][aria-label] {
  position: relative;
}

span[role=img][aria-label]:focus::after,
span[role=img][aria-label]:hover::after {
  position: absolute;
  display: block;
  z-index: 1;
  bottom: 1.5em;
  left: 0;
  max-width: 5em;
  padding: .5em .75em;
  border: .05em solid rgba(255,255,255,1);
  border-radius: .2em;
  box-shadow: .15em .15em .5em rgba(0,0,0,1);
  content: attr(aria-label);
  background-color: rgba(0,0,0,.85);
  color: rgba(255,255,255,1);
  font-size: 80%;
  animation: TOOLTIP .1s ease-out 1;
}

@media print {
  span[role=img][aria-label]::after {
    content: " (" attr(aria-label) ") ";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.