Getting websites right the first time with Dreamweaver - Details
[How?]
[Turning on Accessibility Preferences]
[Adding an accessible Image]
[Adding a web accessible Table]
[Adding Labels to your Forms]
[Making accessible Media Objects]
[Making Frames accessible ]
How?
Dreamweaver MX allows you to set preferences to remind you to follow Section 508 federal accessibility standards, as you insert images, tables, forms and other media.
Turning on Accessibility Preferences
- Start Dreamweaver MX.
- Select Preferences on the Edit menu.
- In the Category column, choose Accessibility.
- Check all the checkmarks under Show Attributes when Inserting : (i.e. Form Objects, Frames, Media, Images, Tables).
- Ensure that Offscreen Rendering (Disable when using Screenreaders) is also selected.
- Select OK.
Add screen grab here ...
Adding an accessible Image
- From the Insert menu, choose Image , and in the Select Image Source dialogue box, navigate to the image you desire to insert.
- Highlight the image once to see a preview of the image at the right side of this dialogue box. If the image that shows in the Image Preview area is the correct one, select the OK button to insert it on your web page.
- Since you set preferences earlier to remind you to abide by web accessibility rules, the Image Tag Accessibility Attributes dialogue box will appear (figure 2). Where it says Alternate Text: type a short name to describe the image that the screen reader will understand.
Add screen grab here
Note: If the image was primarily for page design (e.g. a header or footer image), ignore the Alternate Text: text box and simply choose OK . Later select the image on the page itself, then the pop-up menu next to Alt and select <empty> in the Properties Inspector. Quotation marks will be placed next to the Alt tag in the code (e.g. alt=" "), which will cause the screen reader to ignore the image.
- If the image on the page isn't already selected, select it and continue formatting it (e.g. alignment, borders, links, etc.) in the Properties Inspector.
- Go to File , then Save As... and save your web page.
Adding a web accessible Table
- From the Insert menu, select Table .
- In the Insert Table dialog box, enter whatever values you desire and select OK .
Note: Next to Width , ensure you select Percent from the drop-down box for units.
- When the Accessibility Options for Tables dialogue box appears, type a caption for the table in the Caption: area
- From the Align Caption: menu in this dialog box, select an alignment .
- I n the Summary: area , t ype a short summary for the table .
- From Header: , select the manner in which this table should be read ( Row, Column, Both ) .
- Select OK to apply these options and close the Accessibility Options for Tables dialogue box.
- Select the table and continue with typical table formatting (e.g., alignment, borders, fonts, colors, etc.) with the Properties Inspector.
- Go to File , then Save As... and save your web page.
Note: If the table you are inserting is not a data table, do not select any of the accessibility options, as non-data tables do not need these additional accessibility features.
Adding Labels to your Forms
Labels associate the label text with the form object through HTML. If the labels are identified in the HTML, a screen reader will read the text label identified with the form object, regardless of where the label is placed visually on the web page. While it's also important to pay attention to the visual layout of labels, identifying labels within the HTML can make pages much easier for people to use with screen readers and other assistive technologies.
- When a form object is inserted on a page in Dreamweaver MX, the Input Tag Accessibility Attributes dialog box appears (figure 3):
Add screen grab here
- In this example, a simple text box form object has been added to the web page. The text label "First Name" has been entered in the Label: text box.
- Below the Label text box are three Style: options, which allow you to select the label style: Wrap with label tag, Attach label tag using 'for' attribute, or No label tag.
- The best results are accomplished by selecting Attach label using 'for' attribute . .
Note: This method allows the form label to be moved to another position within the page and is most compatible with existing screen readers .
- The Attach Label Tag Using 'for' Attribute option allows the label and form object to be separated by table cells or placed above or below each other. This option requires a bit more HTML code, but offers more flexibility than the first method .
- When using the Attach Label Using 'for' Attribute option, remember that if the text label is moved, the HTML label must be moved along with it. The easiest way to accomplish this is to select the HTML label element in the status bar before dragging the text label elsewhere on the page. This method will move the underlying HTML code along with the text.
Making accessible Media Objects
- Ensure the Media option is selected in Accessibility Preferences. This way a Flash Accessibility Attributes dialogue box will appear whenever you insert any Flash media.
- Similar to the Input Tag Accessibility Attributes dialogue box in Figure 3, the Flash Accessibility Attributes dialogue box requires you to provide a Title , etc. for the media object.
Making Frames accessible
Due to accessibility problems that arise from their use, it is recommended that you limit the use of frames in web pages.
However, if you feel it is absolutely necessary to use Frames:
- Make sure you have the Frames option selected in the Accessibility Preferences of Dreamweaver MX, in order to display the Frame Tag Accessibility Attribute dialogue box whenever you insert a frame .
Add screen grab here
- Enter a Title: with a meaningful name for each frame.