Long Descriptions - Techniques for Authoring Tool Accessibility

Options:

Screen shot of an options dialog. The Spelling & Grammar property card is at the front. There are seven check boxes on the card: check spelling as you type (checked), hide spelling errors in this document (unchecked), always suggest corrections (checked), suggest from main dictionary only (unchecked), ignore words in UPPERCASE (checked), ignore words with numbers (checked), and ignore Internet and file addresses (checked). A drop-down menu and button for choosing a custom dictionary follows. Under grammar options, there are four checkboxes: check grammar as you type (checked), hide grammatical errors in the document (unchecked), check grammar with spelling (checked), and show readability statistics (unchecked). A drop-down menu and button for choosing a writing style follow. A button to check the document is the last control on the property card.

Floating Properties Bar:

Screenshot of the the floating properties bar from Dreamweaver 2.0. The bar is is short, but wide, extending across the page. In this case, an image has been selected so, from left to right, 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).

Reference Highlighting:

Screenshot of the tag editor for IMG in HomeSite. It is a multi-card dialog with the IMG tab selected. The IMG tag card contains text box controls to change: Source, Alt. Text (with checkbox to include when blank), Name (with checkbox to include identical NAME and ID), Width, Height, Align (drop-down menu), Hspace, Vspace, and Border. Below this is an Image Map section with a Use Map text box and ISMAP checkbox. Other controls on the dialog (not the card) include a quote all attributes checkbox, a single quotes on attributes checkbox and an output on single line checkbox. There is also help, OK, and Cancel. The Source field of the card has a black asterix beside it (indicating that it is required). The Alt. Text field has a red asterix that references to a line of text reading "Note: ALT text is required only in HTML 4.0 but should always be present for accessibility.

Accessibility Tab:

Screenshot of the tag editor for INPUT in HomeSite . It is a multi-card dialog with the style sheets/accessibility (HTML 4.0) tab selected. The Style Sheets tag card contains text box controls to change Style Sheet properties, including: Class, ID and Style (with button). It also contains text box controls to change accessibility features including: access key, tab index (with text stating that "this attribute is supported only by MSIE 4+ (not valid for hidden)"), label text (with generate label tag checkbox and text stating "for a radio button or checkbox its caption (if defined) takes precedence"). Following this are some notes: If no ID is defined, an implicit label will be generated. If the LABEL tag is generated, any access key will be defined on LABEL rather than the field except for a radio button or checkbox. MSIE 4+ (only) supports LABEL but explicit labels only - specify an ID! Other controls on the dialog (not the card) include a quote all attributes checkbox, a single quotes on attributes checkbox and an output on single line checkbox.

Spell Checker

Screenshot of the Spell Checker from Microsoft Word 2000. The checker is comprised of a multi-line edit box where the sentence with the error (in this case "There are a few spellling missstakes") is placed, and a multi-line list box where suggestions (in this case "spelling, spellings, spilling") are placed to be selected by the user. Down the right side of the dialog are the following buttons (Ignore, Ignored All, Add, Change, Change All, and AutoCorrect. At the bottom of the dialog is a Dictionary language chooser (drop-down menu), a help button, an Options button, an Undo button, and a Cancel button. The first misspelled word ("spellling") is highlighted in red.

Alternate Text Utility

Contrived screenshot of the an A-Prompt repair screen for missing alternate text for image. At the top is the title ("missing alternate text for image") in heavy type. The image file name "pic234.gif" follows with a thumbnail of the image. To the right of that is a combo (text and drop-down) box for entering the ALT text. Following this are guidelines: "Alternate (ALT) text should be 10 words or less and should include any text in the image. Certain kinds of images require special ALT text: 1. Spaceholder images should have " " as ALT text. 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..

Alert

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

Alert on Save

Contrived screenshot of an DreamWeaver 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."

Underlined Highlighting

Screenshot showing underlining alerts from MS Word 2000. A portion of a document is visible. It reads "This sentence has a grammar problems. This sentence has a misspelled woord." The underling alerts appear under "a grammar problems" in green (grammar error) and under "woord" in red (spelling error). The lines themselves are tightly zig-zagged. The user has just right-clicked on "woord", bringing up a pop-up menu with its upper-left corner just below "woord". The menu provides suggestions "word, wood, and wooed", Ignore All, Add, AutoCorrect (submenu), Language (submenu) and Spelling (to launch a full check).

Font Color Highlighting

Screenshot showing font color highlighting in of Frontpage 2000. The HTML document being edited can be viewed in three ways using tabs near the bottom (normal, HTML, preview). In this case the HTML view is selected so the raw HTML code is displayed. However, the user has left the end bracket off the <head> tag. This syntax error causes all later tags to be displayed in red font (to show the error). The <html> tag is shown in blue font because it appears before the syntax error.