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 (
longdescattribute of the
imgtag). Alternatively, if the image does not convey content and does not provide page functionality, for to provide empty
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.
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."
Activity1. 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.
- 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.