Accessible referemces

by Carson Evans

HTML

<p>After this sentence is a sample reference <a href="#1"><span class="sr-only">reference link 1</span><span aria-hidden="true">[1]</span></a>.</p>

<ul>
  <li id="1"><a href="#"><span aria-hidden="true">[1]</span> the link</a></li>
</ul>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}