Dreamweaver: Accessible Web Sites

Size: px

Start display at page:

Download "Dreamweaver: Accessible Web Sites"

Rachel Lee
5 years ago
Views:

1 Dreamweaver: Accessible Web Sites Introduction Adobe Macromedia Dreamweaver 8 provides the most complete set of tools available for building accessible web sites. This workshop will cover many of them. It is a followup to "Dreamweaver Basics." We will cover the following topics: What is Accessibility and Why Is It Important? What Makes a Web Site Accessible? Dreamweaver Accessibility Preferences Choosing the Right Document Type Using Cascading Style Sheets Using Relative Elements Using Alternative Text for Images Using Heading Tags Using Titles and Access Keys for Links Using Summaries and Captions for Tables Scope for Table Row and Column Headings Using Labels for Form Elements Validating Your Web Pages Testing Your Web Pages Best Practices for Designing Accessible Websites Resources What is Accessibility and Why Is It Important? Simply put, accessible web sites pose no barriers to the disabled. The information and functionality contained in the web site are just as accessible to people with disabilities as they are to people without. There are many reasons to care whether or not your web site is accessible: Approximately 20 percent of the U.S. population has a physical disability. There are over 400,000 college students with disabilities in the U.S., several hundred of whom attend the University of Michigan. According to the University, educational activities are required to be accessible under the Americans with Disabilities Act (ADA). If your web site is federally funded, it is required by law to be accessible. Applicable laws include Title II of the ADA and sections 504 and 508 of the Rehabilitation Act. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 1

2 Are these laws enforced? There are no "accessibility police." However, lawsuits have been filed by groups that support the disabled against corporations with inaccessible web sites. What Makes a Web Site Accessible? According to the University of Michigan's Best Practices for Designing Accessible Websites, Software and Content ( "In general, Adaptive Technology (AT) users should be able to use your site or software without a mouse (using the keyboard only)." Additionally, people with vision disabilities use screen-reading software to listen to web sites instead of look at them. Web pages can (and should) be created to work better with screen reading software. The guidelines on the Best Practices page are listed at the end of this handout. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 2

Dreamweaver Accessibility Preferences In order to make sure that your copy of Dreamweaver does all the things described in this handout, make sure that your Dreamweaver Accessibility Preferences are

3 Dreamweaver Accessibility Preferences In order to make sure that your copy of Dreamweaver does all the things described in this handout, make sure that your Dreamweaver Accessibility Preferences are set correctly. In Dreamweaver, click the Edit drop-down menu and choose Preferences. Choose the second category, Accessibility. You will see the following: Make sure that all four boxes are checked under Show attributes when inserting. The last two options are relevant to Dreamweaver users who have disabilities themselves. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 3

Choosing the Right Document Type Web sites that use valid XHTML 1.0 Transitional code are more accessible to people that use Adaptive Technology. XHTML stands for Extensible Hypertext Markup Language.

4 Choosing the Right Document Type Web sites that use valid XHTML 1.0 Transitional code are more accessible to people that use Adaptive Technology. XHTML stands for Extensible Hypertext Markup Language. XHTML 1.0 Transitional is just one of the many document types that Dreamweaver can create. Dreamweaver allows you to choose the document type when you create a new document: Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 4

To change the document type of an existing document, open the document, click the File drop-down menu and choose Convert: Using Cascading Style Sheets Web sites that use Cascading Style Sheets (CSS)

5 To change the document type of an existing document, open the document, click the File drop-down menu and choose Convert: Using Cascading Style Sheets Web sites that use Cascading Style Sheets (CSS) for web site presentation instead of deprecated HTML elements (such as the font element) and attributes (such as the bgcolor attribute) are more accessible to the disabled. Dreamweaver 8 uses CSS for presentation by default. If your existing web site uses deprecated HTML elements and attributes for presentation, converting it to CSS presentation is a complicated process. In most cases, it is easier to start from scratch. Additionally, using CSS for positioning instead of tables makes web pages much more accessible. That means using layers instead of tables for layout. All of Dreamweaver's sample page designs use layers for positioning. If your existing web site uses tables for layout instead of layers, Dreamweaver does have a convert function (Modify -> Convert -> Tables to Layers). However, this does Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 5

not work well with complicated, nested tables. Always make a copy of your site before making these sorts of changes. It may be easier to start from scratch.

6 not work well with complicated, nested tables. Always make a copy of your site before making these sorts of changes. It may be easier to start from scratch. Using Relative Elements Allowing the content on your web pages to be resized makes them much more accessible. Elements that are sized relative to other elements on your page instead of having their size fixed allow them to be resized. Fluid Page Widths vs. Fixed Page Widths Web pages that shrink and grow according to the size of the user's browser window have fluid width, while pages that stay the same width no mater what have fixed width. A web page that uses fluid width - it fills the browser screen no matter how big it is. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 6

