Upload
mynameismartin
View
325
Download
0
Embed Size (px)
DESCRIPTION
A talk I gave at our weekly knowledge sharing session at the web agency Torchbox
Citation preview
accessibilitypractice
Totally not-boring super awesome good
Tuesday, 12 February 13
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
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
about accessibility
• Not just visual
• Lots more considerations
• Motor
• Auditory
• Cognition
• Not just about disability
Tuesday, 12 February 13
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
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
Tuesday, 12 February 13
Tuesday, 12 February 13
• Everyone zooms
• It shouldn’t break the page layout
• Use relative units combined with responsive design
text size
Tuesday, 12 February 13
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
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
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
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
Hide from everyone/* Hidden and not read out */
h2 {
display: none
}
Tuesday, 12 February 13
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
keyboard controls
• A TBX uni topic all in itself
• But a few nice tips
Tuesday, 12 February 13
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
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
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
<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>
Keyboard controls tabindex
Tuesday, 12 February 13
<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>
Keyboard controls tabindex
• Will no longer tab
Tuesday, 12 February 13
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
aria roles
• Add semantic meaning to content over and above HTML elements
• Assistive tech uses them
Tuesday, 12 February 13
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
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
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
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
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
forms
• Beware of using <p> etc in forms
• Screenreaders in forms mode probably ignore non form tags
Tuesday, 12 February 13
forms 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>
• Group common fields using fieldset
Tuesday, 12 February 13
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
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
Wider accessibility stuff
• No more code I promise
Tuesday, 12 February 13
offline accessibility
• Accessibility not just about code
• Content must be accessible too, considerations our client must make
• Example
Tuesday, 12 February 13
Tuesday, 12 February 13
Tuesday, 12 February 13
Tuesday, 12 February 13
service design
• “Before you start this giant form, you’ll need the following...”
Tuesday, 12 February 13
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
Use a screenreader
• Impress your friends
• Terrify yourself
• You’ve got one
• Mac Voiceover ⌘ + F5
Tuesday, 12 February 13
other stuff
• Navigate with a keyboard
• Snoop on each other’s code
• Install an extension
Tuesday, 12 February 13