Creating Accessible Web Content with Dreamweaver

Creating Accessible Web Content with Dreamweaver • December, 2011 Page 1

Creating Accessible Web Content with Dreamweaver

High Tech Center Training Unit of the California Community Colleges

at the Foothill-De Anza Community College District

21050 McClellan RoadCupertino, CA 95014

(408) 996-4636

http://www.htctu.net

Page 2 Creating Accessible Web Content with Dreamweaver • December, 2011


Contents

Dreamweaver CS 5.5 .....................................................................5

System Requirements: ........................................................................ 6

Description: .......................................................................................... 6

Dreamweaver and Accessibility: ......................................................... 7

Keyboard Navigation: .......................................................................... 8

Accessible Web Content: .................................................................. 11Usability ............................................................................................................................................. 11

Text is Essential ................................................................................................................................. 11

Beyond Text ....................................................................................................................................... 12

Interactivity ........................................................................................................................................ 12

Standards ............................................................................................................................................ 12

WCAG 2.0 ......................................................................................................................................... 12

Section 508 of the Rehabilitation Act of 1973, as ammended in 1998. ............................................. 13

§ 1194.22 Web-based intranet and internet information and applications. ...................................... 13

§ 1194.21 Software applications and operating systems. ................................................................ 15

Creaing Accessible Content with Dreamweaver ........................... 17Accessibility Preferences ................................................................................................................... 17

Accessibility Validation ..................................................................................................................... 18

Accessibility Reference ..................................................................................................................... 19

Properties Dialogue ............................................................................................................................ 19

Web Content ....................................................................................................................................... 20

Style and Structure with Text ............................................................................................................. 21

Formatting for Structure .................................................................................................................... 21

Style with Cascading Style Sheets ..................................................................................................... 21

Images ................................................................................................................................................ 22

Tables ................................................................................................................................................. 23

Forms ................................................................................................................................................. 23



Publisher:Adobe Systems Incorporated

345 Park Avenue

San Jose, CA 95110-2704

USA

www.adobe.com

Cost$399 Complete, $199 Upgrade

$149 Teacher/Student

Dreamweaver CS 5.5


System Requirements:

Windows• Intel® Pentium® 4 or AMD Athlon® 64 processor

• Microsoft® Windows® XP with Service Pack 2 (Service Pack 3 recommended); Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7

• 512MB of RAM

• 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash-based storage devices)

• 1280x800 display with 16-bit video card

• DVD-ROM drive

• Broadband Internet connection required for online services*

Mac OS• Multicore Intel® processor

• Mac OS X v10.5.7 or v10.6

• 512MB of RAM

• 1.8GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive file system or on removable flash-based storage devices)

• 1280x800 display with 16-bit video card

• DVD-ROM drive

• Broadband Internet connection required for online services.

• Internet access is required for product activation.

DescriptionDreamweaver CS5 is one of the industry’s leading web authoring tools, providing the capability to build dynamic websites and applications while maintaining an ease of use factor that allows use by individuals who are new to creating web content.

Dreamweaver CS5 is available with the Creative Suite Design Premium, Web Premium, or Master Collection softeware bundles.

Dreamweaver CS5 provides both a scripting and What You See Is What You Get editor for layout of pages and creation of scripts and supporting documents such as Cascading Style Sheets (CSS), JavaScript, PHP, XHTML, ColdFusion, and ASP, just to name a few.

Dreamweaver CS5 also provides easy integration with other Adobe products such as Photoshop, Flash, Fireworks, and others. Dreamweaver CS5 features several modern server models and frameworks for web developers who want to develop applications and sophisticated interactivity.


Dreamweaver and AccessibilityAdobe has built Dreamweaver CS5 with accessibility in mind, and they provide tools to help ensure accessibility during the creation of content as well as providing as accessible an interface as they can for the authors who are creating the content. Dreamweaver CS5 provides keyboard navigation, support for screen readers, as well as basic operating system accessibility features.

