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
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
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
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
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
34. offline accessibility
• Accessibility not just about code
• Content must be accessible too, considerations our client must
make
• Example
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