Adobe® Fireworks® CS5 software is the definitive solution for professional web graphics design and production. Fireworks CS5 is the first production environment to address and solve the special challenges facing web graphics designers and developers.
You can use Fireworks to create, edit, and animate web graphics; add advanced interactivity; and optimize images in a professional environment. With Fireworks, you can create and edit bitmap and vector graphics in a single application. Everything is editable, all the time. Furthermore, you can automate the workflow to meet the demands of time-consuming updates and changes.
Fireworks integrates with other Adobe products such as Dreamweaver®, Flash®, and Flash® Builder™, as well as your other favorite graphics applications and HTML editors, to provide a truly integrated web solution. You can easily export Fireworks graphics with HTML and JavaScript code customized for your HTML editor.
- Accessibility commands
- Adding alternative text to a slice or hotspot
- Exporting HTML from Fireworks
- Alternative text
- Customized color swatches
Accessibility commands
Fireworks offers two powerful commands to evaluate Fireworks graphics for accessibility. The Select Blank ALT Text command selects all hotspots and slices that do not have alternative text assigned. This gives authors the opportunity to review the image and set the text before transferring the file to Dreamweaver or any other HTML editing tool. The Set Blank ALT Text command enables designers to provide a single description for all images that do not have alternative text; this command is particularly useful for naming graphics used as spacers. The inclusion of alternative text allows images to be interpreted by text-only assistive devices. These Fireworks commands are available from the Commands menu in the Web category.
Adding alternative text to a slice or hotspot
To create accessible web pages, you need to mark up page elements with information for assistive technologies, such as screen readers. For example, each image on a page should be given a text equivalent, called alternative text (or alt text), which a screen reader conveys to users in place of the image.
Alternative text appears on the image placeholder while the image is downloading from the web; it also substitutes for graphics that fail to download. In some newer versions of browsers, the text appears next to the pointer as a ToolTip.
To specify alternative text for a selected slice or hotspot, type the text in the Alt field in the Property inspector:
Exporting HTML from Fireworks
When you export or copy HTML from Fireworks, the following code and files are generated so that your Fireworks image can be re-created on a web page:
- The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements: Fireworks HTML contains links to the exported images and sets the web page background color to the canvas color.
- One or more image files, depending on how many slices are in your document and how many states you include in buttons.
- A file called spacer.gif, if necessary, which is a transparent, 1-pixel-by-1-pixel GIF file that Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table. You can choose whether Fireworks exports a spacer. By default, Fireworks CS5 adds an empty alt attribute to spacer images, which alerts screen readers that this image holds no content. The spacer image is therefore ignored, unless it is linked or clickable.
Alternative text
Fireworks provides a web graphics production tool for developers to insert alternative text within the design tool itself. The Fireworks Object Inspector allows alternative text attributes to be assigned to any hotspot or image slice. With the inclusion of alternative text, images can be interpreted by text-only assistive devices.
W3C reference: Alternative text for images
Customized color swatches
In Fireworks, designers can easily create and share custom color swatch panels to achieve proper contrast in hue and saturation for web graphics. Web graphics, such as buttons, require adequate contrast between foreground and background to be more easily interpreted by people with some visual limitations.
W3C reference: Color contrast
