WEB 110
Intro to Accessibility For Web Pages
Alternative text for images
Include the appropriate and equivalent alternative text into
the 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 to provide empty alt
text (alt=""
). area of the image 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:
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.
Example:
<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."
Activity
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.
- Images
- Include descriptive alt tags to one image, in the form of a sentence.
- 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.
- Add a title for each link.
- The working link(s) should actually be descriptive words within the text content.
- Include the actual ‘http://xxxx.html’ text link URL separately, not linked.
- Designate exterior links to open in a new window.