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.
Thanks for the efforts on gathering useful content and sharing here. You can find more questions and answers related to web technologies in the below forum.
ReplyDeleteWeb technologies question and answers forum