User Guide Cancel

Accessibility features in Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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

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.

Note:

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).

Note:

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.

    Note:

    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.

Note:

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.
    Note:

    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.
    Note:

    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.

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy