Link Example: Making Link Text Unique Using Hidden Elements

Accessibility Features of Example

Example

HTML Code

<h3>Course Information</h3>
<table id="schedule" summary="List of Courses and Times">
  <tr>
    <th id="number">No.</th>
  <th id="time">Time</th>
  <th id="coursetitle">Course Title</th>
  <th id="instructor">Instructor</th>
  <th id="edit"></th>
  <th id="delete"></th>
  </tr>
  
  <tr>
    <th id="1" headers="number">1</th>
  <td headers="time 1">9:00-9:50</td>
  <td headers="coursetitle 1"><a href="#german">Intermediate German I</a></d>
  <td headers="instructor 1"><a href="#bkneer">Boris Kneer</a></td>
  <td headers="edit 1"><a href="#edit_1">Edit<span class="hidden"> course 1</span></a></td>
  <td headers="delete 1"><a href="#delete_1">Delete<span class="hidden">  course 1</span></a></td>
  </tr>

  <tr>
    <th id="2" headers="number">2</th>
  <td headers="time 2">10:00-11:20</td>
  <td headers="coursetitle 2"><a href="#entomology">Intro to Entomology</a></d>
  <td headers="instructor 2"><a href="#rlobe">Rose Lobe</a></td>
  <td headers="edit 2"><a href="#edit_2">Edit<span class="hidden">  course 2</span></a></td>
  <td headers="delete 2"><a href="#delete_2">Delete<span class="hidden">  course 2</span></a></td>
  </tr>

  <tr>
    <th id="3" headers="number">3</th>
  <td headers="time 3">13:00-14:50</td>
  <td headers="coursetitle 3"><a href="#toxicology">Environmental Toxicology</a></d>
  <td headers="instructor 3"><a href="#mgoodman">Michael Goodman</a></td>
  <td headers="edit 3"><a href="#edit_3">Edit<span class="hidden"> course 3</span></a></td>
  <td headers="delete 3"><a href="#delete_3">Delete<span class="hidden"> course 3</span></a></td>
  </tr>

  <tr>
    <th id="4" headers="number">4</th>
  <td headers="time 4">15:00-15:50</td>
  <td headers="coursetitle 4"><a href="#psycholinguistics">Psycholinguistics</a></d>
  <td headers="instructor 4"><a href="#landerson">Lisa Anderson</a></td>
  <td headers="edit 4"><a href="#edit_4">Edit<span class="hidden"> course 4</span></a></td>
  <td headers="delete 4"><a href="#delete_4">Delete<span class="hidden"> course 4</span></a></td>
  </tr>
</table>

CSS Code

span.hidden {
  position: absolute;
  top: -20em;
  left: -200em;
}

table#schedule td {
  padding-right: 1em;
  padding-left: .3em;
  padding-top: .2em;
  padding-bottom: .2em;
  border-bottom: 1px solid #88ccaa;
}

table#schedule th {
  background-color: #88ccaa;
}

table#schedule th#number {
  background-color: #88ccaa;
  padding-right: .3em;
  padding-left: .3em;
}

table#schedule {
  border-right: 1px solid #99ddbb;
  border-spacing: 0;
}