Dreamweaver CS5 provides tools to assist in the creation of accessible web content as specified by Section 508 guidelines from the Rehabilitative Act of 1973 (as ammended in 1998) and the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG), including reference tools for the specifications of different web format attributes and elements and the actual specifications for the accessibility standards of Section 508 and the WCAG.

To enable the accessibility features of Dreamweaver CS5 for content creation, select “Preferences” from the “Edit” menu in Windows, or select “Preferences” from the “Dreamweaver” menu in Mac OS X. Next, select “Accessibility” from the category list on the left, and then enable the accessibility options from the corresponding list.


Keyboard NavigationWith Dreamweaver CS5, it is possible to use keyboard commands to navigate through the interface panels, inspectors, and dialog boxes. Within webpages you can also navigate between and through frames and tables.

It is only possible to Tab and use arrow keys to navigate within Dreamweaver CS5 in the Windows operating system.

Navigating Interface PanelsIt is possible to navigate between different panels in the Dreamweaver interface by first setting your focus to the panel you are currently in, and then cycling to other panels.

Here are the basic keyboard commands for navigating between and within interface panels:

• To shift focus to your current panel while in the Document window, press CONTROL + F6.

• CONTROL + F6 will cycle through the interface panels.

• TAB will cycle through the portions of each panel.

• When appropriate, the ARROW keys can be used to navigate within the

Dreamweaver Interface


panels.

• Pressing SHIFT + CONTROL + F6 will cycle backwards through the interface panels.

Navigating the Properties Panel

In order to navigate to the PROPERTIES panel, you must first make sure it is toggled open.

Press CONTROL + F3 to toggle the PROPERTIES panel.

When the Properties panel is open, pressing CONTROL + F6 will eventually lead you to the Properties panel, as Dreamweaver cycles through the currently open panels.

Detailed Properties Information

With the Properties panel in focus, pressing CONTROL + UP or DOWN ARROW (WINDOWS) will expand or collapse the detailed information of the Properties panel. For Mac OS X, press COMMAND + UP or DOWN ARROW.

Navigating Dialog Boxes

Dreamweaver allows you to use the keyboard in order to interact with program dialog boxes.

Following are the basic keybaord commands for interacting with dialog boxes:• The TAB key will move through the different options within a dialog

box.

• ARROW keys will move through choices for any options that are available.

• CONTROL + TAB will shift focus to a Category list if there are any.

• ARROW keys can be used to move among the different options of the category list when available.

• When finished selecting optiopns, pressing CONTROL + TAB will return focus to the options for the category list.

• Press ENTER to close the dialog box.

Navigating FramesWhile the use of frames is generally discouraged, Dreamweaver CS5 supports keyboard navigation between frames and within the parent-child hierarchy employed by frames.

To select a frame, make sure the document window is selected. If you are not in the document window you can shift focus there by pressing ALT + DOWN ARROW.

Once you are within the document window, you can use the following keyboard commands to interact with the frames:

• Press ALT + UP ARROW to select the frame with the current focus.


• Press CONTROL + UP ARROW to select the FRAMESET that contains the current frame.

• Pressing CONTROL + UP ARROW again will continue to select the next higher frameset as long as you are still within a nested frameset.

• Pressing CONTROL + DOWN ARROW will likewise move you to a child frameset or individual frame within the frameset.

• When you are focused on an individual frame, you can press ALT + LEFT or RIGHT ARROW to move between the frames.

Navigating TablesDreamweaver CS5 allows for the navigation of table cells via the TAB key.

If you are in the farthest right cell of a table and press TAB, Dreamweaver CS5 will add another row to the table.

Press CONTROL + A to select a cell within a table (Windows only). Press CONTROL + A again to select the entire table.

When there is no cell selected, press CONTROL + A twice in a row to select the entire table.

To exit a table, select the table and then press the UP, LEFT, or RIGHT ARROW key.


Accessible Web ContentThe “Web” encompasses a wide range of digital content that is based on an even wider range of technologies. Due to the nature of some web-based content, there are bound to be some inherrently inaccessible media objects on “The Web”. However, whenever possible, measures can be take to enhance the range of options for accessing the content and interacting with the digital controls and applications that make up the various content that is collectively referred to as “The Web”.

