Creating An Accessible Web Page
The following steps show you how to create a simple, accessible web page using
Netscape Composer.
Choosing a theme
For this activity, choose a theme by selecting an image from a repository of
graphics and saving it on your machine.
- Go to http://gallery.yahoo.com/.
This site contains a repository of graphic
images.
- Select a Picture Category.
- Once you have found an image you would like to use as your theme, right click
on it.
A pop-up menu appears.
- Select Save Picture As from the pop-up menu to save the image.
A Save Picture dialog box appears allowing you to choose where you want to save
the image.
- Click the Desktop icon on the left of the Save Picture dialog box or navigate
to the Desktop folder to save the image on the desktop of your computer.
Creating and saving a new page
- Double click the Netscape Composer shortcut on your desktop to open Netscape
Composer.
- Save your page by choosing Save from the File menu.
- A Save As dialog box opens where you can choose a name for your page and
where to save this page.
- Type a name for your page.
- Click the Desktop icon to save the page on your desktop and click Save.
- You will be prompted to type in a title. Type a descriptive title for the
page and click OK.
| Accessibility Note: The title must be descriptive and unique
for each web page, since assistive technology devices for the vision-impaired
such as screen readers usually read the title to orient the user. |
Adding formatted text
- Type in a title.
- Click the Paragraph Style drop-down menu in the lower left section of the
toolbar. (The Normal style appears in a box with a drop-down arrow next to it.)
- Select Heading 1 from the drop-down menu.
- Your title changes to larger point type to reflect the style for Heading
1.
Press the Enter key.
- Type an introductory statement describing your web page.
- Click the Paragraph Style drop-down menu to select a style for this introduction.
- If your introductory statement is actually a list of items, then choose List
Item from the Paragraph Style drop-down menu.
- Save your page.
| Accessibility Note: Text must be formatted using appropriate
structural markup like headings, paragraphs and lists so that a screen reader
or web reading device can use the markup to allow users to navigate easily
through a web page. |
Adding image and text descriptions
- Click the Image toolbar button.
An Image Properties dialog box opens.
- Click the Choose File button in the Image location section of the dialog
box.
- Navigate to the image you saved at the beginning of this activity, select
it, and click OK.
- Double click the image. The Image Properties dialog box opens.
- Click the Alt Text/LowRes button just above the Cancel button at the bottom
of the dialog box.
An Alternate Image Properties dialog box opens.
- Type a short description of the picture in the Alternate Text input box.
- Click OK to save this text and close the Alternate Image Properties dialog
box.
- Click OK again in the Image Properties dialog box to close it.
- Move the cursor over the image in your Web page.
The alternative text for your image displays.
- Save your page.
| Accessibility Note: Images must contain alternate text
descriptions so that a screen reader or web reading device can speak this
text in order to make users aware of the presence and purpose of an image
on a web page. |
Creating a hyperlink to another web page
- Type a phrase or sentence that describes the page you want to link to.
- Highlight this text and click the Link toolbar button.
A Character Properties dialog box opens with your link description in the Link
Source section of the dialog box.
- Type in the complete Web address (URL) in the Link to text input box - e.g.
http://www.cast.org/
- Save your Web page.
- Click the Preview toolbar button to preview the page in the browser.
- Click your linked text to test it.
The Web page your text link connects to opens.
| Accessibility Note: Hyperlinks must make sense when read
out of context. This will allow users of screen readers to jump quickly
from one link to the next in order to navigate through a web page. |
Netscape Composer Tip: While working on your Web page you can see how it would
appear in Netscape Navigator by clicking the Preview button.
Top
Resources
Netscape Composer:
Information about downloading Netscape Composer
Web Accessibility Initiative (WAI):
Resources, Guidelines, Checklists and Techniques for creating accessible web site.
WebAIM:
Introduction to Web Accessibility
The Bobby Trainer:
An interactive tutorial that will show you how to improve your web site's accessibility.
|
