Adobe® Contribute® CS5 software offers a unique set of tools to help content contributors meet accessibility requirements. Accessibility is directly incorporated into Contribute: Content contributors are prompted to provide important accessibility information, and other accessibility features are automated or addressed in templates. Once accessibility preferences are activated, content contributors are required to provide text descriptions for images and identify data-table headings. More advanced options — such as specifying CSS or HTML for text formatting — are handled by the website administrator. With this built-in Contribute accessibility support for content contributors, you can easily meet rigorous standards (such as the Canadian Common Look and Feel Standards) without any advanced technical knowledge.
The following sections explain how to build and maintain an accessible site using Contribute CS5 and are intended for content contributor use.
Selecting an accessible template
Contribute allows users to create and edit pages based on Adobe Dreamweaver® software templates. Templates can be created and edited in Dreamweaver — typically by web designers or website administrators — or content contributors can choose from a selection of predeveloped templates. Locate these predeveloped templates by choosing File > New Page.
Figure 1. New Page or blog entry dialog box
In the New Page dialog box, the Create New Web Page list box includes a folder of sample web pages. These sample pages are designed to meet a range of needs and contexts.
In addition, you can find free accessible templates at our Accessibility Resource Center. Users can download these templates and use them as the basis of their own sites.
Adding accessible images
Once the site accessibility preferences have been set by the website administrator, Contribute will prompt you to provide a text description for each image as you add it to the page. These helpful prompts eliminate the possibility of forgetting to include text descriptions. Contribute also prevents you from proceeding without providing a text description. With no opportunity for contributors to bypass this option, website administrators can rest assured that site accessibility will remain intact.
Once an image is placed on the Stage, the Image description dialog box appears. This is where you can add alternative text descriptions for images.
Figure 2. Alternate Text for Images dialog box
The alt text entered here should describe the image simply and explain its function for the page. For example, consider the following banner image:
Figure 3. Banner image
Appropriate alt text for this image would be: "Mr. Moore's Music Class" or "A blackboard that reads 'Mr. Moore's Music Class.'" This description simply conveys the role of this image on the page. However, you don't need to provide overly detailed alt text, such as: "An image of a green blackboard with the words 'Mr. Moore's Music Class' written in white text." You should also avoid providing alt text that's too brief. One-word text entries such as "banner," "picture," or "top" lack sufficient description to convey the function of the image.
Adding accessible tables
When you add a data table to a page using Contribute, you'll be prompted to describe its features. The prompt will require you to identify whether a table has a row of headers, a column of headers, both row and column headers, or no headers at all. Header identification helps make tables easier to read for people using screen readers and is part of nearly every accessibility policy in the world. Typically, header identification requires hand-coding from the author. Contribute makes creating accessible tables much easier.
Figure 4. Adding accessible tables
The following examples clarify when to use these different options.
No heading
Use this option when the table is used only for formatting purposes:
| Hannah | Marsh |
| Libby | Kerr |
| Owen | Cranley |
| Max | Cohen |
| Jack | Clark |
Left heading
Use this option when headers are in the first column:
| Monday | Lecture |
|---|---|
| Wednesday | Lecture |
| Friday | Lab |
Top heading
Use this option when headers are in the first row:
| Park Street | Erin Street | Emerald Street | Drake Street |
|---|---|---|---|
| 8:00 | 8:05 | 8:10 | 8:15 |
| 8:30 | 8:35 | 8:40 | 8:45 |
| 9:00 | 9:05 | 9:10 | 9:15 |
Both top and left headings
Use this option when headers are in the first row and the first column:
| Monday | Wednesday | Friday | |
|---|---|---|---|
| Lecture | Chapter 1 | Chapter 2 | Chapter 4 |
| Notes | Course Reader, pp. 5–32 | Course Reader, pp. 33–67 | Course Reader, pp. 96–124 |
| Lab | Lab Manual, pp. 6–17 | Lab Manual, pp. 18–31 | Lab Manual pp. 49–67 |
Formatting text
For a site to meet World Wide Web Consortium (W3C) Priority 2 checkpoints, CSS should be used to format text on the page. Contribute includes options that make this process transparent for content contributors. When you want to modify the font used on the page, Contribute generates the necessary CSS.
Keep two points in mind as you edit a page using CSS. First, CSS lets designers make sites look consistent across different pages. This is often done by assigning specific formatting properties to different headings and paragraphs, making text formatting much easier. When you select the heading type from the Style menu, the formatting is applied automatically.
Second, CSS allows you to use different types of text sizes. Contribute supports the use of points, pixels, and ems. Points and pixels are absolute sizes. This means that the text is always displayed at the same size, even if users make changes in their browsers by choosing View > Text Size > Largest. Fixed font sizes can make pages much harder to read for people with low vision. Instead, designers should use relative font sizes. Relative font sizes change all fonts on the page proportionately as changes are made in the browser.
If Contribute has been set up to use relative font sizes, the equivalent point values can be approximated as follows:
| 8 pt | 66% |
| 9 pt | 75% |
| 10 pt | 83% |
| 11 pt | 92% |
| 12 pt | 100% |
| 14 pt | 112% |
| 16 pt | 133% |
| 18 pt | 150% |
| 20 pt | 166% |
| 22 pt | 183% |
| 24 pt | 200% |
| 26 pt | 217% |
| 28 pt | 233% |
| 36 pt | 300% |
| 48 pt | 400% |
| 60 pt | 500% |
| 72 pt | 600% |
It's important to remember that all of these values are approximate based on the way the browser handles CSS.
