狠狠撸

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

Do designers need to
know how to code?

鈥揌eydon Pickering, Inclusive Design Patterns
鈥淭he 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?

鈥揗ike 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.

In many ways I blame Ian鈥�
Henny Swan, The Velvet rope

Ingredients
Structure and Semantics

Accessible Code for Web Designers - CSUN 2017

<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>
<h2>News</h2>
<h3>Democrats鈥�</h3> <h3>鈥橳rump鈥�'</h3>

<p>Welcome to BBC.com Wednesday, 1 March</p>
<h2>Top News Stories</h2>
<h2>News</h2>
<h3>Democrats stony-faced amid calls for unity</h3>
<h3>'Trump has given us hope'</h3>

<h2>Top News Stories</h2> <h2>News</h2>
<h3>Trump touts鈥�</h3> <h3>Analysis鈥�</h3> <h3>Democrats鈥�</h3> <h3>鈥橳rump鈥�'</h3>

h1 (hidden) 鈥淏BC Homepage鈥�
h2 (hidden) 鈥淭op 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) 鈥淏BC Homepage鈥�
h2 (hidden-visually) 鈥淭op News Stories鈥�
h3
h3 h3
h3 h3

<ul>
<li>
<p>The president promises a "new chapter of American gre
</li>
<li>
</li>
<li>
<h3>New Uber row as boss swears at driver upset with far
</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>

鈥揃ootstrap 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

<ul role="tablist">
<li role="presentation">
<a href="#home" role="tab" aria-expanded="true">Home</a>
</li>
<a href="#profile" role="tab" aria-expanded="false">Profile</a>
</li>
<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);

狠狠撸

Accessible Code for Web Designers - CSUN 2017

More Related Content

Recently uploaded (20)

Featured (20)

Accessible Code for Web Designers - CSUN 2017

Editor's Notes