Long Descriptions - Techniques for Authoring Tool Accessibility

Figure A-1: Options

Screenshot of an options dialog with a contrived Accessibility property card showing. There are four subheadings on the card: Target Accessibility Standards, Accessibility Checking, Accessibility Highlighting, and Accessibility Help. Under Target Accessibility Standards there are two checkboxes: W3C-WAI, with a drop down level selector currently showing "Double A" and U.S. Section 508. Under Accessibility Checking are five checkboxes: Check accessibility as you type, check accessibility after saving, check accessibility during publishing, auto-correct when possible, and show summary. Under Accessibility Highlighting are two checkboxes: highlight accessibility related fields and prompt when highlighted fields are left blank. Under Accessibility Help is one checkbox: Provide accessibility "Quick Tips".

Figure A-2: Floating Properties Bars

Screenshots of the the floating properties bar from Dreamweaver 2.0. The first shows the bar in its extended form with a top and bottom half (two long text lines each). In the collapsed bar that follows, the bottom half is not present. From left to right, the top half of the bar contains: a thumbnail of the image, the size of the image, and text box controls to change the Width, Height, Src, Link, Align (drop-down menu) and Alt. At the far right edge there is a question mark button (help) and down arrow button (more properties). The bottom half of the bar contains controls for drawing image map shapes, setting VSpace and HSpace, Target, Low Src, Border, Justification, and controls to edit the image and reset the size.

Figure A-3: Icon Highlighting of Input Field:

Screenshot of a tag editor for IMG. The dialog contains text box controls to change: Source, Alt. Text, Name, Width, Height, Align (drop-down menu), HSpace, VSpace, and Border. The Source field of the card has a black asterix icon beside it (indicating that it is required). The Alt. Text field has a red asterix icon that references to a line of text reading "Note: ALT text is required for accessibility.

Figure A-4: Color Highlighting of Input Field

Screenshot of a tag editor for IMG. The dialog contains text box controls to change: Source, Alt. Text, Name, Width, Height, Align (drop-down menu), HSpace, VSpace, and Border. The Alt. Text field is colored light yellow.

Figure A-5: Accessibility Tab:

Screenshot of a contrived tag editor for INPUT. It is a multi-card dialog with the Accessibility tab selected. The Accessibility card contains text box controls to change accessibility features including: title, access key, tab index (with generate label tag checkbox). Following this are some "Quick Tips": 1. For a radio button or checkbox its caption (if defined) takes precedence over its label, 2. If no ID is defined, an implicit label will be generated. 3. If a LABEL tag is generated, any access key will be defined on LABEL rather than the field except for a radio button or checkbox. 4. MSIE 4+ (only) supports LABEL but explicit labels only - specify an ID! 5. Tabindex is supported only by MSIE 4+ (not valid for hidden).

Figure A-6: Alert Dialog

Screenshot of a contrived alert dialog. The text reads: "You must enter alternate text to describe the image". An OK button appears below.

Figure A-7: Underlined Highlighting

Screenshot showing contrived WYSIWYG view of a document with an image of the earth. The image is surrounded by a blue squiggled outline. The user has just right-clicked on the image, bringing up a pop-up menu with its upper-left corner in the middle of the image. The menu items read: Set alt="An earth rise as seen from the surface of the moon", Enter different alt-text..., Check Accessibility..., Help...

Figure A-8: Font Color Highlighting

Screenshot showing contrived code view of a document containing an image. Since the image markup lacks an "alt" attribute the font color of the offending element has been changed to red.

Figure A-9: Alert on Save

Screenshot of a contrived saving dialog with an alert added. The alert consists of a yellow alert icon on the save button. The same icon appears at the bottom of the dialog with the words: "This file contains graphical elements that are missing text descriptions."

Figure A-10: Spell Checker

Screenshot of a contrived checker. The window title is "Accessibility: Image". This is followed by the type of error: "Missing Alternate Text for an Image") in heavy type. A thumbnail of the image is followed by the image file name "pic234.gif". Below this is a combo (text and drop-down) box for entering the ALT text. Following this are "Quick Tips": 1. "Alternate (ALT) text should be 10 words or less and should include any text in the image. 2. Images serving as buttons should have ALT text that emphasizes the action performed by the button. 3. Images serving as bullets should have "bullet" as ALT text.

Figure A-11: Secondary Author

Screenshot of a contrived chat/whiteboard tool. The window title is "Whiteboard/Chat (John)". From left to right are three panels. The first is a list of current participants in the session (Presenter, John-identified as the whiteboard describer by a checkmark, Jane and Alice). The middle is a whiteboard showing a picture of an earth rise as seen from the moon and a red box drawn between the earth and the lunar horizon. Under the whiteboard canvas is nine tool selection buttons: a selection tool, a text tool, a marker tool, a fill tool, an eraser tool, an image insertion tool, a line drawing tool, a rectangle drawing tool, and an oval drawing tool. The third panel is a chat showing an ongoing monologue by "Presenter" interspersed by whiteboard action announcements with accompanying descriptions (highlighted in yellow). The panel includes an area for typing and sending messages to the ongoing dialog. Beneath the panels in a "Whiteboard Description" area. The area contains a "Request whiteboard descriptions" checkbox used by participants to anonymously request descriptions of the whiteboard contents, an "Accept "whiteboard describer" duty for this session checkbox that allows a participant to volunteer to add the descriptions (in this case we are looking at John's screen and he has volunteered). Below this is a textarea where John is prompted to "Describe Presenter's use of Marker Tool". Ordinarily, the description is then placed automatically into the dialogue at the place where the described action occurred. If the user presses "skip" (usually because the action is part of a larger action that is described), the action removed from the dialog. Help is also available.