Accessibility features in Dreamweaver
- Dreamweaver User Guide
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
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.
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.
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.
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
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.)
Select this option when using a screen reader.Note:
Accessibility attributes appear in the Insert Table dialog box when you insert a new table.
Navigate Dreamweaver using the keyboard
You can use the keyboard to navigate panels, inspectors, dialog boxes, frames, and tables without a mouse.
Tabbing and the use of arrow keys are supported for Windows only.
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.
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.)
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.
Press the Tab key to move through the options in the panel.
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.
Navigate the Property inspector
Press Control+F3 to display the Property inspector, if it is not visible.
Press Control+F6 (Windows only) until you shift focus to the Property inspector.
Press the Tab key to move through the Property inspector options.
Use the arrow keys as appropriate to move through option choices.
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.
Navigate a dialog box
Press the Tab key to move through the options in a dialog box.
Use the arrow keys to move through choices for an option.
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.
Press Control+Tab again to shift to the options for a category.
Press Enter to exit the dialog box.
If your document contains frames, you can use the arrow keys to shift focus to a frame.
Select a frame
Press Alt+Down Arrow to place the insertion point in the Document window.
Press Alt+Up Arrow to select the frame that currently has focus.
Continue pressing Alt+Up Arrow to shift focus to the frameset, and then to the parent framesets, if there are nested framesets.
Press Alt+Down Arrow to shift focus to a child frameset or a single frame within the frameset.
With focus on a single frame, press Alt+Left or Right Arrow to move between frames.
Navigate a table
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.
To select a cell, press Control+A (Windows only) while the insertion point is in the cell.
To select the entire table, press Control+A twice if the insertion point is in a cell, or once if a cell is selected.
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.