Making Link Text Unique Using Hidden Elements

Link Example

Example Start

HTML Source 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;
}

Link Example

Example Start

Tiffany Barnett White

Personal Information in e-mail marketing can backfire, study indicates

Businesses rick chasing away prospective customers when they send chummy e-mails that bandy around people's names, hobbies and other personal information to pitch sales, according to a new study of the popular marketing tool. Full Story

Geronimo

Y chromosome study sheds light on Athapaskan migration to southwest U.S.

A large-scale genetic study of native North Americans offers new insights into the migration of a small group of Athapaskan natives from their subarctic home in northwest North America to the southwestern United States. The migration, which left no known archaeological trace, is believed to have occurred about 500 years ago. Full Story

Juhee Kim

Non-parental care of infants tied to unfavorable feeding practices

With more new mothers in the workplace than ever before, there has been a corresponding increase in the number of child-care facilities in the United States. At the same time, data from a variety of sources point to a growing prevalence of overweight infants and toddlers. Is there a connection? Full Story

John Lawler

U.S. firms a role model for fair hiring standards, study says

U.S. companies are helping spread fair hiring practices across the world as they set up shop in developing nations, according to a new study of gender and age discrimination co-written by a University of Illinois labor expert. Full Story

HTML Source Code


<div class="inil">
  <div class="inil_pic">
    <a href="http://www.news.uiuc.edu/news/08/0701email.html"><img src="images/ex5_white.jpg" alt="Tiffany Barnett White" id="newsphoto" width="70" height="70"/></a>
  </div>
  <h3 id="newshead">Personal Information in e-mail marketing can backfire, study indicates</h3>
  <p id="inil_text">Businesses rick chasing away prospective customers when they send chummy e-mails that bandy around people's names, hobbies and other personal information to pitch sales, according to a new study of the popular marketing tool. <a href="http://www.news.uiuc.edu/news/08/0701email.html">Full Story</a></p>
</div>  
  
<div class="inil">
  <div class="inil_pic">
    <a href="http://www.news.uiuc.edu/news/08/0715athapaskans.html"><img src="images/ex5_geronimo.jpg" alt="Geronimo" id="newsphoto" width="70" height="70"/></a>
  </div>
  <h3 id="newshead">Y chromosome study sheds light on Athapaskan migration to southwest U.S.</h3>
  <p id="inil_text">A large-scale genetic study of native North Americans offers new insights into the migration of a small group of Athapaskan natives from their subarctic home in northwest North America to the southwestern United States. The migration, which left no known archaeological trace, is believed to have occurred about 500 years ago. <a href="http://www.news.uiuc.edu/news/08/0715athapaskans.html">Full Story</a></p>
</div>  
  
<div class="inil">
  <div class="inil_pic">
    <a href="http://www.news.uiuc.edu/news/08/0711infants.html"><img src="images/ex5_jkim.jpg" alt="Juhee Kim" id="newsphoto" width="70" height="70"/></a>
  </div>
  <h3 id="newshead">Non-parental care of infants tied to unfavorable feeding practices</h3>
  <p id="inil_text">With more new mothers in the workplace than ever before, there has been a corresponding increase in the number of child-care facilities in the United States. At the same time, data from a variety of sources point to a growing prevalence of overweight infants and toddlers. Is there a connection? <a href="http://www.news.uiuc.edu/news/08/0711infants.html">Full Story</a></p>
</div>  
  
<div class="inil">
  <div class="inil_pic">
    <a href="http://www.news.uiuc.edu/news/08/0707hiring.html"><img src="images/ex5_lawler.jpg" alt="John Lawler" id="newsphoto" width="70" height="70"/></a>
  </div>
  <h3 id="newshead">U.S. firms a role model for fair hiring standards, study says</h3>
  <p id="inil_text">U.S. companies are helping spread fair hiring practices across the world as they set up shop in developing nations, according to a new study of gender and age discrimination co-written by a University of Illinois labor expert. <a href="http://www.news.uiuc.edu/news/08/0707hiring.html">Full Story</a></p>
</div>  

Link Example

HTML Source Code


<div class="news_item">
  <div class="news_image_left"><a href="http://www.uiaa.org/urbana/statefarm.html"><img src="images/ex6_statefarm.jpg" alt="State Farm Arch Rivalry Tailgate"></a></div>
  <p>
  <span id="news_title">State Farm Arch Rivalry Tailgate</span><br>
    Join us for a humdinger of a tailgate prior to the Illinois vs. Missouri matchup! There will be great food, lots of fun activities and the camaraderie of fellow Illini fans.
  <a href="http://www.uiaa.org/urbana/statefarm.html"><img src="images/ex6_bluearrow.gif" alt="More ..." width="16" height="13"></a>
  </p>
</div>

<div class="news_item">
  <div class="news_image_right"><a href="http://www.uofi.onlinecommunity.com/cgi-any/postcards.dll/genfill?sitename=UOFI"><img src="images/ex6_postcards.jpg" alt="Illinois Postcards" width="180" height="86"></a></div>
  <p>
    <span id="news_title">Surprise someone with an Illinois e-postcard</span><br>
    Want to wish someone happy birthday, razz your best friend about his favorite baseball team or simply say hello to your old Illinois roommate? Use our simple-to-send e-postcards to keep in touch with companions, loved ones and acquaintances. We offer vibrant postcard images from each U of I campus, with space for your personalized message and multiple coloring options - including orange and blue! It's free, fun and a great way to stay in touch.
  <a href="http://www.uofi.onlinecommunity.com/cgi-any/postcards.dll/genfill?sitename=UOFI"><img src="images/ex6_bluearrow.gif" alt="More ..." width="16" height="13"></a>
  </p>
</div>

Link Example

Example Start

Go to the main topic

Navigation Links

The Main Topic

The text of the main topic of the web page would be here. This is an example link to show the keyboard focus is moved past the navigation bar links when the "Go to the main topic" link was selected. For Internet Explorer the tabindex value is needed to make sure following the link actually moves keyboard focus.

HTML Source Code


<p><a href="#maintopic">Go to the main topic</a></p>

<h3>Navigation Links</h3>
<ul>
    <li><a href=".">Navigation link #1</a></li>
    <li><a href=".">Navigation link #2</a></li>
    <li><a href=".">Navigation link #3</a></li>
    <li><a href=".">Navigation link #4</a></li>
    <li><a href=".">Navigation link #5</a></li>
</ul>

<h3><a id="maintopic" name="maintopic" tabindex="-1"></a>The Main Topic</h3>
<p>The text of the main topic of the web page would be here.  
    This is an <a href=",">example link</a> to show the keyboard focus is moved past the navigation bar links when the "Go to the main topic" link was selected.  
    For Internet Explorer the <code>tabindex</code> value is needed to make sure following the link actually moves keyboard focus.
</p>