Texas Tech University.

Web Accessibility

Information provided by IT TeamWeb

Working with Images:

Alternative Text (Alt Text): simply defined is alternative information. Its purpose is to provide a text equivalent of an image in the event that the image does not load or cannot be viewed. Alt text is an important way to ensure that every visitor to your site can access all of the sites content. Every image on your site should include an alternative text description which briefly details the purpose of the image. 

Tips:

Code:  <img src = "Image Location" alt ="enter alt text here"/>

Working with Multimedia:

Websites are increasingly becoming rich experiences that rely heavily on audio and video components to fulfill a prominent role. It is imperative that any information you impart in one of these formats should also be presented in an accessible way.

Tips:

Code: <a href="URL of the transcript">Link text which clearly identifies the nature of the link</a>

When creating links on your website, be sure that the link text provides a clear description of the link's destination. Visitors to your site using assistive technology often scan a page for links to quickly navigate to their desired destination. If every link is non-descriptive text like "Click Here" you will create an undue impediment for your audience. Instead of "Click Here" a better example for a would be "Download the Web Accessibility Tip Sheet"

Tips:

Code: <a href="URL ">Link text which clearly identifies the nature of the link</a>

Working with Color and Contrast:

In addition to blindness, colorblindness and low vision also require considerations when designing your site.  To help insure that your site is readable and understandable to visitors with make sure that your text is presented with a clean background with sharp contrast between the two and that you use other markers beside color to convey information

Tips (Low Vision):

Tips (Colorblindness):

Working with Tables:

Data tables on web pages present a host of accessibility concerns. Data tables should be used to logically order information that is best presented in a chart or table structure and should not be used to format a page. For example, you should not use a table to create columns for the body content of a page.

Tips:

Code:

  • <table> - Opening table tag <table> includes attributes about the width, position and size of the table and should include a summary of the table.
    Example: <table border="1" width="100%" summary="Chart showing the web contact information.">
  • <caption> - between table declaration and first row, provides table's displayed title
    Example:<caption>Contact Information</caption>
  • <tr> - table row - identifies collection of adjacent cells that will appear on the same line
  • <th> - column/row heading - identifies the cell that describes a column's or row's contents in addition the tag should include the scope attribute that indicates the direction of the heading
    Example: <th scope="col">Name</th>
  • <td> - table data - identifies contents of single table cell

Complete code for the following table:

Contact Information

Name

Phone#

Email

1.

IT Help Central

806-742-HELP (4357)

ithelpcentral@ttu.edu

2.

IT Team Web

806-472-1180

itteamweb@ttu.edu

3.

Technology Support

806-742-1650

itteamweb@ttu.edu

<table border="1" width="100%" summary="Chart showing web contact information."> 
<caption>Contact Information</caption>
<tr>
<td width="12"></td>
<th width="124" scope="col">Name</th>
<th width="102" scope="col">Phone#</th>
<th width="82" scope="col">Email</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">IT Help Central</th>
<td>806-742-HELP (4357) </td>
<td><a href="mailto:ithelpcentral@ttu.edu">ithelpcentral@ttu.edu</a></td>
</tr>
<tr>
<td>2.</td>
<th scope="row">IT Team Web</th>
<td>806-472-1180</td>
<td><a href="mailto:itteamweb@ttu.edu">itteamweb@ttu.edu</a></td>
</tr>
<tr>      
<td>3.</td>
<th scope="row">Technology Support</th>
<td>806-742-1650</td>
<td><a href="mailto:itteamweb@ttu.edu">itteamweb@ttu.edu</a></td>
</tr>
</table>