Creating Accessible Web Content in Dreamweaver

Introduction

Dreamweaver is a popular web authoring tool developed by Adobe. It is often used as a WYSISYG (What you see is what you get) editor, meaning it allows people to create web pages without spending as much time in the markup or code. This tutorial outlines how to create accessible web content in Dreamweaver.

Note

Unless specified, instructions are for Dreamweaver CC 2014 or newer.

Image Alternative Text

Every <img> element should have alternative text that presents the content or function of the image to screen reader users. To give an image alternative text, select the image and enter the alternative text in the Alt field, located in the Properties panel at the bottom of the page.

screenshot

If the Properties panel is not visible, select Window > Properties.

Important

When you insert an image in Dreamweaver, it is given null alternative text (alt="") by default. If the image is decorative, or if the alternative text of the image is provided in nearby text, then you can leave this field blank. Otherwise, make sure to add appropriate alternative text.

Images in older versions of Dreamweaver

In older versions (CS6 and earlier), Dreamweaver prompts the user for alternative text when an image is inserted into a document. A dialog appears with fields for Alternate text and Long description.

Screenshot

Type the appropriate and equivalent alternative text into the Alternate text area. If the image does not convey content and does not provide page functionality, select <empty> from the Alternate text menu.

Screenshot showing empty alternative text being selected

The dialog also includes an option to add a long description (longdesc attribute of the img tag) for complex images. We do not recommend using the longdesc attribute—it is not well supported and has been removed from HTML5. However, if you choose to use it anyway, enter a URL into the Long description field. Remember, the image still needs descriptive alternative text. If nothing is selected for Long description, then the longdesc attribute is not added to the image.

Form Labels

Most types of form elements (text boxes, text areas, checkboxes, radio buttons, etc.) need descriptive labels. When adding a form control to the page, Dreamweaver will automatically add a <label> element with generic text (e.g., "Text Field"). Update the label text so that it is unique and descriptive.

Note

If the control is inserted while in the Code frame, only the form control will appear, not the label.

If the form control already has a text description that should be the label, select the label text and choose Insert > Form > Label. Then go to the Properties panel for the label, select For dropdown menu, and choose the value that matches the id of the form control you want to label.

screenshot of the expanded menu
Important

The <label> element cannot be used to provide multiple labels for a single form control, or to associate a single label with multiple form controls. If your form control has more than one label (or vice-versa), see our article on advanced form labels.

If the label text is adjacent to the form control, select the text and form control and then insert the label. Dreamweaver will wrap a <label> tag around the text and the form. Do not add a for attribute to wrapped labels.

Form labels in older versions of Dreamweaver

When adding form controls in older versions of Dreamweaver, a dialog will prompt you to add a form label:

screenshot of form label dialog box

If desired, enter an id value in the first field (a generic id will be added if this is left blank). Remember, this value must be one word (no spaces) and unique on the page. Next, type the appropriate form label into the Label dialog. You can then select the label Style. We recommend you leave the default value of Attach label tag using 'for' attribute selected. This dialog also provides options for specifying Access key and Tab Index. These are typically misused and should be left blank.

Important

Older versions of Dreamweaver incorrectly provide the Label dialog box when you insert button and image input elements into your web page. Neither of these form elements should be given labels. A screen reader will read the value attribute of the button input element and will read the alt attribute of the image input element, both of which can be provided using the Properties panel.

Fieldsets

The <fieldset> and <legend> elements provide a mechanism to add a higher-level label to a group of form controls. The <fieldset> identifies the entire grouping and <legend> identifies the grouping's descriptive text. This is often used for groups of radio buttons and checkboxes. To add <fieldset> and <legend> in Dreamweaver, highlight the group of elements and select Insert > Forms > Fieldset. The selected content will be wrapped in a <fieldset> and a dialog will appear where you can enter the Legend.

Screenshot

Data Tables

There are three principles involved in making data tables accessible to screen reader users:

  1. Designate table headers (<th>).
  2. Assign a scope to row and/or column headers.
  3. If appropriate, give the table a <caption>.

When inserting a table, a dialog box is presented. Under the Header options choose whether the table has no headers (None), row headers (Left), column headers (Top), or row AND column headers (Both).

Screenshot of the table dialog. There are options to change the table size, select the header structure, add a caption, and add a summary

Dreamweaver will designate table headers with the correct scope (e.g., <th scope="col">).

The dialog also has fields for a table Caption, which presents a title or description of the table. While not all data tables need captions, they are often helpful. A table Summary should typically be left blank—the summary attribute it is not well supported and is not part of the HTML5 specification.

Note
  • If the table is used for layout purposes, select None under the header options and do not add a Caption.
  • If you indicate that your table has both row and column headers by selecting Both under Header, then Dreamweaver will make the top-left cell a column header. If this cell is a row header, or not a header at all, update it match the structure of your data table.

The only way to add the scope attribute to tables that already exist in your document is to add them manually in Code view. For complex tables which have headers that span rows or columns and for which scope is not sufficient, you must manually add headers and id attributes. If possible, simplify your tables so headers and id can be avoided.

Headings

A logical heading structure greatly enhances the accessibility of a web page. Headings are often used by screen reader users for page navigation and orientation. To add headings to a page, select Insert > Heading, and then select the desired heading level. To change text to a heading, or to change heading levels, select the text and select the desired heading level from the Format menu in the Properties panel.

Expanded Format dialog. The options are: None, Paragraph, Heading levels 1-6, and Preformatted.

Page Title

A succinct, unique, and descriptive page <title> is very important for accessibility. Many users, especially screen reader users, rely on the page title to identify the contents on a page. When creating a new document, a dialog appears. Enter the page title into the Title field.

Screenshot

If you do not add a <title>, or if you are using an older version of Dreamweaver, the page is given a generic <title> of "Untitled Document". You can change this in the Document Title field, in the document's Properties panel.

Screenshot

Lists and Emphasized Text

Dreamweaver includes options to create unordered/bulleted lists (<ul>), ordered/numbered lists (<ol>). You can also specify, emphasized text (<strong> for bold and <em> for italics). These changes can be made in the Properties panel
( Screenshot of the B, I, bulleted list, and numbered list icons ).

HTML5 Sectioning Elements

Dreamweaver allows you to create the following HTML5 sectioning elements (in the Insert menu): Header, Navigation (<nav>), Main, Aside, Article, Section, and Footer. Just like ARIA landmarks, these elements identify page regions that can help a screen reader user orient and navigate the page.