• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Torchbox University Accessibility
 

Torchbox University Accessibility

on

  • 357 views

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

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

Statistics

Views

Total Views
357
Views on SlideShare
357
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Torchbox University Accessibility Torchbox University Accessibility Presentation Transcript

    • Totally not-boring super awesome good accessibility practiceTuesday, 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 newTuesday, 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 laterTuesday, 12 February 13
    • about accessibility • Not just visual • Lots more considerations • Motor • Auditory • Cognition • Not just about disabilityTuesday, 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 everyoneTuesday, 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 oftenTuesday, 12 February 13
    • Tuesday, 12 February 13
    • Tuesday, 12 February 13
    • text size • Everyone zooms • It shouldn’t break the page layout • Use relative units combined with responsive designTuesday, 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 ADHDTuesday, 12 February 13
    • movement • More myths around this than most • Movement is fine, as long as: • Initiated by the user • Controllable • Speed • Pause/restartTuesday, 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 tipsTuesday, 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
    • 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
    • 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
    • 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 themTuesday, 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 tagsTuesday, 12 February 13
    • 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
    • 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
    • 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
    • Wider accessibility stuff • No more code I promiseTuesday, 12 February 13
    • offline accessibility • Accessibility not just about code • Content must be accessible too, considerations our client must make • ExampleTuesday, 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 ⌘ + F5Tuesday, 12 February 13
    • other stuff • Navigate with a keyboard • Snoop on each other’s code • Install an extensionTuesday, 12 February 13