Images Accessibility - Assignment001acc

What is accessibility in regards to the web? It is the process and procedures used to make websites useable to people with disabilities. Overtime, techniques have been developed to make websites accessible to all. The following technique, alt, can be easily implemented on your web pages.

Read the following and provide three examples of your own to get credit.

chagoyan logo
My dogs, Ajax and Pixel, on Christmas day.
Dollar Menu. There's a lot to love for a little at McDonalds!
Go to deal of the day!

Alt Attribute (Alt-text) on Images

We are accustomed to using the image tag on our web pages, but we haven't focused on using the alt attribute. The alt attribute allows screen readers to communicate information about the image to blind users. Here are three images with their respective code.

Example 1

chagoyan logo

<img src="images/tinychagoyanonbooks3.gif" width="110" height="143" alt="chagoyan logo">

In the above example, notice the description is focused on communicating the image is a logo.

Example 2

My dogs, Ajax and Pixel, on Christmas day.

<img src="images/mydogs.jpg" width="300" height="300" alt="My dogs, Ajax and Pixel, on Christmas day.">

In the above example, a brief description of the elements depicted in the image is appropriate.

Example 3

Dollar Menu. There's a lot to love for a little at McDonalds!

<img src="images/dm-value-1212.jpg" width="276" height="128" alt="Dollar Menu. There's a lot to love for a little at McDonalds!">

In the above example, you can use the alt attribute to communicate the text in the image.

Example 4

Go to deal of the day!

<img src="images/dealoftheday.jpg" width="160" height="236" alt="Go to deal of the day!">

In the above example, the image is a link, therefore give the function of the image (what does it do? links to the deal of the day).

Example 5

<li>
<img src="images/arrowright.png" alt="" width="17" height="9"> Products
</li>

In the above example, the images are just for decoration. They have no function and it would be bothersome for the user to hear "right arrow" several times while going over the list. Often, you will find that it is best to use alt="". It is better to use alt="" than not to use the alt attribute at all.

Long Description

Similar to the alt attribute there was an attempt to use a longdesc attribute. It was a sorry attempt that never came to fruition. The attribute is not supported by html5 and is, therefore, dead. Don't use it. More info on all Web Accessibility.