Use Dreamweaver tools to make websites accessible

Accessibility features in Dreamweaver

Išči
Adobe Dreamweaver Navodila za uporabo

Na tej strani

Velja za: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Use Dreamweaver to make websites and web products usable for people with visual, auditory, motor, and other disabilities.

Opomba:

The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

About accessible content

Accessibility refers to making websites and web products usable for people with visual, auditory, motor, and other disabilities. Examples of accessibility features for software products and websites include screen reader support, text equivalents for graphics, keyboard shortcuts, change of display colors to high contrast, and so on. Dreamweaver provides tools that make it accessible to use and tools that help you author accessible content.

For Dreamweaver developers who need to use accessibility features, the application offers screen reader support, keyboard navigation, and operating system accessibility support.

For web designers who need to create accessible content, Dreamweaver assists you in creating accessible pages that contain useful content for screen readers and comply with federal government guidelines. For example, dialog boxes prompt you to enter accessibility attributes—such as text equivalents for an image—when you insert page elements. Then, when the image appears on a page for a user with visual disabilities, the screen reader reads the description.

Opomba:

For more information about two significant accessibility initiatives, see the World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) and Section 508 of the U.S. Federal Rehabilitation Act (www.section508.gov).

Opomba:

For more information about Japan Industry Standard accessibility guidelines, see JIS X 8341-3 (www.jisc.go.jp).

No authoring tool can automate the development process. Designing accessible websites requires you to understand accessibility requirements and make ongoing decisions about how users with disabilities interact with web pages. The best way to ensure that a website is accessible is through deliberate planning, development, testing, and evaluation.

Use screen readers with Dreamweaver

A screen reader recites text that appears on the computer screen. It also reads non-textual information, such as button labels or image descriptions in the application, provided in accessibility tags or attributes during authoring.

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 supports JAWS for Windows, from Freedom Scientific (www.freedomscientific.com), and Window-Eyes screen readers, from GW Micro (www.gwmicro.com).

Support for operating system accessibility features

Dreamweaver 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 work space.

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.

Optimize the work space for accessible page design

When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users.

To do this, activate the Accessibility dialog box for each object, so that Dreamweaver prompts you for accessibility information when you insert objects. You can activate a dialog box for any of the objects in the Accessibility category in Preferences.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Accessibility from the Category list on the left, select an object, set any of the following options, and click OK.

    Show Attributes When Inserting

    Select the objects for which you want to activate accessibility dialog boxes. For example, form objects, frames, media, and images.

    Keep Focus In The Panel

    Maintains focus on the panel, which makes it accessible to the screen reader. (If you don’t select this option, the focus remains in Design or Code view when a user opens a panel.)

    Offscreen Rendering

    Select this option when using a screen reader.

    Opomba:

    Accessibility attributes appear in the Insert Table dialog box when you insert a new table.

You can use the keyboard to navigate panels, inspectors, dialog boxes, frames, and tables without a mouse.

Opomba:

Tabbing and the use of arrow keys are supported for Windows only.

  1. In the Document window, press Control+F6 to shift focus to a panel.

    A dotted line around the panel title indicates that focus is on that panel. The screen reader reads the panel title bar that has focus.

  2. Press Control+F6 again to shift focus until you have focus on the panel you want to work in. (Press Control+Shift+F6 to shift focus to the previous panel.)
  3. If the panel you want to work in is not open, use the keyboard shortcuts in the Windows menu to display the appropriate panel; then press Control+F6.

    If the panel you want to work in is open, but not expanded, place focus on the panel title bar, and then press the Spacebar. Press the Spacebar again to collapse the panel.

  4. Press the Tab key to move through the options in the panel.
  5. Use the arrow keys as appropriate:

    • If an option has choices, use the arrow keys to scroll through the choices, and then press the Spacebar to make a selection.

    • If there are tabs in the panel group to open other panels, place focus on the open tab, and then use the left or right arrow key to open another tabs. Once you open a new tab, press the Tab key to move through the options in that panel.

  1. Press Control+F3 to display the Property inspector, if it is not visible.
  2. Press Control+F6 (Windows only) until you shift focus to the Property inspector.
  3. Press the Tab key to move through the Property inspector options.
  4. Use the arrow keys as appropriate to move through option choices.
  5. Press Control+Down arrow/Up arrow (Windows) or Command Down arrow/Up arrow (Macintosh) to open and close the expanded section of the Property inspector, as necessary, or, with focus on the expander arrow in the lower-right corner, press the Spacebar.

    Opomba:

    Keyboard focus must be inside the Property inspector (and not on the panel title) for expanding and collapsing to work.

  1. Press the Tab key to move through the options in a dialog box.
  2. Use the arrow keys to move through choices for an option.
  3. If the dialog box has a Category list, press Control+Tab (Windows) to shift focus to the category list, and then use the arrow keys to move up or down the list.
  4. Press Control+Tab again to shift to the options for a category.
  5. Press Enter to exit the dialog box.
  1. If your document contains frames, you can use the arrow keys to shift focus to a frame.

Select a frame

  1. Press Alt+Down Arrow to place the insertion point in the Document window.
  2. Press Alt+Up Arrow to select the frame that currently has focus.
  3. Continue pressing Alt+Up Arrow to shift focus to the frameset, and then to the parent framesets, if there are nested framesets.
  4. Press Alt+Down Arrow to shift focus to a child frameset or a single frame within the frameset.
  5. With focus on a single frame, press Alt+Left or Right Arrow to move between frames.
  1. Use the arrow keys or press Tab to move to other cells in a table as necessary.

    Opomba:

    Pressing Tab in a right-most cell adds another row to the table.

  2. To select a cell, press Control+A (Windows only) while the insertion point is in the cell.
  3. To select the entire table, press Control+A twice if the insertion point is in a cell, or once if a cell is selected.
  4. To exit the table, press Control+A three times if the insertion point is in a cell, twice if the cell is selected, or once if the table is selected, and then press the Up, Left, or Right Arrow key.