contact-separate-purposes

contact-separate-purposes.html

<!-- used only for semantic purposes - screen readers 
   ".srOnly" is used to visually hide an element but still be accessible by SR -->
<h4 class="srOnly">Social Networks</h4>
	
<!-- used for visual purposes - 
   PRO TIP: despite having aria-hidden=true, the element can be used as aria-labelledby target! -->
<span class="sn-title" id="sn-title" aria-hidden="true">Social Networks</span>

<a href="codepen.com/sandrina-p" target="_blank" title="sandrina's Codepen" class="sn-link" 
	data-title="Codepen" data-descr="Because coding without fun is just boring"
	aria-labelledby="sn-title sn-descr">
  <i class="fa fa-codepen sn-icon" aria-hidden="true"></i>
</a>