Are You Receiving the Accessibility Tips and Tricks?
- Learn to make information accessible to people with disabilities
- Implement what you learn right away
- Understand how people with disabilities use technology
- Receive our monthly newsletter packed with news, articles and updates
- Bonus workbook: Ten steps to a more accessible web site
Do you need help with accessibility? Hire us!
Making Accessible Web Pages Using Dreamweaver
Adobe Dreamweaver is one of the most popular web authoring tools in the market. Among its many functionalities, this software offers features for enhancing the accessibility of your site. Not only are these features easy to do, but they could also help a lot in making it easier for persons with disabilities to use your site.
Please keep in mind that the following techniques are only some of the examples of ways to improve the accessibility of your site through Dreamweaver. As you develop your site using this software, you may find other functions and methods useful to accessibility.
Furthermore, these accessibility procedures apply to Dreamweaver CS4. They also apply to older versions such as Dreamweaver CS3, although certain modifications may exist.
Placing alternate text on images
Persons with disabilities, particularly those with visual impairment, benefit a lot from alternate text in images. This information enables them to understand the content and purpose of an image, although they may not be able to see it. Here is how you would provide alternate text to your images using Dreamweaver.
By default, as you insert an image in Dreamweaver CS4 thru either the Insert menu, or the shortcut key Ctrl+Alt+I, an “Image tag accessibility attribute” dialog appears. This dialog box gives you an option to put description on your images.
You can either put the description in the “Alternative text” text box, or for longer descriptions, you can link the image to another page or any relative document. After you have defined your description, simply press the “OK” button.
What if you have already placed the image in the page and applied all the necessary measurements, formatting or CSS tags on it, and you don’t want to go back to insert the image from the start? What you can do is simply go over to the design view and right click on the image itself to pull out the context menu. From there, you can click on the Properties option and it will bring up the property tab at the bottom of the window. This tab shows all the image property options you can put certain values to. In this case, look for the “Alt:” text box and type in the image description.
Defining the Language of a page
Defining the language of your pages helps assistive technologies properly represent information in your site.
By default, Dreamweaver defines this portion at the very beginning of the page’s codes as English or “en”. It is usually written as:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
To change the page language, click between the “xml:lang” to move the insertion cursor at this tag and press the shortcut key “Shift+F5” or right click on the “xml:lang” to pull out the context menu and click on the “Edit tag<html>”.
A Tag Editor dialog will appear containing two main options in the list box at the left side. These options are “General” and “Language”. Click on the Language option. There will be two drop down list boxes: the “Direction:” and the “Language:”. Use the Language list box to define the page’s base language.
To choose from the list of languages, click on the drop down arrow of the list box next to “Language:” and click on a specific language for your page. After which, the “xml:lang” tag will automatically be changed to the language you have chosen. Click on the close button to exit the “Edit tag” dialog and you’re done defining your page’s language.
Providing acronym and abbreviation tags
This feature helps everyone, especially people with cognitive disabilities, in quickly understanding the meaning of abbreviated terms and acronyms.
Providing the expanded forms of abbreviations and acronyms require a similar process. First, you need to highlight the acronym or the abbreviation. Next, click on the Insert menu to pull out Options. Click on the HTML submenu, then choose “Text Objects” submenu. From here, click on either the “Abbreviation” or “Acronym” option. Each of these options (Abbreviation or Acronym) will display a dialog box.
After choosing the preferred option, you need to fill in two text boxes. In the “Full text” text box, you should type in the expanded form of the abbreviation or the acronym. Then, click the OK button and you’re done.
Create skip navigation
A skip navigation is a link that takes the user to a particular section within the same page. This section usually contains the page’s main content. Screen reader users and people with motor disabilities who cannot use the mouse benefit from this link.
To create a skip navigation link using Dreamweaver, you first have to define the target (Main Content). Go to design view or code view and click the space before the first character of the title of your page’s main content. Then click on the “Named Anchor” button at the “Insert” tab of the Dreamweaver window. You can also do this by going to “Insert” Menu and click on “Named Anchor”, or through keyboard shortcut “Ctrl+Alt+A”.
The “Named Anchor” dialog will appear. This requires you to enter the anchor name in the text box on which a hyperlink will refer to (e.g. main_content). Click on the “OK” button.
Next, you will determine where to place the “Skip to main content” link. Type in your link text and highlight it. Click on the hyperlink button on the “Insert” tab of the Dreamweaver window or go to “Insert” menu and click on “Hyperlink”.
The “Hyperlink” dialog will appear. In the “Link:” drop down list, click on the name your link will refer to (#main_content). Named anchors start with a # symbol. After you have defined appropriate values for the fields, click on “OK”.
Bookmark/Search this post with:
Post new comment