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.
- Don't just describe the image, describe the image's function (Why is that image present? What information are you using the image to convey?)
- Take advantage of alt text to help search engines index your site. Use keywords that are important to your mission as part of the description of your images
- Graphical bullets or images that do not impart information do not require alt text
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.
- Include links transcripts for any audio or podcast on your site.
- Video presentations should include a link to a transcript or more ideally be authored to include subtitles
Code: <a href="URL of the transcript">Link text which clearly identifies the nature of the link</a>
Working with Links:
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"
- Use descriptive links that helps the visitor identify the purpose of the link
- Slightly longer link text allows for a larger click area making it easier for people with motor impairments to click you links.
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):
- Avoid shades of color on themselves like a dark gray on a light gray background
- Avoid patterned backgrounds
- Avoid graphical text when possible
- Use simple readable fonts
- Do not use color alone to convey content use additional cues or information to convey content
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.
- Failure to provide adequate context can make information meaningless (Use summary, caption and headings)
- Improperly designed tables do not render information correctly when using screen reader (remember that screen readers linearize tables and read top to bottom, left to right
- Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments
- <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
- <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:
IT Help Central
IT Team Web
<table border="1" width="100%" summary="Chart showing web contact information.">
<th width="124" scope="col">Name</th>
<th width="102" scope="col">Phone#</th>
<th width="82" scope="col">Email</th>
<th scope="row">IT Help Central</th>
<td>806-742-HELP (4357) </td>
<th scope="row">IT Team Web</th>
<th scope="row">Technology Support</th>