Accessible
Web Design Examples
This
page presents some examples on accessibility when considering
web page design. More extensive information is available
for web page design on the Wellesley
Webmaster's page.
:
: Alt Text : :
: : Links : :
: : Image Size: :
: : Image Map : :
Examples
of alt text:
|
This
is the sample image:
This
is what it will look like to most graphical browsers. |
|
| In
a text reader, an image will show one of three ways: |
| The
first has an alt text of: Icon: "Wellesley College" |
Icon:
Wellesley College |
| The
second has no alt text set at all. The [Inline] is
where the image would be. |
[INLINE] |
| The
third has an alt text of " " You can see that there's no
sign of an image. There's no text (like the first example)
and no puzzling [INLINE] like the second. |
|
Links:
Links
should ideally be of several words in length, or an image of
a reasonable size (larger than 25x25 pixels)
Not
all users 'click' on links. Saying 'click here' is often frustrating
because it isn't clear where 'here' is.
Good
example:
For
further images of archaeological sites in Rome, see the Perseus
Project web site. There, you can also find primary
text sources of various kinds.
Here, the Perseus Project web site is one link
and primary text sources of various kinds is another.
Each link contains multiple words and makes it quite clear
where you are going to be, and what you should find on the
other end of the link. Incidentally, the Perseus site does
a good job of making their information reasonably accessible
and attractive at the same time. Bad
examples: (they are set to go to the access.html page)
Click here.
Often, this is given with no indication of where the link goes. Also, 'here'
is a very short word and difficult for mobility.
(on
a site which is largely self contained, with many internal
links) More information
on the subject.
It is also important to let people know when they're going to leave self-contained
sites so they can know to bookmark, or how to get back. This is particularly
important when the site they're going to is confusing or large itself.
Examples
of image size:
|
Image:
millions of colors, 7K |
Image:
Optimized, 4K |
|
|
|
The
main visual difference between the two images is in the rainbow
at the bottom. Color gradients and subtle shades of gray can
be affected by the degree of optimization. The more images
on any given page, the more important it is to lower the size
of each image. Photographs are significantly more complicated
graphically, and tend to be larger in size, even with optimization.
If you would like to learn how to optimize and compress graphics,
read the Help! on images
section.
Image
map:
|
|
This
image map is set up with the following links (none of them
lead anywhere, this is just a demonstration)
- question.html
- help.html
- bytheway.html
The
image below shows the areas that are mapped to links. Before
you look at the mapping, look carefully at the image to the
left and ask yourself whether you would have guessed that
there was something to click on.
Can
you click on the asterisk easily using your non-dominant
hand on the mouse? ( A good test for possible mobility issues) |
| |
|
|
|
This
is what the mapping looks like - so you can see the areas
in question.
As
you can see, each puncuation mark has been surrounded by
a clickable area, and this area was attached to a link. Each
of these areas should also have an alt tag: one alt tag for
the entire image, and then another alt tag for each map hotspot.
How
many of these links would you find in casual browsing? Would
they be clear?
Would
it be clear that the image above was an image map? |
| |
|
|
Imagemap:
USEMAP
|
This
is the image map seen through a text-only browser.
The USEMAP is
a link. |
| |
|
|
When you follow the USEMAP link, you see the following:
map1
MAP: http://www.site.edu/examples.html#map1
1. http://www.site.edu/question.html
2. http://www.site.edu/help.html
3. http://www.site.edu/bytheway.html
You
can see how this would be difficult to navigate, particularly
as a primary navigation method. The names of files don't
include enough information.
|
Questions
? Ask Us !
 Back
to the Publishing a Web Site home page
Back
to the accessibility page |
