A talk I gave at our weekly knowledge sharing session at the web agency Torchbox

1. Totally not-boring super awesome good
accessibility practice
Tuesday, 12 February 13

2. Why?
• I felt out of touch
• I started reading and refreshing my own knowledge
• A lot has changed with HTML5 etc
• Why not TBX uni?
• Everyone can do with a refresher
• Wider accessibility stuff might be new
Tuesday, 12 February 13

3. why?
• Lots of myths & outdated guidance
• Guidelines changing/evolving
• A quick run through, some code, come not. Some higher-level
stuff
• Sorry if you know this stuff
• Lots out there, will share links later
Tuesday, 12 February 13

4. about accessibility
• Not just visual
• Lots more considerations
• Motor
• Auditory
• Cognition
• Not just about disability
Tuesday, 12 February 13

5. about accessibility
• English as a second or third language
• Hostile browsing environments
• Outdoors
• On a train with an unreliable data connection
• These aren’t strictly accessibility problems, but an accessible
site is better for everyone
Tuesday, 12 February 13

6. Colours
• Understand the guidelines
• Colour not only indicator
• Sufficient contrast
• except ‘incidental content’
• Large type has lower contrast ratio
• Check early and often
Tuesday, 12 February 13

7. Tuesday, 12 February 13

8. Tuesday, 12 February 13

9. text size
• Everyone zooms
• It shouldn’t break the page layout
• Use relative units combined with responsive
design
Tuesday, 12 February 13

10. text size
• To ensure a robust layout we should use relative units of
measure for everything
• Text size (ems or rems)
• Line-height (ems or rems)
• Padding/Margin (ems, rems or %)
• Media queries (ems)
Tuesday, 12 February 13

11. movement
• More myths around this than most
• Things that move take attention
• Attention interruptions are sometimes necessary
• But are bad during intensive tasks
• Really bad for people with learning difficulties or ADHD
Tuesday, 12 February 13

12. movement
• More myths around this than most
• Movement is fine, as long as:
• Initiated by the user
• Controllable
• Speed
• Pause/restart
Tuesday, 12 February 13

13. how and when to hide stuff
<h2>Navigation menu</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Prices</a></li>
</ul>
Tuesday, 12 February 13

14. Hide from everyone
/* Hidden and not read out */
h2 {
display: none
}
Tuesday, 12 February 13

15. Hide from sight
/* Read out but visually hidden */
h2 {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
Tuesday, 12 February 13

16. keyboard controls
• A TBX uni topic all in itself
• But a few nice tips
Tuesday, 12 February 13

17. Keyboard controls :focus
• Focus is a visual indicator for your position in the dom when
using keyboard
• When you define :hover, always define :focus
• Mixins!
Tuesday, 12 February 13

18. Keyboard controls sweet focus mixin
@mixin hoverActiveFocus($property, $value) {
&:hover, &:active, &:focus {
#{$property}: $value }
}
@include hoverActiveFocus(a, #dd4400);
a:hover, a:active, a:focus {
color: #dd4400;
}
Tuesday, 12 February 13

19. Keyboard controls tabindex
• I ❤ tabindex
• Use tabindex to dictate keyboard tab order
<input tabindex=”2”>
<input tabindex=”1”>
<input tabindex=”100”>
Tuesday, 12 February 13

20. Keyboard controls tabindex
<h1><a href="#">Home</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Prices</a></li>
</ul>
Tuesday, 12 February 13

21. Keyboard controls tabindex
<h1><a href="#">Home</a></h1>
<ul>
<li><a href="#" tabindex="-1" >Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Prices</a></li>
</ul>
• Will no longer tab
Tuesday, 12 February 13

22. Keyboard controls js
• Make sure JS can be controlled with keyboard
• Hover = focus
• Easy with jQuery
$('.menu').bind('hover focus', function() {
//do a thing
});
Tuesday, 12 February 13

23. aria roles
• Add semantic meaning to content over and above HTML
elements
• Assistive tech uses them
Tuesday, 12 February 13

24. aria roles Examples
<nav role="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Prices</a></li>
</ul>
</nav>
Tuesday, 12 February 13

25. aria roles Examples
<aside role="complementary">
<h2>Did you know?</h2>
<p>Runs are deeper than riffles</p>
</aside>
You can use CSS to target roles!
aside[role="complementary"] {
font-size: 0.875em;
}
Tuesday, 12 February 13

26. aria roles Examples
<footer role="contentinfo">
<p>Written by <a rel="author" href="http://twitter.com/profile"
title="@newcurator on Twitter">Pete Martin</a>. Published <time
datetime="…">19 September 2012</time></p>
</footer>
<section role="main">
<p>I’m about to be expanded into my own special element!</p>
</section>
Tuesday, 12 February 13

27. aria roles Examples
<input type=”search” role=”search” />
This one is super important for assistive tech
Which brings us onto forms...
Tuesday, 12 February 13

28. forms
• A giant topic in itself, but some quick tips
• Give stuff labels
• Placeholders aren’t labels
• Give stuff labels
• Even single fields
• Aria roles! aria-required="true"
Tuesday, 12 February 13

29. forms
• Beware of using <p> etc in forms
• Screenreaders in forms mode probably ignore non form tags
Tuesday, 12 February 13

30. forms fieldset
• Group common fields using fieldset
<fieldset>
<legend>What is your favorite animal?</legend>
<input type="radio" name="animal" id="Cat" /> <label for="Cat">Cat</
label>
<input type="radio" name="animal" id="Dog" checked="checked" />
<label for="Dog">Dog</label>
<input type="radio" name="animal" id="Rabbit" /> <label
for="Rabbit">Rabbit</label>
</fieldset>
Tuesday, 12 February 13

31. document outline
• Thanks to HTML5 and all the new elements this is complicated
• Lots of debate over how section etc has changed outline
• Stick to traditional for now
• Use headings in order, don’t jump levels
• Keep a picture of the outline in your head
Tuesday, 12 February 13

32. Comprehension
• Content with no specific audience should be aimed at 12-15 year
olds
• There are tools to measure this
• Read-able.com
• Readability Test - Juicy Studio
• Microsoft Office
Tuesday, 12 February 13

33. Wider accessibility stuff
• No more code I promise
Tuesday, 12 February 13

34. offline accessibility
• Accessibility not just about code
• Content must be accessible too, considerations our client must
make
• Example
Tuesday, 12 February 13

35. Tuesday, 12 February 13

36. Tuesday, 12 February 13

37. Tuesday, 12 February 13

38. service design
• “Before you start this giant form, you’ll need the following...”
Tuesday, 12 February 13

39. How to get better at this stuff
• We’re pretty good already!
• Can always improve
• Familiarise yourself with basics
• Know where to look for details
• Test. Seriously.
Tuesday, 12 February 13

40. Use a screenreader
• Impress your friends
• Terrify yourself
• You’ve got one
• Mac Voiceover ⌘ + F5
Tuesday, 12 February 13

41. other stuff
• Navigate with a keyboard
• Snoop on each other’s code
• Install an extension
Tuesday, 12 February 13