This document discusses the importance of web designers learning accessible coding practices. It provides examples of using semantic HTML elements like headings, lists, and sections to structure a page outline in an accessible way. It also shows how to implement tabbed interfaces using WAI-ARIA roles and properties to ensure they are operable by keyboard and screen readers. The conclusion is that learning basic coding practices is crucial for designers to create websites that work for all users.

1. Accessible code for
web designers
Ian Pouncey
The Paciello Group
© The Paciello Group. All Rights Reserved.

2. Do designers need to
know how to code?

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. How much code do
designers need to know?

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. Why is this important?

7. In many ways I blame Ian…
Henny Swan, The Velvet rope

8. Cake

9. Ingredients
Structure and Semantics

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

12. <h2>Welcome to…</h2>
<h3>Trump touts…</h3> <h3>Analysis…</h3>
<h1>BBC Homepage</h1>
<h2>News</h2>
<h3>Democrats…</h3> <h3>’Trump…'</h3>

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

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

15. h1 (hidden) “BBC Homepage”
h2 (hidden) “Top News Stories”
h3
h3 h3
h3 h3

16. .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;
}

17. h1 (hidden-visually) “BBC Homepage”
h2 (hidden-visually) “Top News Stories”
h3
h3 h3
h3 h3

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

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

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

22. <header></header>
<nav></nav>
<main><main>
<aside></aside>
<footer></footer>

24. <header>
<nav></nav>
</header>
<main><main>
<aside></aside>
<footer></footer>

27. Cake

28. Method
Interactions

29. –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

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

32. tabs[2].focus();
tabs.addEventListener('keyup', keyupEvent);

33. Taste
Conclusion