designing with progressive enhancement building the web that works for everyone Todd Parker Patty Toland Scott Jehl Maggie Costello Wachs DeSigning WiTh ProgreSSive enhanCeMenT: BuilDing The WeB ThaT WorkS for everyone Todd Parker, Patty Toland, Scott Jehl, Maggie Costello Wachs neW riDerS 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at www.newriders.com To report errors, please send a note to [email protected] New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2010 by Filament Group, Inc. The Filament Group, Inc. is Todd Parker, Patty Toland, Scott Jehl, and Maggie Costello Wachs. acquisitions editor: Wendy Sharp Project editor: Wendy G. Katz Technical editor: James Craig Production editor: Myrna Vladic Composition: David Van Ness indexer: Jack Lewis interior Design: Mimi Heft Cover Design: Aren Howell noTiCe of righTS All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact [email protected]. noTiCe of liaBiliTy The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the authors nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. TraDeMarkS Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. ISBN-13: 978-0-321-65888-3 ISBN–10: 0-321-65888-4 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America Contents acknowledgments ........................................ x introduction ............................................ xiii SeCTion i The TeST-Driven ProgreSSive enhanCeMenT aPProaCh chapter 1 our approach 3 Testing browser capabilities ................................ 4 Planning for progressive enhancement: the x-ray perspective ... 7 From x-ray to action: the building blocks of progressive enhancement development ...................... 8 Putting theory into action .................................. 10 chapter 2 progressive enhancement in action: the x-ray perspective 11 An overview of the x-ray perspective ....................... 12 Defining content hierarchy and mapping components to HTML ................................... 13 Building foundation markup and minimal, safe styles ....... 15 Applying markup, style, and script enhancements .......... 17 Case 1: Planning structure and organization in a news website ......................................... 18 Evaluating content organization and naming ............... 19 Leveraging native HTML hierarchy features for content organization ................................ 20 Structuring navigation .................................. 20 Accommodating layered and animated content ............ 21 Supporting dynamic filtering and sorting .................. 22 Case 2: Workflows, validation, and data submission in a checkout form ........................................ 23 Breaking down the checkout form design ................. 24 Marking up the form to ensure accessibility .............. 29 Applying constraints and validation ....................... 31 Assembling the basic and enhanced experiences ........... 32 iv Designing with Progressive enhancement: BuilDing the weB that works for everyone Case 3: Interactive data visualization in a budget calculator ................................................ 32 Choosing basic markup for the budget line components .... 33 Creating accessible sliders from the foundation markup .... 35 Building the pie chart ................................... 36 Case 4: Supporting full-featured application capabilities in the browser—the Photo Manager ........................ 37 Marking up global navigation elements ................... 38 Supporting complex album and multi-photo interactions ... 40 Creating custom forms and overlays ..................... 44 Building in Back-button support ......................... 46 Checklist for implementing the x-ray in action .............. 46 chapter 3 writing meaningful markup 49 Marking up text and images .............................. 50 Elements for meaningfully marking up text ................ 51 Lists .................................................. 56 Tabular data ............................................ 57 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Embedded rich media ................................... 61 Embedding external page content ........................ 63 Marking up interactive content ............................ 64 Anchor links ........................................... 65 Form structure ......................................... 65 Form controls ........................................... 67 Creating context in the page ............................... 73 Know when to use block-level vs. inline elements .......... 73 Identify elements with IDs and classes .................... 75 Identify main page sections with WAI-ARIA landmark roles .......................................... 76 Maintain legible source order ............................. 77 Use the title attribute ................................... 79 Setting up an HTML document ............................ 80 The DOCTYPE .......................................... 81 The document header .................................. 82 Building in accessibility ................................... 87 Accessibility guidelines and legal standards .............. 88 Web Content Accessibility Guidelines (WCAG) ........... 89 contents v chapter 4 applying styles effectively 91 Applying CSS to the page ................................. 92 Maintaining styles in external style sheets ................ 92 Linking to external style sheets .......................... 93 Using meaningful naming conventions ................... 95 Styling the basic and enhanced experiences ................ 96 Safe styles for the basic experience ...................... 96 Styling the enhanced experience ......................... 98 Accessibility considerations .............................. 99 Dealing with bugs and browser inconsistencies ............. 101 Conditional comments .................................. 101 Common issues and workarounds ....................... 102 chapter 5 scripting enhancements and interactivity 107 How to properly reference JavaScript ..................... 108 Avoiding inline JavaScript .............................. 108 Referencing external JavaScript ......................... 108 Understanding JavaScript’s place in the basic experience ... 109 Best practices for scripting enhancements ................ 109 Running scripts when content is ready ................... 110 Applying behavior to markup ............................ 110 Building enhanced markup with JavaScript ............... 113 Managing content visibility .............................. 115 Applying style enhancements ........................... 116 Preserving and enhancing usability and accessibility ........ 117 Implementing keyboard access .......................... 118 Assigning WAI-ARIA attributes ......................... 120 Testing accessibility .................................... 120 Maintaining state and preserving the Back button ......... 121 chapter 6 testing browser capabilities 123 EnhanceJS: a capabilities testing framework ................ 124 The mechanics of EnhanceJS: how the tests work ......... 125 Applying enhancements with EnhanceJS ................... 128 Configuring EnhanceJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Loading additional style sheets .......................... 131 Loading additional scripts ............................... 134 vi Designing with Progressive enhancement: BuilDing the weB that works for everyone Customizing the experience toggle link ................... 134 Forcing EnhanceJS to pass or fail ......................... 136 Extending the EnhanceJS test suite ........................ 136 Modifying the test suite with EnhanceJS options .......... 137 Creating new or multiple instances of EnhanceJS .......... 137 Enabling the capabilities test alert for debugging .......... 138 Optimizing EnhanceJS on the server ....................... 139 SeCTion ii ProgreSSive enhanCeMenT in aCTion chapter 7 building widgets with progressive enhancement 143 How the widgets are coded ............................... 143 Navigating the widget chapters ........................... 145 Example code for download ............................. 146 chapter 8 collapsible content 147 X-ray perspective ....................................... 148 Creating accessible collapsible content .................... 150 Foundation markup and style ............................ 150 Enhanced markup and style ............................. 151 Collapsible enhancement script ......................... 155 Using the collapsible script ............................... 158 chapter 9 tabs 161 X-ray perspective ........................................ 162 Creating the tabs ....................................... 164 Foundation markup and style ........................... 164 Enhanced markup and style ............................. 167 Tabs script ............................................. 172 Taking the tabs further ................................... 176 Bookmarking and history (Back button) tracking .......... 176 Auto-rotating tabs ..................................... 181 Referencing external tab content ........................ 182 Displaying tabs as an accordion ......................... 182 Using the tabs script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 contents vii chapter 10 tooltips 185 X-ray perspective ........................................ 186 Creating a tooltip from title content ....................... 189 Foundation markup and style ............................ 189 Enhanced markup and style ............................ 190 Enhanced tooltip script ................................. 193 Creating a tooltip from an anchor link ...................... 195 Creating a tooltip from an external source ................. 197 Using the tooltip script ................................... 199 chapter 11 tree control 201 X-ray perspective ....................................... 202 Creating the tree control ................................ 204 Foundation markup and style ........................... 204 Enhanced markup and style ............................ 206 Enhanced tree script .................................... 210 Using the tree script .................................... 220 chapter 12 charts with html5 canvas 223 X-ray perspective ....................................... 225 Foundation markup ..................................... 226 Creating an accessible chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Parsing the table data .................................. 230 Using canvas to visualize data .......................... 236 Adding enhanced table styles .......................... 246 Keeping the data accessible ............................ 247 Taking canvas charts further: the visualize.js plugin ........ 249 chapter 13 dialogs and overlays 253 X-ray perspective ....................................... 254 Creating the dialog ...................................... 256 Foundation markup and style ........................... 256 Enhanced markup and style ............................ 258 Enhanced dialog script ................................. 265 Taking dialog further ..................................... 271 Using the dialog script ................................... 271 viii Designing with Progressive enhancement: BuilDing the weB that works for everyone chapter 14 buttons 277 X-ray perspective ....................................... 278 Styling input-based buttons .............................. 279 Foundation markup and style ........................... 280 Enhanced markup and style ............................ 282 Enhanced hover state script ............................ 286 Creating buttons with complex visual formatting .......... 287 Foundation markup and style ........................... 288 Enhanced markup and style ............................ 289 Enhanced input-to-button script ........................ 290 Using the input-to-button script .......................... 293 Taking the button further . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 chapter 15 checkboxes, radio buttons, and star rating 297 X-ray perspective ....................................... 298 Creating the custom checkbox ........................... 300 Foundation markup ..................................... 301 Enhanced markup and style ............................ 303 Checkbox script ....................................... 306 Creating custom radio buttons ........................... 309 Foundation markup .................................... 309 Enhanced markup and style ............................. 310 Radio button script ..................................... 312 Taking custom inputs further: a star rating widget .......... 316 Foundation markup ..................................... 316 Enhanced markup and style ............................. 318 Scripting the star rating widget ......................... 320 Using the custom input and star rating scripts ............. 323 chapter 16 slider 325 X-ray perspective ....................................... 326 Creating the slider ...................................... 330 Foundation markup and style ........................... 330 Enhanced markup and style ............................. 331 Slider script ........................................... 339 Using the slider script ................................... 345 contents ix chapter 17 select menu 349 X-ray perspective ....................................... 350 Creating an accessible custom select ..................... 352 Foundation markup and styles .......................... 352 Enhanced markup and styles ........................... 353 Enhanced custom select script ......................... 363 Taking the custom select further: advanced option styling ... 375 Using the custom select script ........................... 377 chapter 18 list builder 379 X-ray perspective ....................................... 380 Creating the list builder .................................. 381 Foundation markup and style ........................... 382 Enhanced markup and style ............................ 383 List builder script ...................................... 387 Taking the list builder further: multi-select, sorting, auto-complete, and contextual menus .................... 394 Multiple selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Drag-and-drop sorting ................................. 394 Auto-complete ........................................ 394 Contextual menus ..................................... 395 Using the list builder script .............................. 395 chapter 19 file input 397 X-ray perspective ....................................... 398 Creating the custom file input ............................ 401 Foundation markup and style ........................... 401 Enhanced markup and style ............................ 402 Custom file input script ................................ 406 Using the custom file input script ........................ 409 summary ............................................... 411 index ...................................................413