7 A fixed-width web page - note the white space on the right. If your web page content is contained in a table, you can make it fluid width by setting that table width to 100% instead of a set pixel width. Likewise, if your web page content is contained in a layer, you can make it fluid width by setting the layer width to 100% instead of a set pixel width. If your web page content is not contained in a table or layer, it is fluid with by default. Text Size You should also allow your users to increase and decrease the size of the text on your page to accommodate their needs. Do this by choosing relative font sizes instead of absolute ones. Most web page text is measured in pixels. While in theory pixels is a relative measurement of font size, because of a bug in Internet Explorer, it is treated as absolute (meaning that it cannot be resized). Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 7

To solve this problem, use ems as your measure of font size instead of pixels: Choosing a text size of 1 em says "make the text on my page appear the same as the user's browser's default text

8 To solve this problem, use ems as your measure of font size instead of pixels: Choosing a text size of 1 em says "make the text on my page appear the same as the user's browser's default text size." If you want your text to appear a little smaller, use.9 em; If you want your text to appear a little larger, use 1.1 em, and so on. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 8

Using Alternative Text for Images An important accessibility guideline states that alternative text must be provided for all images on a web page.

all about. Dreamweaver makes it easy to add alternative text for images.

9 Using Alternative Text for Images An important accessibility guideline states that alternative text must be provided for all images on a web page. This is so that people who cannot see the images (either because they are disabled or because they have images turned off in their browser to make pages load faster) will still know what the image is all about. Dreamweaver makes it easy to add alternative text for images. When you insert an image, you are prompted to enter alternative text for the image: You cannot click OK until you have entered alternative text. The Long Description text field allows you to link the image to a web page that explains what the image is about. This is useful when the image description is more than just a few words. To add alternative text to an existing image, select the image and then enter the alternative text via the Properties Panel. Using Heading Tags Using heading tags to structure the content on your web pages will not only provide context for screen reader users, but enable them to skim through a page. Screen readers treat text designated as headings differently than it does text designated as paragraphs. Users of screen readers use shortcut keys to cycle through the headings on your page. Use level-1 headings for page titles, level-2 headings for section titles, level-3 headings for sub-section titles, and so on. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 9

10 Titles Using Titles and Access Keys for Links The title attribute for the link tag allows additional information about links to be read aloud by screen readers. When you click the Insert Link icon on the Common Toolbar, the resulting dialogue window contains a box for a title: Whatever you enter in the Title field will not only be read aloud by screen readers, but be displayed in a little box that floats above the page when any user mouses over the link. Adding a title to existing links isn't quite as easy because the title field is not present in the Properties Panel. Instead, you can do the following: click on the linked text right-click on the <a> symbol in the Tag Selector select Quick Tag Editor At the end of the tag enter the following: title="title text" replacing "title text" with the actual title text. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 10

11 Access Keys Access Keys enable users to go directly to links within a website by using keyboard letter or number combinations, saving scrolling and tabbing. Access Keys are invoked by pressing the alt (Windows) or apple/command (Mac) keys along with the character that has been designated. Access Keys are most typically assigned to the links you provide for web site navigation in sequential order. For example, if your web site navigation corresponds to the various sections of your web site such as "Home," "About Us," and so on, you could assign an Access Key of 1 to the "Home" link, an Access Key of 2 to the "About Us" link, and so on. When you click the Insert Link icon on the Common Toolbar, the resulting dialogue window contains a box for an Access Key: Like titles, adding an access key to existing links isn't quite as easy because the access key field is not present in the Properties Panel. Instead, you can do the following: click on the linked text right-click on the <a> symbol in the Tag Selector select Quick Tag Editor At the end of the tag enter the following: accesskey="1" Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 11

12 Using Summaries and Captions for Tables Tabular data is very difficult for screen-readers to read in a way that makes sense to the user. One method of making it easier for your users with vision disabilities is to provide a caption and a summary of the table data. When you click the Insert Table icon on the Common Toolbar the following dialogue window will open: In the Accessibility section of this window, any text that you enter into the Caption field will be displayed above the table and read aloud by screen readers. Any text that you enter into the Summary field will not be displayed, but will be read aloud by screen readers. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 12

Using Scope for Table Row and Column Headings Another way to make tabular data more accessible to the disabled is to assign "scope" to table headers.

13 Using Scope for Table Row and Column Headings Another way to make tabular data more accessible to the disabled is to assign "scope" to table headers. Let's say you have a table that looks like this: North East South West States Population 30,000 40,000 50,000 60,000 It would be nice for someone who cannot see the table to know that the number 12 is associated with both "States" and "North." This can be accomplished with the Scope attribute. When you assign it to a column heading, it puts all the data in that column in its scope. Likewise, when you assign it to a row heading, it puts all the data in that row in its scope. When you click the Insert Table icon on the Common Toolbar the following dialogue window will open: In the Header section of this window I have chosen to make both the first column and the first row header rows. This will cause Dreamweaver to add the scope attribute to the header row and column automatically. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 13

