The text alternative to a PowerPoint presentation delivered by P.J. Gardner of Gardner Information Design, Inc., at the April 30, 2009 meeting of Boston-IA. (Includes speaker notes.)
P.J. Gardner
Gardner Information Design, Inc.
781.646.6849
www.GIDI.biz
Speaker Notes: Hello. My name is P.J. Gardner. I am a front-end web developer and accessibility expert.
[Small images of websites built for Cramer, the MassAccess Housing Registry, and Staples.com.]
Speaker Notes: Here are a few web pages that I built for various clients while working with some very sophisticated visual designers.
Speaker Notes: Please see the handout, Tips for Visual Designers, for more details.
Let's examine a few examples from actual projects.
[An HTML email design that fails color contrast testing.]
Speaker Notes: Here, I am testing an HTML email design in Photoshop with the Color Contrast Analyser available from the Paciello group.
The color contrast of the white letters on an orange background fails both the minimum and maximum standards.
You can also use other testing tools such as Vischeck, which allows you to check how the design will look for someone who is colorblind.
When you are building designs with cascading style sheets, some of these tools work better on images of the pages than the pages themselves. So you can actually test page designs before you build a thing!
[A flash video application without the flash video (no text).]
Speaker Notes: Here is a template for a flash video application. Notice that when the video is not displayed, there is zero branding identity. You have no idea whose page this is.
The video itself has no functional equivalent, either— which in this case is critical, because the flash video includes both the logon and navigation for the entire application.
[The Photoshop design for the MassAccess Housing Registry web site (with rounded corners and drop shadows).]
[The web site as built (without rounded corners and drop shadows).]
Speaker Notes: This example is an accessible application, called the "MassAccess Housing Registry", built for a Massachusetts agency. It allows people with disabilities to search for accessible housing.
The design absolutely had to be accessible.
The Photoshop version is shown first, followed by the application as we built it.
We eliminated decorative elements such as some of the round corners, drop shadows, and gradient images, because they were not absolutely necessary and they made the design much more fragile.
Making these simplifications allowed the modules of the application to be dynamically supplied by the PHP code, and the pages to resize automatically in all browsers without breaking the design.
["A Living Faith" web site with its style sheet.]
["A Living Faith" web site without its style sheet.]
Speaker Notes: Maybe this slide should have come first!
Use your own accessibility coding skills to render the visual designer's creation with as much accessibility as possible.
Here is a microsite that displays a video— both with and without its cascading style sheet.
The cascading style sheet displays the title of the page, "A Living Faith", as a background image.
When the style sheet is turned on, the title is positioned far off-screen so it doesn't get in the way of the visual design. When the style sheet is turned off, the page title is displayed as a Heading 1.
So there is actually a lot you can do when you work with visual designers to achieve accessibility for people with visual impairments and to provide more universal access for everyone.
This presentation is just the tip of the iceberg!
P.J. Gardner
info @ gidi.biz
781.646.6849
Gardner Information Design, Inc.
www.GIDI.biz
[GIDI logo (Gardner Information Design, Inc.)]
© 2009 Gardner Information Design, Inc. All rights reserved.