Creating accessible web pages has never been more important than today. With the adoption of accessibility standards in the United States, Canada, the European Union, Australia, Japan, and other countries, designers and developers need to ensure that people with disabilities can access the contents of websites and web applications, as well as the authoring tools used to create them.
Adobe® Dreamweaver® CS6 software provides the most complete set of tools available for building, editing, and maintaining accessible websites and web applications. It offers support for users of assistive technologies, as well as for individuals seeking to create accessible web content and web applications. Dreamweaver CS6 makes it easy for designers and developers to understand and comply with accessibility standards, with features that include a reference guide, templates, code snippets, and built-in accessibility validation tools. It also includes features designed to handle some of the most complex accessibility issues, such as the creation of accessible forms and data tables. Finally, Dreamweaver CS6 makes it easier than ever for people with disabilities to create websites and web applications. With improvements to the authoring environment, it works better than ever with assistive technologies such as the GW Micro Window-Eyes and the Freedom Scientific JAWS for Windows® screen readers.
- Accessibility preferences options
- Accessibility validation
- Accessibility reference
- Accessible templates
- Accessible authoring environment
Accessibility preferences options
To create accessible web pages, page elements need to be marked up with information for assistive technology, such as screen readers. For example, each image on a page should be given a text equivalent, called "alternative text" (alt text), which a screen reader conveys to users in place of the image.
Designers often overlook accessibility features such as alt text when creating websites, but Dreamweaver CS6 allows you to set preferences that prompt you to provide accessibility information as you're building the page. By activating options in the Preferences dialog box, you'll be prompted to provide accessibility-related information for form objects, frames, media, images, and tables as each element is inserted in a page. To set the accessibility preference choose Edit > Preferences (Ctrl + U on Windows, Cmd + U on Mac OS) and select the accessibility category from the Preferences dialog.
For example, if you choose the Images option in the Show Attributes list, you will be prompted to provide the text equivalent and a description for each image as it is inserted. When you insert an image, the following panel appears:
Creating accessible tables and forms presents some challenges, but Dreamweaver CS6 simplifies the process. For example, as you insert a data table within Dreamweaver CS6, you're immediately prompted to provide summary information, a caption, and the position of heading cells in the table. Incidentally, by adding identifying heading cells — an important but often overlooked design step — you make it significantly easier for assistive technology users to navigate tables.
Creating accessible forms is also easy with Dreamweaver CS6. When you select the Form Objects option in the Preferences dialog box, you're prompted to provide a label for each form object, along with a shortcut key and the tab order position. Specifying the label allows assistive technology users to understand the purpose of each form object as they complete the form.
Accessibility validation
Dreamweaver CS6 no longer includes a built-in accessibility validation tool. However, there are a number of third party web accessibility evaluation tools. The W3C Web Accessibility initiative provides a comprehensive list of these tools at http://www.w3.org/WAI/RC/tools/
Accessible templates
Dreamweaver CS6 includes several templates designed for accessibility. These templates are visually balanced, as well as accessible to people with disabilities. They provide you with a fast and easy way to create exciting, engaging, and accessible content.
Accessible authoring environment
Dreamweaver CS6 integrates with assistive technologies. With the labeling and sequencing of buttons, Dreamweaver CS6 is the most powerful web development environment for users of assistive technology, such as Window-Eyes from GW Micro, JAWS from Freedom Scientific, and ZoomText from Ai Squared.
Several features in Dreamweaver CS6 help disabled users facilitate the creation of web pages. Among these features are two shortcut keys that allow users to access Dreamweaver CS6 panels by using the keyboard. The first of these shortcuts, Control+F6, allows users to access Dreamweaver CS6 panel groups. From there, pressing Tab moves users to the buttons on the open panel. Pressing Control+Tab moves users to other panels in that group.
The second shortcut allows users to return to the page window by pressing Control+Alt+Home. Users will need this keystroke after moving among single panels and panel groups.
Additionally, Dreamweaver CS6 provides shortcuts for frame and table navigation. To navigate frames, the Alt key is used in combination with the down and up arrow keys to move down or up a nested frame structure. Using Alt in combination with the horizontal arrow keys allows sibling frames to be selected. For tables, Control+A can be used repetitively to select a cell or the entire table, or to move out of the table.
Support for operating system accessibility features
Dreamweaver CS6 supports accessibility features in both the Windows and Macintosh operating systems. For example, on the Macintosh, you set the visual preferences in the Universal Access Preferences dialog box (Apple > System Preferences). Your settings are reflected in the Dreamweaver workspace.
The Windows operating system's high contrast setting is also supported. You activate this option through the Windows Control Panel, and it affects Dreamweaver as follows:
- Dialog boxes and panels use system color settings. For example, if you set the color to White on Black, all Dreamweaver dialog boxes and panels appear with a white foreground color and black background.
- Code view uses the system and window text color. For example, if you set the system color to White on Black, and then change text colors in Edit > Preferences > Code Coloring, Dreamweaver ignores those color settings and displays the code text with a white foreground color and black background.
- Design view uses the background and text colors you set in Modify > Page Properties so that pages you design render colors as a browser will.
Screen reader performance
As a Dreamweaver designer, you can use a screen reader to assist you in creating your web pages. The screen reader starts reading from the upper-left corner of the Document window. Dreamweaver works well with JAWS for Windows from Freedom Scientific and Window-Eyes from GW Micro.
The Offscreen Rendering (Disable when using Screen Readers) option offers improved screen reader performance in Dreamweaver CS6. To prevent flickering, Dreamweaver CS6 uses double buffering, which draws the screen in memory before displaying it to the user. Screen readers work best with this option disabled.
