Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible Code for Web Designers - CSUN 2017

634 views

Published on

Covers the capabilities of the web platform, teaching web designers basic knowledge of HTML, CSS, and JavaScript that will improve the accessibility of their designs.

Published in: Design
  • Be the first to comment

Accessible Code for Web Designers - CSUN 2017

  1. 1. Accessible code for web designers Ian Pouncey The Paciello Group © The Paciello Group. All Rights Reserved.
  2. 2. Do designers need to know how to code?
  3. 3. –Heydon Pickering, Inclusive Design Patterns “The web is made of code and must be designed, therefore designing with code is working with the right materials. This is the best course of action.”
  4. 4. How much code do designers need to know?
  5. 5. –Mike Davidson, The Five Tool Designer The general advice I usually give people on the question of code is: learn as much code as will actually make you a better designer. You will probably know if and when to stop.
  6. 6. Why is this important?
  7. 7. In many ways I blame Ian… Henny Swan, The Velvet rope
  8. 8. Cake
  9. 9. Ingredients Structure and Semantics
  10. 10. <h1>BBC Homepage</h1> <h2>Welcome to BBC.com Wednesday, 1 March</h2> <h3>Trump touts 'renewal of American spirit'</h3> <h3>Analysis: A kinder, gentler Trump</h3> <h2>News</h2> <h3>Democrats stony-faced amid calls for unity</h3> <h3>'Trump has given us hope'</h3>
  11. 11. <h2>Welcome to…</h2> <h3>Trump touts…</h3> <h3>Analysis…</h3> <h1>BBC Homepage</h1> <h2>News</h2> <h3>Democrats…</h3> <h3>’Trump…'</h3>
  12. 12. <h1>BBC Homepage</h1> <p>Welcome to BBC.com Wednesday, 1 March</p> <h2>Top News Stories</h2> <h3>Trump touts 'renewal of American spirit'</h3> <h3>Analysis: A kinder, gentler Trump</h3> <h2>News</h2> <h3>Democrats stony-faced amid calls for unity</h3> <h3>'Trump has given us hope'</h3>
  13. 13. <h1>BBC Homepage</h1> <h2>Top News Stories</h2> <h2>News</h2> <h3>Trump touts…</h3> <h3>Analysis…</h3> <h3>Democrats…</h3> <h3>’Trump…'</h3>
  14. 14. h1 (hidden) “BBC Homepage” h2 (hidden) “Top News Stories” h3 h3 h3 h3 h3
  15. 15. .hidden-from-all { display: none; } .hidden-visually { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  16. 16. h1 (hidden-visually) “BBC Homepage” h2 (hidden-visually) “Top News Stories” h3 h3 h3 h3 h3
  17. 17. <h1>BBC Homepage</h1> <h2>Top News Stories</h2> <h2>News</h2> <h3>Trump touts…</h3> <h3>Analysis…</h3> <h3>Democrats…</h3> <h3>’Trump…'</h3>
  18. 18. <ul> <li> <h3>Trump touts 'renewal of American spirit'</h3> <p>The president promises a "new chapter of American gre </li> <li> <h3>Analysis: A kinder, gentler Trump</h3> </li> <li> <h3>New Uber row as boss swears at driver upset with far </li> </ul>
  19. 19. <ul> <li>An item</li> <li>An other item</li> <li>Yet another item</li> </ul> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
  20. 20. <header></header> <nav></nav> <main><main> <aside></aside> <footer></footer>
  21. 21. <header> <nav></nav> </header> <main><main> <aside></aside> <footer></footer>
  22. 22. Cake
  23. 23. Method Interactions
  24. 24. –Bootstrap Togglable tabs http://getbootstrap.com/javascript/#tabs – WAI-ARIA Authoring Practices example tabs https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs.html
  25. 25. <ul role="tablist"> <li role="presentation"> <a href="#home" role="tab" aria-expanded="true">Home</a> </li> <li role="presentation"> <a href="#profile" role="tab" aria-expanded="false">Profile</a> </li> <li role="presentation"> <a href="#" role="tab" aria-expanded="false">Dropdown</a> </li> </ul> <div role="tablist"> <button role="tab" aria-selected="true">Nils Frahm</button> <button role="tab" aria-selected="false" tabindex="-1">Helios</button> <button role="tab" aria-selected="false" tabindex="-1">Joke</button> </div>
  26. 26. tabs[2].focus(); tabs.addEventListener('keyup', keyupEvent);
  27. 27. Taste Conclusion

×