Skip to content

Instantly share code, notes, and snippets.

View sandrina-p's full-sized avatar

Sandrina Pereira sandrina-p

View GitHub Profile

Keybase proof

I hereby claim:

  • I am sandrina-p on github.
  • I am sandrina_p (https://keybase.io/sandrina_p) on keybase.
  • I have a public key ASBPa_vL48N-oGk61h0M_FI_yYqO-Eir-6RBjIXZg6bWmQo

To claim this, I am signing this object:

@sandrina-p
sandrina-p / contact-separate-purposes.html
Created May 30, 2017 22:56
contact-separate-purposes
<!-- 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"
<h4 id="sn-title">Codepen</h4>
<a href="codepen.com/sandrina-p" aria-labelledby="sn-title sn-descr">
<i class="fa fa-codepen sn-icon" aria-hidden="true"></i>
</a>
<p id="sn-descr">Because coding without fun is just boring</p>
@sandrina-p
sandrina-p / contact-aria-labelledby.html
Last active May 30, 2017 22:19
Contact code excerpt
<h4 id="sn-title">Codepen</h4>
<a href="codepen.com/sandrina-p" aria-labelledby="sn-title sn-descr">
<i class="fa fa-codepen sn-icon"></i>
</a>
<p id="sn-descr">Because coding without fun is just boring</p>