UsabilityThere are many standards for measuring web accessibility, but ultimately, the best standard is the usability of the web content by a wide range of individuals with different disabilities.

The essence of usability is ensuring that the same message is delivered to everyone in a consistent way. This means that content needs to be presented in a way that allows the end user to load it into their own individual technology and interact with the interface and digital controls of the web content.

There are many ways to ensure accessibility of digital content for the web, but they all require the use of text at some level.

Text is EssentialText is the bottom line for accessibility and digital content on the web. In most cases, for digital media that is not text-based, an accessible text-based alternative can be provided; for example, alt-tags can be provided for images, transcripts for audio files, and captions for auditory information in video files.

Once digital text has been created, the next concern is in providing semantic structure to the text so that the different parts of the message can all be identified. Styles for paragraphs, headings, lists, etc, allow for more intelligent processing and displaying of digital information.

These styles also allow for the real-time conversion of digital text into alternate formats such as Braille or audio, as well as allowing interoperability with specialized reading technologies for a variety of different learning disabilities.

There are many more comnsiderations for text accessibility, often depending on the specialized needs of an individual. Recognizing that it is impossible to anticipate every possible type of print-related disability that may exist, it is recommended to follow the basic standards for accessibility that are published by the World Wide Web Consortium (w3c.org). By following these standards, individuals who access your web content will be able to have their individual technology render the content in a manner that they will be able to access.

One of the concepts of accessibility that needs to be embraced is the idea of customization of presentation of information while maintaining the consistency of the message. By providing the basic structure of your content through semantic styles, you will help ensure that it will be presented accurately in whatever language it is translated to, and that it can be properly understood regardless of the technology used by the end user.


Beyond TextOf course, there is much more to the Web than just text. Depending on the nature of the digital media, certain concerns will need to be addressed in order to ensure that the content can be properly presented and accessed by different individuals utilizing their individual technologies.

Often it will be necessary to provide details about the different pieces of digital content that will allow this content to be presented in an alternate fashion. Typically this is already part of the formal standard for designing multimedia, but may not be a required element of the design process. Even if it is not required by the authoring environment, designing to the proper standards will help ensure that accessibility happens more often than not.

InteractivityThe next challenge for creating accessible web-based content is providing control for all of the interface elements that allow for interactivity by the end user. Every menu control, form field, submit and rest button, table and hyperlink (to name just a few) need to be accessible to different technologies used by the end user to load and “view” the content. These different technologies are collectively referred to as “end-user agents”.

The World Wide Web Consortium(W3C) has created a means to ensure the standard elements of web-based media are able to be accessed by different end-user agents. By designing content to these standards, accessibility can be achieved for standard web content. When creating custom web content that does not use standard web media or technologies, the designer must actively support accessibility by emulating the basic philosophy of the W3C to ensure accessibility.

One fundamental aspect of ensuring interactive accessibility is to provide keyboard control for all interactive elements.

StandardsThe primary standards for web design should be based on the source of the Web-based media format, the W3C. The W3C provides a specific accessibility standard to assist in your efforts: http://www.w3.org/TR/WCAG20/

In the US, we have the Section 508 standards as well. The Section 508 standard essentially mirror the same concerns addressed in the W3C standards, and are available at: http://www.access-board.gov/508.htm. California state law also requires all state entities (like community colleges) to follow the 508 standards.

WCAG 2.0

The World Wide Web Consortium Accessibility Guidelines, version 2.0 (WCAG 2.0) provide a detailed reference for creating accessible web content. The World Wide Web Consortium also provides helpful references for dealing with the WCAG 2.0 standards, including an overview at www.w3.org/WAI/intro/wcag, and a quick reference for how to meet the WCAG 2.0 requirements at www.w3.org/WAI/WCAG20/quickref/.

The WCAG 2.0 provides a simplified framework as a starting point to investigating


the accessibility of your web content, based on the concpets of Perceivable, Operable, Understandable, and Robust (POUR). The World Wide Web Consortium (W3C) provides the following clarification of the POUR concepts:

