New Media Consortium Summer Conference 2005
Presentation Files

Access by Design workshop

Handouts

• Access by Design - Slides (PDF)
• Universal Usability Guidelines (PDF)
• Universal Usability Checklist (PDF)
• Universal Design in Housing (Center for Universal Design - North Carolina State University)
• Checklist for Existing Facilities (Adaptive Environments)

Software

• Firefox
• Firefox Web Developer Tools
• Fangs: Screen Reader Emulator
• Opera Web Browser
• IBM Home Page Reader (Windows only)

Examples

Introduction

• Informational and functional page: Smith&Hawken
• Graphic text and image links: Amazon
• Fixed layout: National Park Service
• Flexible layout: Microsoft
• Complex design: ESPN
• Page that works at different dimensions: Hubble
• Page that works without styles: Wired
• Opening new window example (choose open link in new window): Google

Fundamentals

• Simple design: Netflix
• Page that works at different dimensions: Wired
• Busy design: Tiger Direct
• Page that works without images: Network for Good
• Interactivity that requires Shockwave: Lego
• Page that provides alternate versions: Copyright
• Page with functional features: OXO
• Page with logical tab order: Anywho
• Fixed-layout page (enlarge text): The New Yorker
• Page that does not work without images: Apple
• Flexible page that works with enlarged text: IBM Ease of Use
• Flexible page that works with user customization: Fast Company

Document Structure

• Structured page: Wikipedia
• Styled page that provides alternate styles: Boxes and arrows
• Page with different styles: CSS Zen Garden
• Page that provides optional views: BBC

Text

• Page with graphic text: Apple
• Page that works with user-defined style sheet: Blogger
• Pages with different base text sizes: ed.gov and Washington Post and NLM
• Fixed page (enlarge text): The Atlantic Online
• Flexible page (enlarge tex): Wall Street Journal
• Page with low contrast: Metropolitan Museum
• Page with emphasis marked with color and context: Network for Good
• Page with lists for navigation: A List Apart

Images

• Page with image and description: Shopzilla
• Page with unnecessary images: Imagiware and Lunarpages
• Page with useful images: surprise.com
• Page with enlarged graphic text: Boston Globe
• Page with vibrating background pattern: Cartoon Network pressroom and About.com
• Page with good ALT text: Orbitz
• Page with bad ALT text: Apple
• Page with captioned image: NASA
• Page with reinforcing images: Creative Commons
• Page with thumbnails: National Geographic

Data Tables

• Page with layout table: Bronx Zoo
• Page with CSS layout: NPR
• Simple table: W3Schools
• Table without headings: US Census

Layout Tables

• Page with layout table: IBM
• Popular pages that use table layout: Amazon and eBay and CNN and MSNBC
• Page with CSS layout in non-compliant browser: NPR and Wired
• Page with complex table layout: Scientific American and Lonely Planet
• Page with simple table layout: National Air & Space Museum - Wright Brothers
• Page with table that linearizes well: National Park Service
• Page with fixed table on wide and narrow display: Reuters and Chronicle
• Page with flexible layout table: Microsoft

Frames

• Page using frames: NextD
• Page using NOFRAMES tag: Computer User - High-tech Dictionary

Lists

• Page using images and tables for navigation: Salon
• Page using lists for navigation: Motley Fool

Forms

• Page with good country selection: MapQuest
• Page with good form: Peets
• Page with unlabelled form fields: Infospace
• Page with form that could use fieldsets: Yahoo! - My Yahoo signup
• Page with menu that uses onSelect: Adobe
• Page with form elements after submit button: Amazon
• Different search forms: MedlinePlus and National Park Service and National Library of Medicine
• Page with form elements: IBM Contact

Links

• Page with image links and no ALT text: Petsmart, Omni Group, Target, and KidsHealth
• Page with different types of links: Wikipedia
• Page with tab navigation: Audible
• Page with text links: Westciv
• Page with non-descriptive links: Shutterfly
• Page with good links: Hubble
• Page with differentiated visited and unvisited links: IBM Accessibility Center
• Page with breadcrumb navigation: Nutrition.gov
• Page with "you are here" indicator: Digital Web Magazine
• Page with image links and ALT text: Epinions

Color

• Brightness contrast example: PBS and YellowstonePark.com
• Page with color-only indicators: Tribeworks
• Page with color and reinforcing text: Unicef
• Page that works with author-defined color settings and user-defined color settings: Simple Bits

Audio and Video

• Page with audio and transcript: White House Speeches
• Page with video and captions: Nova ScienceNOW
• Page with video, captions, and descriptions: Dignubia
• Page with video format options: National Geographic
• Page with embedded and player options: Media that Matters Film Festival
• Page with media controller: POV - Freedom Machines

Interactivity

• Page that uses page-level interactivity: Travelocity and Iberia
• Page that doesn't use page-level interactivity: Expedia
• Small window with enlarged type: Travelocity and USPS
• Page with menu that uses onSelect: Port Authority - JFK
• Page with essential Flash: Warner Bros, KidsHealth, and NCES Students' Classroom
• Page with alternatives: Nova - Human Numbers Through Time

Editorial Style

• Page with skimmable text: IBM Ease of Use
• Heading list and link list: Wikipedia
• Page with audience-specific content: NLM/NIH
• Page with ABBR and ACRONYM: Evolt.org
• Page with printing version: InformIT

Page Layout

• Page beginning with ads, branding, and links: MSNBC and Motley Fool
• Page beginning with content: A List Apart, Web Style Guide, and Boxes and Arrows
• Page with visual design features: NLM/NIH - Changing the face of medicine
• Page with content grouped in the code: Meetup
• Page with reinforcing graphics: Shutterfly
• Page that follows conventions: Museum of Modern Art
• Page with link creep: J.Crew and Informit
• Page with contextual navigation: Mayo Clinic
• Navigation tools: CDC - site index and Getty - site map and NLM - site map
• Fixed design on small display: CNET
• Flexible design with different styles: ABCNews.com
• Styles used to position elements: Blogger

Sarah Horton
Last updated 15 June 2005