Standards & Accessibility With Dreamweaver

Virginia DeBolt & Emily Lewis

Wednesday, May 6, 2009

About the Presenters

You'll Learn

• The basics of web standards and accessibility
• How implement CSS using Dreamweaver
• How to write semantic markup with Dreamweaver
• How to validate your pages and check for browser inconsistencies
• About Dreamweaver's accessibility preferences
• The basics for creating accessible forms and images in Dreamweaver

What Are Web Standards?

• Technologies, specifications and guidelines for creating and interpreting web-based content
  • Structural Languages (XHTML, XML)
  • Presentation Languages (CSS, MathML, SVG)
  • Object Models (DOM)
  • Scripting Languages (JavaScript/ECMAScript)
• Separation of content (XHTML), presentation (CSS) and behavior (JavaScript)
• Semantic markup (POSH) and styles
• Valid markup and styles
• Works in any web browser and device

What Is Web Accessibility?

• Ensuring that people with disabilities can perceive, understand, navigate, and interact with the web
• Ensuring people with disabilities can also contribute to the web
• Designing web sites and software that are flexible to meet different user needs, preferences, and situations
• This benefits people without disabilities, such as:
  • Those with slow internet connections
  • Those with changing abilities due to age
  • Those with temporary disabilities

Web Standards & Accessibility Go Hand–in–Hand

• Both aim to make Web content accessible to as many users as possible
• Both help with future-proofing a web site

Getting Started With Standards: CSS for Presentation

Separation of content from presentation means using CSS

Demonstration: Dreamweaver's CSS-based Templates

Getting Started With Standards: CSS for Presentation

Demonstration: Dreamweaver's CSS Dialog Window

Getting Started With Standards: CSS for Presentation

Demonstration: Dreamweaver’s CSS Panel for Creating/Editing Styles

Getting Started With Standards: Semantics

Semantic markup and CSS-naming conventions convey meaning rather than presentation

Demonstration: Dreamweaver's CSS Panel to Create/Edit class & id Names

Getting Started With Standards: Semantics

Demonstration: Dreamweaver's Code View to Write Your Own Semantic Markup

Getting Started With Standards: Semantics

Demonstration: Beware of Non-semantic Markup

Getting Started With Standards: Validation

• Markup must be validated against the declared DOCTYPE
• CSS must be validated against the chosen version

Demonstration: Dreamweaver's Markup Validation Tool

Getting Started With Standards: Validation

Demonstration: Dreamweaver's Markup Validation Results

Getting Started With Standards: Validation

Demonstration: W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/

Getting Started With Standards: Device Independence

• Content works (is accessible) from any device
• Presentation may be affected

Demonstration: Dreamweaver's Check Page Tool

Supporting Accessibility With Dreamweaver: Preferences

Demonstration: Dreamweaver's Accessibility Preferences

Supporting Accessibility With Dreamweaver: Resources

Demonstration: Dreamweaver's Built-in Accessibility Reference

Supporting Accessibility With Dreamweaver: Resources

Demonstration: Adobe's Accessibility Resource Center

http://www.adobe.com/accessibility/

Supporting Accessibility With Dreamweaver: forms

• Use form labels and grouping (fieldset, optgroup) to support screen readers
• Avoid tabindex

Demonstration: Dreamweaver's form Interface

Supporting Accessibility With Dreamweaver: Images

Images must have good alt text for supporting screen readers, mobile devices and even users with slow internet connections who may have images disabled.

Demonstration: Dreamweaver's Image Tag Accessibility Panel

So Much More, So Little Time

Great resources to help you learn more about standards and accessibility, as well as Dreamweaver:

• Jeffrey Zeldman's Designing With Web Standards
• Joe Clark's Building Accessible Websites
• The Web Standards Project
• WebAIM
• How to Make Accessible Web Content Using Dreamweaver
• Jeffrey Zeldman's Web Standards Advisor for Dreamweaver

Questions? Comments?

Contact Virginia

• Twitter: @vdebolt

Contact Emily

• Email: emily@ablognotlimited.com
• Twitter: @emilylewis