Working with Visual Designers for Universal Access

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.)

Quick Links:

Back to top

Slide 1:
Working with Visual Designers for Universal Access

P.J. Gardner
Gardner Information Design, Inc.

Speaker Notes: Hello. My name is P.J. Gardner. I am a front-end web developer and accessibility expert.

Slide 2:
Great Visual Design can make a Web Site!

  • Working with a professional Visual Designer is a privilege.

VBlast prototype built for Cramer. HTML email built for Cramer. ViaCord newsletter built for Cramer. This is Cable web refresh built for Cramer. A Living Faith web site built for Cramer. ViaCord Html email built for Cramer. MassAccess Housing Registry application built for CHAPA. Staples home page built for Staples.

[Small images of websites built for Cramer, the MassAccess Housing Registry, and]

Speaker Notes: Here are a few web pages that I built for various clients while working with some very sophisticated visual designers.

Back to Index

Slide 3:
Visual Designers may not be thinking about Web Accessibility at all!

  • Visual designers are rarely trained in accessibility techniques.
  • Many visual designers were trained for print media first.
  • Visual designers are usually visual people with excellent color vision and visual acuity.
  • Visual designs are usually delivered to web developers as completed Photoshop files with pixel-perfect layouts.
  • Visual designers are rewarded for "pushing the envelope".

Slide 4:
What can we teach Visual Designers?

  • Introduce visual designers to tools and resources about visual limitations.
  • Teach them about the people they may not have thought about with various types of visual impairments.
  • Remind them that 1 in 20 people is probably color blind. (8-12% of men and 1/2-1% of women of European heritage have some color deficit.)
  • Turn them on to tools that help make designs more accessible.
  • Arm them with facts over which they have control.

Speaker Notes: Please see the handout, Tips for Visual Designers, for more details.

Let's examine a few examples from actual projects.

Back to Index

Slide 5:
Example 1: Run Color and Contrast Tests

  • Run a color contrast or color analysis tool, and report the results to the visual designer.

An HTML email design that fails color contrast testing.

[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!

Back to Index

Slide 6:
Example 2: Remind visual designers that all functional elements need to be made accessible.

  • Make sure text is text, or can be given a text alternative!

A flash video application without the flash video (no text).

[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.

Back to Index

Slide 7:
Example 3: Advocate for Modifying the Design

  • When necessary, get support from project management to adjust the design for accessibility.

Photoshop design for a web site (with rounded corners and drop shadows).

[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).

[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.

Back to Index

Slide 8:
Example 4: Just Do It!

  • There's a lot you can do to bring your own accessibility skills to a project without changing the design.

A web site with and without its style sheet.

["A Living Faith" web site with its style sheet.]

A web site with and without 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!

Back to Index

Slide 9:
Thank You! Questions?

P.J. Gardner
info @

Gardner Information Design, Inc.

GIDI logo (Gardner Information Design, Inc.)

[GIDI logo (Gardner Information Design, Inc.)]

Back to Index


Back to Index

Portable Document Format (PDF) files require the Adobe Reader. To download the program, choose the Adobe Acrobat icon or the text-only link:

Get Adobe Acrobat Reader (new site)

Adobe Acrobat download page

Back to Index

Back to top