Tuesday, April 23, 2013

Intro to Accessibility For Web Pages

WEB 110

Intro to Accessibility For Web Pages

Alternative text for images

Include the appropriate and equivalent alternative text into the Alternate text area of the image html. If the image is a complex image, enter a URL or browse to a web page to use for a longer description (longdesc attribute of the img tag). Alternatively, if the image does not convey content and does not provide page functionality, for Alternate text to provide empty alt text (alt="").
Biltmore Inn is available for reservations this summer.



Exterior Website or Page Links

When linking to exterior web pages or a PDF within text content, and you want the page or document to open in a new window, alert your user by stating after the link [opens in a new window] in your text content. Link the descriptive text and follow by the actual text URL not linked.

Link example:
We plan on visiting the Biltmore House this summer. (http://www.biltmore.com, Link opens in a new window)

Link Tabs and Titles

You can add ‘tabindex’ to all your links on a webpage, so an user can tab through on their keyboard to each link. Set the order of the links to the logical order they would visit the page links.
Adding a ‘title’ to a link can give descriptive info to search engines as well as screen readers.

<li><a href = “index.html” title=”Visit amazon’s home page for the deal of the day” tabindex=”1”>Home</a></li>

<li><a href = “about.html” title=”Find out about amazon and read our customer reviews” tabindex=”2”>About Us</a></li>          
<li><a href = “services.html” title=”amazon’s customer services” tabindex=”3”>Services</a></li>      
<li><a href = “contact.html” title=”Contact amazon for questions and inquiries on our services and products” tabindex=”4”>Contact Us</a></li>
Links should be created using text that makes sense when read out of context. For example, avoid "click here."


1. In your WEB 110 blog, start a new blog activity:

  • Set your text and image in compose mode; then change to HTML mode to add additional accessibility info into the code
  • Include one (1) or two (2) paragraphs about an activity or trip you plan for this summer. 
  • Insert two images. 
  • Insert three external links, can include within the paragraph. 
2. Apply accessibility guidelines discussed in the lesson. 
  • Images 
  1.  Include descriptive alt tags to one image, in the form of a sentence.
  2. Include a long description to the second image with more details in the description, if relevant to the user.
  • Links • Use tab index number order for the three (3) links. 
  1. Add a title for each link. 
  2. The working link(s) should actually be descriptive words within the text content. 
  3. Include the actual ‘http://xxxx.html’ text link URL separately, not linked. 
  4. Designate exterior links to open in a new window. 
3. Post your working blog link to the discussion forum.