torchbox university accessibility
DESCRIPTION
A talk I gave at our weekly knowledge sharing session at the web agency TorchboxTRANSCRIPT
![Page 1: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/1.jpg)
accessibilitypractice
Totally not-boring super awesome good
Tuesday, 12 February 13
![Page 2: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/2.jpg)
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
![Page 3: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/3.jpg)
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
![Page 4: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/4.jpg)
about accessibility
• Not just visual
• Lots more considerations
• Motor
• Auditory
• Cognition
• Not just about disability
Tuesday, 12 February 13
![Page 5: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/5.jpg)
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
![Page 6: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/6.jpg)
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
![Page 7: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/7.jpg)
Tuesday, 12 February 13
![Page 8: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/8.jpg)
Tuesday, 12 February 13
![Page 9: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/9.jpg)
• Everyone zooms
• It shouldn’t break the page layout
• Use relative units combined with responsive design
text size
Tuesday, 12 February 13
![Page 10: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/10.jpg)
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
![Page 11: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/11.jpg)
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
![Page 12: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/12.jpg)
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
![Page 13: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/13.jpg)
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
![Page 14: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/14.jpg)
Hide from everyone/* Hidden and not read out */
h2 {
display: none
}
Tuesday, 12 February 13
![Page 15: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/15.jpg)
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
![Page 16: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/16.jpg)
keyboard controls
• A TBX uni topic all in itself
• But a few nice tips
Tuesday, 12 February 13
![Page 17: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/17.jpg)
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
![Page 18: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/18.jpg)
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
![Page 19: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/19.jpg)
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
![Page 20: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/20.jpg)
<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
![Page 21: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/21.jpg)
<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
![Page 22: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/22.jpg)
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
![Page 23: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/23.jpg)
aria roles
• Add semantic meaning to content over and above HTML elements
• Assistive tech uses them
Tuesday, 12 February 13
![Page 24: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/24.jpg)
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
![Page 25: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/25.jpg)
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
![Page 26: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/26.jpg)
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
![Page 27: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/27.jpg)
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
![Page 28: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/28.jpg)
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
![Page 29: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/29.jpg)
forms
• Beware of using <p> etc in forms
• Screenreaders in forms mode probably ignore non form tags
Tuesday, 12 February 13
![Page 30: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/30.jpg)
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
![Page 31: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/31.jpg)
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
![Page 32: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/32.jpg)
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
![Page 33: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/33.jpg)
Wider accessibility stuff
• No more code I promise
Tuesday, 12 February 13
![Page 34: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/34.jpg)
offline accessibility
• Accessibility not just about code
• Content must be accessible too, considerations our client must make
• Example
Tuesday, 12 February 13
![Page 35: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/35.jpg)
Tuesday, 12 February 13
![Page 36: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/36.jpg)
Tuesday, 12 February 13
![Page 37: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/37.jpg)
Tuesday, 12 February 13
![Page 38: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/38.jpg)
service design
• “Before you start this giant form, you’ll need the following...”
Tuesday, 12 February 13
![Page 39: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/39.jpg)
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
![Page 40: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/40.jpg)
Use a screenreader
• Impress your friends
• Terrify yourself
• You’ve got one
• Mac Voiceover ⌘ + F5
Tuesday, 12 February 13
![Page 41: Torchbox University Accessibility](https://reader033.vdocuments.us/reader033/viewer/2022060107/554bb87cb4c9053a298b4af0/html5/thumbnails/41.jpg)
other stuff
• Navigate with a keyboard
• Snoop on each other’s code
• Install an extension
Tuesday, 12 February 13