14 Using Labels for Form Elements Web forms can be especially challenging for people with disabilities. While users can use their keyboards to tab between form fields, they may not be able to tell what information each form field is asking for. Dreamweaver makes forms much more accessible by associating labels with each form field. When you insert any type of form field into your document via the Forms toolbar, the Input Tag Accessibility Attributes dialogue window will appear: Whatever you type into the Label field will be displayed on your page in the Position you specify (before or after the form field itself). Always choose Attach label tag using 'for' attribute as the Style of the label. Do this instead of typing the label onto your web page by hand. This will associate the label with the form field. Note that you can also add Access Keys and change the tab index order in this dialogue window. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 14

Validating Your Web Pages Once your web pages are ready for testing, you can use Dreamweaver to test your pages against: 1. The standard for the document type you have chosen (e.g., XHTML 1.

15 Validating Your Web Pages Once your web pages are ready for testing, you can use Dreamweaver to test your pages against: 1. The standard for the document type you have chosen (e.g., XHTML 1.0 Transitional) 2. Accessibility Guidelines Click the File drop-down menu and choose Check Page. To see if your document validates against its standard, choose Validate Markup. To see if your document validates against accessibility guidelines, choose Check Accessibility: You can validate the document you currently have open, your entire site, or selected files. Once you select one of these options, the results of your check will be displayed in the Results Panel below the Properties Panel: Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 15

Sample Validation Report Sample Accessibility Guidelines Check Right-click each item and choose More Info to get more information about any errors found.

16 Sample Validation Report Sample Accessibility Guidelines Check Right-click each item and choose More Info to get more information about any errors found. Testing Your Web Pages While nothing can suffice for watching a user with a disability navigate through your site, there are ways that you can see how accessible your site really is. 1. Check to see how color-blind users will see your page at Vischeck, 2. Download the complimentary trial version of the screen-reading software IBM Home Page Reader, 3. Use the Digital Media Commons Usability Lab, They have computers equipped with screen reading software. 4. Run your web pages through WebXACT, a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues. 5. Run your web pages through A-Prompt, the website accessibility verifier, 6. Run your web pages through the Wave 3.0 Accessibility Tool, 7. Run your web site through the Truex Online 2.0 beta tool, Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 16

17 Best Practices for Designing Accessible Websites The following items will help persons with disabilities adjust your site to their needs and utilize AT shortcuts (taken from 1. Use Cascading Style Sheets (CSS) for website presentation and, when possible, positioning. For presentation, this includes font size, color, style; behavior (such as mouseover or focus); borders; padding; margins; background; etc. For positioning this includes: distance from top and sides; x, y and z axis; etc. If you use a table for page layout, make it a simple layout, without nesting. 2. Use relative elements like "percentage" or "em" instead of "pixels." Common instances include font sizes, table layouts, and css-based positioning. 3. Use the <alt> attribute to describe images. Images that contain information relevant to understanding the purpose or providing context to the page should have a description. Images that do not provide information or context should have <alt="">. 4. Use <h1, h2, etc.> tags to chunk page content under headings and for links to key content areas. Heading tags will not only provide context for screen reader users, but enable them to skim through a page. 5. Follow WCAG 1.0 guidelines for forms. For example, associate labels with input boxes (<label for> and <id> tags) and group related parts of a form using the <fieldset> and <legend> tags. 6. Follow WCAG 1.0 guidelines for tables. For example, include summaries and captions for data tables, and associate column headings with data using the <scope> attribute. 7. Provide keyboard-based navigation through the site using accesskeys and skip links. For example. provide accesskeys to Accessibility Information about the site (0), Home (1), What's New (2), Site Map (3), Search (4) and Content (C). Provide skip links from the top of the page to Main Content and other key areas of your site. 8. Use meaningful text for links. AT users tab through sites, listening to links for context. Links should therefore have text that clearly identifies their purpose or destination, to make sense without the surrounding text. 9. Add the <title> attribute to links and frames. Titles should provide additional information not otherwise available in link text. Frame titles can be used for navigation. 10. Use color properly. Do not rely only on color to differentiate items in your site. For example, persons who are colorblind cannot distinguish between green and red, so highlighting text in red will not be helpful. Also, make sure there is sufficient contrast between background color and items in the foreground, such as buttons and text, so that people with compromised vision will clearly see them as separate. 11. Caption video. Provide captioning for every video that you provide online. MAGpie ( is an excellent, easy to use tool for captioning WindowsMedia, RealPlayer and QuickTime files. Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 17

18 Resources Dreamweaver 8 Accessibility Best Practices for Designing Accessible Websites, Software and Content Web Accessibility Initiative (WAI) from the World Wide Web Consortium Accessible web site Design Updated 4/13/2007 Dreamweaver: Accessible Web Sites Page 18

Creating Accessible Web Sites with EPiServer

Creating Accessible Web Sites with EPiServer Abstract This white paper describes how EPiServer promotes the creation of accessible Web sites. Product version: 4.50 Document version: 1.0 2 Creating Accessible