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.
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 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.
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 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.)
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.
Tabbing and the use of arrow keys are supported for Windows only.
- 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 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.
- 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.
Keyboard focus must be inside the Property inspector (and not on the panel title) for expanding and collapsing to work.