Perceivable• Provide text alternatives for non-text content.

• Provide Captions and other alternatives for multimedia.

• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

• Make it easier for users to see and hear content.

Operable• Make all functionality available from a keyboard.

• Give users enough time to read and use content.

• Do not use content that causes seisures.

• Help users navigate and find content.

Understandable• Make text readable and understandable.

• Make content appear and operate in predictable ways.

• Help users avoid and correct mistakes.

Robust• Maximize compatibility with current and future user tools.

Section 508 of the Rehabilitation Act of 1973, as ammended in 1998.

Section 508 deals with the accessibility of electronic information and electronic information technology. While the main thrust of Section 508 is aimed at purchasing decisions, there is also a checklist of criteria to guide content creators towards creating more accessible electronic information.

Here are the Section 508 checkpoints that cover electronic content for the web:

§ 1194.22 Web-based intranet and internet information and applications.

(a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

(e) Redundant text links shall be provided for each active region of a server-side


image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(i) Frames shall be titled with text that facilitates frame identification and navigation.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(o) A method shall be provided that permits users to skip repetitive navigation links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Note to §1194.22:

1. The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:

Section 1194.22 Paragraph WCAG 1.0 Checkpoint(a) 1.1(b) 1.4(c) 2.1(d) 6.1(e) 1.2(f) 9.1


Section 1194.22 Paragraph WCAG 1.0 Checkpoint(g) 5.1(h) 5.2(i) 12.1(j) 7.1(k) 11.4

2. Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section. WCAG 1.0 is available at http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505.

Finally, because the 1194.22 standards also reference the standards for computer software in section 1194.21 of the 508 standards, here are the standards that will apply to any of the web-applications you might be considering buying or creating:

§ 1194.21 Software applications and operating systems.

(a) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.

(b) Applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards. Applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer.

(c) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.

(d) Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

(e) When bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application’s performance.

(f) Textual information shall be provided through operating system functions for displaying text. The minimum information that shall be made available is text content, text input caret location, and text attributes.

(g) Applications shall not override user selected contrast and color selections and other individual display attributes.

(h) When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user.


(i) Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

(j) When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.

(k) Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.

(l) When electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.


Creaing Accessible Content with DreamweaverDremweaver provides a rich authoring environment capable of supporting many of the popular web formats.

Accessibility PreferencesDreamweaver provides built-in accessibility features to help in the creation of accessible content. By enabling the options for form objects, frames, images and media, Dreamweaver will automatically prompt you for the requisite accessibility information whenever you insert these types of content.

You can access the accessibililty options through the main program preferences option panel.

For Windows systems:

Go to Edit>Preferences>Accessibility.

For Mac OS systems:

Go to Dreamweaver>Preferences>Accessibility

Dreamweaver Welcome Screen


Accessibility Preferences in Dreamweaver

Accessibility ValidationUnfortunately, Accessibility validation has been “deprocated” from the CS5 version of Dreamweaver. Luckily, there are many free validators available, including extensions and plugins that can be configured to work with Dreamweaver.

One of the primary validators from previous versions of Dreamweaver is still available for free on the Internet: Cynthia Says (http://www.cynthiasays.com/).

Additional options for California Community Colleges include the ACC Verify/Repair aplicaiton from HiSoftware, as well as the server based solution “Compliance Sherriff”. For more information about these products, contact Jayme Johnson.


Accessibility ReferenceDreamweaver also includes an accessibility reference based on the Section 508 standards and the Web Content Accessibility Guidelines. Part of the standard “Reference” pane of Dreamweaver, this information was put together by Usable.net.

Dreamweaver Accessibility Reference

Dreamweaver Properties Dialogue

Dreamweaver Properties dialog for content styled with Heading 1

Properties DialogueDreamweaver also provides contextual information about specific content in your web page. When you select an element of the web page you are editing, you can find and edit detailed information through the properties dialogue.

The Properties dialog is normally at the bottom of the Dreamweaver interface, and it can be collapsed or expanded by double clicking on the title bar of the dialog window, labeled “Properties”.

Because the Prperties dialog is context-based, it will change depending on the content you have selected in the Dreamweaver editing window, in both the Design and Code view.


Web ContentDreamweaver allows you to include a variety of digital content in your web pages. Beginning with Text, and including full interactive multimedia and scripting. The accessibility potential of these types of content will ultimately be determined by the media itself, though Dreamweaver does allow for some direct editing of accessibility information of form objects, frames, images, and basic media.

To place digital content within your web page in Dreamweaver:

1. Locate the portion of your web page where you want the new digital content to appear

2. Insert your cursor in the document where you want the digital content to begin

3. Open the Dreamweaver “Insert” menu (ALT + I)

4. Select the appropriate digital content type from the Insert menu

5. Dreamweaver will prompt you to brose to the content on your computer.

Dreamweaver also supports many types of digital content that can be automatically created and further enhanced or modified, such as forms and form elelments, hyperlinks, tables, and scripting elements.

Once you have enabled the Dreamweaver Accessibility preferences, you can be automatically prompted to provide accessibility information for certain types of digital content when you place them in your web page.

Dreamweaver’s Insert Menu


Style and Structure with Text

Text is the basic starting point for accessible Web content. Adding style and structure to your text allows it to be even more useable and accessible. Making this style and structure accessible requires identifying the pieces of your content and labeling them as paragraph, heading, list, etc. Dreamweaver will automatically format everything as a paragraph, it is up to you to tell it where the headers and other parts are with the appropriate formatting.

Formatting for Structure

By using the “Format” menu, you can apply the heading and other styles necessary for accessibile content.

Applying headings with the Format menu in Dreamweaver is one of the most important aspects of providing structure to your textual content. Headings and other formats can be used by assitive technologies to give the end user a better experience when interacting with your content.

Other formatting such as unordered lists, ordered lists, and hyperlinks are also useful for navigation and interaction by assistive technologies, and it is important to properly format these items for maximum usability.

Style with Cascading Style Sheets

You can also add Cascading Style Sheets (CSS) to further enhance or alter the appearance and layout of your content.

Cascading Style Sheets can define the formatting for HTML elements like tables, paragraphs, headings, lists, hyperlinks, etc.; and CSS can also be used to create custom classes that you can assign to your content, allowing you to create any number of custom styles.

Dreamweaver places all of your custom styles created in a CSS under the “Class” menu on the properties dialog. The Class menu is immediately to the right of the Format menu.

Format Menu

Format and Class menus in the Dreamweaver Properties Dialog


It is important to recognize the relationship between the Class and Format menus, in order to properly use them for marking up your web content. You must use at least the Format menu to apply structure. You can add CSS through the Class menu if you wish, but it MUST be used in conjunction with the Format menu. Simply uising the Class menu without applying any choices from the Format menu will not enhance your content for accessibility.

The Format menu applies the semantic definition of the style to your content, which is what assistive technologies will use.

The Class menu applies visual styling to your content that will affect the way your web content appears on the final page, but assistive technologies don’t use this information for navigating and interacting with the content.

By accessing the “Format” menu, you can apply any of the selected styles to the content you currently have selected in the editor.

Dreamweaver Image Tag Accessibility Attributes

Dreamweaver Image Properties Dialogue1

Images

You can insert images into your Web content, as well as a variety of other media and content objects.

When you insert an image, Dreamweaver can automatically prompt you for the alternate text to describe the image. Alternate text should be concise and descriptive, but not too elaborate. It is important to allow the context of the image to define the alternate text you insert into the image.

Sometimes you will need to provide an elaborate description for a complex or detailed image. In these cases, you utilize the longdesc element. The longdesc element is a reference to a text file that contains the detailed description or explanation. When a user of assistive technology(AT) encoutners an image with an embedded longdesc reference, the location of the longdesc text file is provided to the AT user. The AT user can then load and read the longdesc file if they choose.


Dreamweaver Table Creation Dialog

When you have inserted an image into Dreamweaver, you can also examine the properties dialogue to see the alternate text and other information.

Tables

Dremweaver allows for the use of tables in an accessible way. For tables to be accessible, they need to have a clearly specified relationship between header rows and columns with the internal data cells. For this reason, it is important to never nest tables inside other tables. While the visual depiction might make the implied relationship obvious, it is often less obvious when presented through assisitive technology.

When you insert or create a table within Dreamweaver, it will automatically prompt you to declare the header rows and columns, as well as provide an opportunity to create a table caption. If you do not complete this information at the time of creation, you will have to enter it manually through the code view if you later decide to add it.

Forms

Dreamweaver also allows you to easily insert forms and form elements in your web pages. Dreamweaver also allows you to insert scripting to control your forms, supporting a variety of technologies, such as ASP, JavaScript, and Spry.

By setting the Accessiblity Preferences within Dreamweaver, you can be automatically prompted to provide basic accessibility information for each element


that you insert into your web page.

For form accessibility, one of the critical elements is the proper naming of all form elements, as this is what will be used by assistive technology to provide the end user with information about what part of the form they are on.

Making sure that the form elements will function with keyboard commands is another concern for accessibility. Mouse-driven events may produce stunning visual

results, but they need to be backed up with keyboard and event controls so that the same processing and communication will happen if the end user doesn’t use a mouse to interact with the content.

To insert a form element in Dreamweaver:

1. Find the location in your web content where you want the form element to be placed

2. Insert your cursor at the appropriate location in your web document

3. Goto the “Insert” menu

4. Select the “Form” submenu

5. Find the form element you want to insert into your page from the submenu

6. Select the form element.

If you have enabled the Accessibility Preferences for Dreamweaver, you will be prompted for the basic

identification and accessibility information required to make your form functional and accessible.

Please note, you must satisfy the need for a “Form Handler” on your web server in order to process the forms you create, or else provide the appropriate scripting within your web pages to take care of the form data your users will create.

Form Elements

There are several common form elements that you can insert with Dreamweaver, including text boxes, radio buttons, check boxes, selection lists/menus, and buttons, as well as a variety of other form elements and supporting support for scripting to program and control the form elements you create.

Dreamweaver Insert Form Submenu


Here are some of the common form elements you can create with Dreamweaver:

Text Input:

Based on the code:

<label for=”textinput01”>Text Input</label>

<input type=”text” name=”textinput01” id=”textinput01” />

Text Area:

Based on the code:

<label for=”textarea01”>Text Area</label>

<textarea name=”textarea01” id=”textarea01” cols=”45” rows=”5”></textarea>

Button:

Based on the code:

<label for=”button01”>Jayme’s Button</label>

<input type=”submit” name=”button01” id=”button01” value=”Submit” />

Checkboxes:

Based on the code:

<p>

<input type=”checkbox” name=”Checkbox01” id=”Checkbox01” />

<label for=”Checkbox01”>Checkbox Option 1</label>


</p>

<p>

<input type=”checkbox” name=”Chceckbox02” id=”Chceckbox02” />

<label for=”Chceckbox02”>Checkbox Option 2</label>

</p>

Radio Button:

Based on the code:

<p>

<input type=”radio” name=”radio” id=”RadioButt01” value=”RadioButt01” />

<label for=”RadioButt01”>Radio Button Option 1</label>

</p>

<p>

<input type=”radio” name=”radio” id=”RadioButt02” value=”RadioButt02” />

<label for=”RadioButt02”>Radio Button Option 2</label>

</p>

Select List/Menu:

Based on the code:

<label for=”Select01”>Select List or Menu</label>

<select name=”Select01” id=”Select01”>

<option value=”option01”>Option 1</option>




</select>


Example of File Field:

Based on the code:

<label for=”FileField01”>File Field</label>

<input type=”file” name=”FileField01” id=”FileField01” />

Dreamweaver Support for Accessible Forms

Dreamweaver allows you to set your preferences so that the program will automatically prompt you for the basic accessibility information needed when you insert your form elements, but only if you insert them via the “INSERT” menu. If you hand-code your forms in the code window, you will have to enter the proper accessibility information by hand.

Dreamweaver Form Field Creation Dialog