|
There are many simple things that you can incorporate into your Web pages to
help ensure that your pages are accessible. Below we will discuss a few ways to do this.
Not sure what accessibility is all about? Read how CWU has redesigned for
Web accessibility according to Section
508 Guidelines.
| Images |
| Feature: |
Images should have an Alternative Text Description.
Take your mouse cursor and "hover" over the picture below.
You should see a text box appear that says "Picture of soccer
ball".
|
| How to do it: |
<img src="images/soccer_ball.jpg" alt="Picture of a soccer ball" /> |
| Why is it important? |
Blind users surf the Web with talking browsers. If you do not put the
alt attribute within the img tag, they often have no idea
that it is there. A page will also not validate
without this feature. Last, take some time to think about the text you put in this space.
Hearing "Picture of a ball" is much more descriptive to a blind user than if they
just heard "ball."
|
| Headings |
| Feature: |
Heading tags should be used when a heading is needed rather than bolding text
within a paragraph tag to appear as a heading. |
| How to do it: |
<h1>Text Heading</h1> |
| Why is it important? |
Blind users will be audibly prompted when their talking browsers
encounter a heading tag. Therefore heading tags are used not only
for visual display but also for other intelligent agents such as
talking browsers. |
| Links |
| Feature: |
Link names should be meaningful. |
| Why is it important? |
If Web pages are constructed poorly, blind users have the option
of surfing pages by just listening to the links on a page. Therefore, if
they heard "click here" out of context of the page, they
would have no idea where this links would take them. |
| Tables |
| Feature: |
Tables should be used to format data, as shown below. Properly structured tables
that are used for data should include certain markups. Tables used strictly for layout should
be avoided when possible. See below for why this is important.
| Name |
Sex |
| Kelly |
24 |
| Jeremy |
26 |
|
| How to do it: |
The scope attribute as shown below will
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td scope="row">Kelly</td>
<td scope="row">24</td>
</tr>
<tr>
<td scope="row">Jeremy</td>
<td scope="row">26</td>
</tr>
</table>
|
| Why is it important? |
Pretend that you are blind. You go to a web page that has
department course information. Without proper structure, this might
be what you hear:
Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment,
Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15,
13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge,
205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00,
14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10,
9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.
After listening to this information, do you have any idea where biology 205 is supposed to be
held? Probably not. When you listen to tables straight through, without going into "table
reading mode" in a screen reader, this type of information can be quite confusing. Even
when you do go into table reading mode, it can still be confusing if the table is not
marked up properly.
|
|
