Accessible code for web designers

Ian PounceyThe Paciello Group

© The Paciello Group. All Rights Reserved.

Do designers need to know how to

code?

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

How much code do designers need to

know?

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

Why is this important?

In many ways I blame Ian…

Henny Swan, The Velvet rope

Cake

IngredientsStructure and

Semantics

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

<h2>Welcome to…</h2>

<h3>Trump touts…</h3> <h3>Analysis…</h3>

<h1>BBC Homepage</h1>

<h2>News</h2>

<h3>Democrats…</h3> <h3>’Trump…'</h3>

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

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

h1 (hidden) “BBC Homepage”

h2 (hidden) “Top News Stories”

h3

h3 h3

h3 h3

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

}

h1 (hidden-visually) “BBC Homepage”

h2 (hidden-visually) “Top News Stories”

h3

h3 h3

h3 h3

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

<ul><li>

<h3>Trump touts 'renewal of American spirit'</h3><p>The president promises a "new chapter of American greatness" in his first speech to Congress.</p>

</li><li>

<h3>Analysis: A kinder, gentler Trump</h3></li><li>

<h3>New Uber row as boss swears at driver upset with fares</h3></li>

</ul>

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

<header></header>

<nav></nav>

<main><main>

<aside></aside>

<footer></footer>

<header>

<nav></nav>

</header>

<main><main>

<aside></aside>

<footer></footer>

Cake

MethodInteractions

–Bootstrap Togglable tabshttp://getbootstrap.com/javascript/#tabs

– WAI-ARIA Authoring Practices example tabshttps://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs.html

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

tabs[2].focus();

tabs.addEventListener('keyup', keyupEvent);

TasteConclusion