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.
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.”
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.
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>
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>
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>
The code for that looks something like this. A header element followed, by nav, main, aside and footer.
[pause] So there we are. If I gave you a picture of the cake and a list of ingredients, everyone would make the same cake, right? Well, no. Of course not. A recipe isn’t just ingredients, it’s the method to follow, the instructions for combining the ingredients, and web design and development is just the same.