oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Dreamweaver MX 2004 for Mac OS X
Pages: 1, 2, 3

New Accessibility Features

Some new accessibility features in this version of Dreamweaver can make your site more compliant with the W3C's Web Accessibility Initiative and/or the U.S. government's Section 508 guidelines.

Accessible web sites, aside from being the law of the land for the U.S. government, are simply common sense and good manners. You want everyone within your target audience to be able to view your web site. You don't want to lock out those who have visual, auditory, or motion disabilities.

Whether you're starting from scratch or retrofitting parts of your site, in MX 2004, accessibility is built in. Dreamweaver MX 2004 ships with multiple tools for designers who use assistive technology as well as features that help webmasters build accessible web sites. It is more efficient to build accessibility into your site from the ground up rather than to retrofit an existing site.

Accessibility features include screen-reader support, text equivalents for graphics, keyboard shortcuts, and high-contrast display colors.

Accessibility starts with the preferences. Check off which elements must be accessible, and Dreamweaver will prompt you to add the proper tags to forms, frames, media objects, images, and tables, all while building the site.

Tables prompt you for accessibility tags by default. Table tag features such as Caption and Summary are built into the Table dialog box. Indicating where headers are located organizes the information read by screen readers.

With Dreamweaver's accessibility preferences enabled, nothing is left to chance. You are reminded to create ALT tags for your images.

Labels indicate the purpose of form items, such as text boxes, checkboxes, or Submit buttons. Dreamweaver MX 2004 prompts you to fill in form labels (which are read by screen readers), and choose access keys, and a tab-index. These elements help those using assistive technologies to more easily navigate through a form and to understand each element of the form as they fill it in.

You can wrap a label tag around a form object with the Wrap with label tag style. This option assumes that the label and the form object are next to each other.

The Attach label tag using "for" attribute allows the label and form object to be separated by table cells, or be placed above or below each other. This option offers more flexibility in the placement of form objects and their labels, while still associating the correct label with the correct form object. You can position the label tag before or after the object, as long as all labels are placed consistently.

Access keys -- a single letter or number -- allow users to find form objects via a keyboard shortcut. Access keys work well for longer forms that otherwise would require multiple keyboard tabs to access each required item. Tab index specifies the order that the tab key moves among elements on the page, and could be helpful if those elements' positions in the code differs from the visual layout of the page.

Access keys and Tab indexes are not required by the W3C or Section 508 of Federal Rehabilitation Act, but they can make forms easier to use for people with motion disabilities.

Even if you don't have a clue about Section 508 or W3C guidelines, you can still build an accessible web site. Dreamweaver MX 2004 contains a long list of accessible page templates in the Start Page dialog box.

Dreamweaver MX 2004 lets you test your site for accessibility. The tests are automatic, dynamic, and exhaustive. You can check by page, folder, or site. You do not have to correct any errors, and you can tailor the tests to any level of accessibility that your viewers require. Most accessibility policies worldwide are based on the W3C's Web Content Accessibility Guidelines.

In the Results inspector, click the green Reports arrow in the Site Reports tab.

A dialog box lets you choose which reports to run and lets you enable and disable various accessibility rules.

You can also enable and disable certain accessibility parameters in the Accessibility dialog box to sync your site with the needs of your audience. Click the Report Settings button to access the dialog box below.

Each notation in the Results Site Reports panel refers to UsableNet's Accessibility Reference guide that you can access through the More info button. Double-click on an error message, and it tells you exactly where on the page it is located, and highlights the code for you in code view. The reference tells you why it is inaccessible, to whom, by what standard, and how to fix it.

Use CSS to Align Sites with Updated HTML Standards

CSS implementation in Dreamweaver MX 2004 is so highly evolved it's nearly transparent. The program has a light, flexible way of approaching CSS, both propelling designers to use it, and making it easier to learn.

The first and most obvious implementation is the Page Properties button on the Property inspector. Unless you specifically set a preference to use HTML, Dreamweaver writes custom styles from the Property inspector by default. The Page Properties dialog box interface is simple to use to set all text styles such as color, background, headers, and even link rollover and underline styles. The Property inspector's text styling commands also write CSS.

To assign a new style, go to the Styles panel and click the New CSS Style button. Type the name of the selector, and fill in the CSS Styles dialog box to indicate how the style will look. You also can create a new style sheet, as well as add, subtract, or replace a style in an existing style sheet. Use the Attach Style Sheet button to attach a style sheet to any page. Once you have attached a style sheet, or added styles to a page, you can access and apply styles through the Property inspector.

Pages: 1, 2, 3

Next Pagearrow