Torchbox University Accessibility

431 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
431
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Torchbox University Accessibility

  1. 1. Totally not-boring super awesome good accessibility practiceTuesday, 12 February 13
  2. 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 newTuesday, 12 February 13
  3. 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 laterTuesday, 12 February 13
  4. 4. about accessibility • Not just visual • Lots more considerations • Motor • Auditory • Cognition • Not just about disabilityTuesday, 12 February 13
  5. 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 everyoneTuesday, 12 February 13
  6. 6. Colours • Understand the guidelines • Colour not only indicator • Sufficient contrast • except ‘incidental content’ • Large type has lower contrast ratio • Check early and oftenTuesday, 12 February 13
  7. 7. Tuesday, 12 February 13
  8. 8. Tuesday, 12 February 13
  9. 9. text size • Everyone zooms • It shouldn’t break the page layout • Use relative units combined with responsive designTuesday, 12 February 13
  10. 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. 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 ADHDTuesday, 12 February 13
  12. 12. movement • More myths around this than most • Movement is fine, as long as: • Initiated by the user • Controllable • Speed • Pause/restartTuesday, 12 February 13
  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. 14. Hide from everyone /* Hidden and not read out */ h2 { display: none }Tuesday, 12 February 13
  15. 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. 16. keyboard controls • A TBX uni topic all in itself • But a few nice tipsTuesday, 12 February 13
  17. 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. 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. 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. 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. 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 tabTuesday, 12 February 13
  22. 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. 23. aria roles • Add semantic meaning to content over and above HTML elements • Assistive tech uses themTuesday, 12 February 13
  24. 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. 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. 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. 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. 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. 29. forms • Beware of using <p> etc in forms • Screenreaders in forms mode probably ignore non form tagsTuesday, 12 February 13
  30. 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. 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 headTuesday, 12 February 13
  32. 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 OfficeTuesday, 12 February 13
  33. 33. Wider accessibility stuff • No more code I promiseTuesday, 12 February 13
  34. 34. offline accessibility • Accessibility not just about code • Content must be accessible too, considerations our client must make • ExampleTuesday, 12 February 13
  35. 35. Tuesday, 12 February 13
  36. 36. Tuesday, 12 February 13
  37. 37. Tuesday, 12 February 13
  38. 38. service design • “Before you start this giant form, you’ll need the following...”Tuesday, 12 February 13
  39. 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. 40. Use a screenreader • Impress your friends • Terrify yourself • You’ve got one • Mac Voiceover ⌘ + F5Tuesday, 12 February 13
  41. 41. other stuff • Navigate with a keyboard • Snoop on each other’s code • Install an extensionTuesday, 12 February 13

×