Torchbox University Accessibility

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


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


about accessibility

• Not just visual

• Lots more considerations

• Motor

• Auditory

• Cognition

• Not just about disability


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


Colours

• Understand the guidelines

• Colour not only indicator

• Sufficient contrast

• except ‘incidental content’

• Large type has lower contrast ratio

• Check early and often




• Everyone zooms

• It shouldn’t break the page layout

• Use relative units combined with responsive design

text size


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)


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


movement

• More myths around this than most

• Movement is fine, as long as:

• Initiated by the user

• Controllable

• Speed

• Pause/restart


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>


Hide from everyone/* Hidden and not read out */

h2 {

display: none

}


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);

}


keyboard controls

• A TBX uni topic all in itself

• But a few nice tips


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!


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;

}


Keyboard controls tabindex

• I ❤ tabindex

• Use tabindex to dictate keyboard tab order

<input tabindex=”2”>




<h1><a href="#">Home</a></h1>

<ul>





</ul>



<h1><a href="#">Home</a></h1>

<ul>

<li><a href="#" tabindex="-1" >Home</a></li>




</ul>


• Will no longer tab


Keyboard controls js

• Make sure JS can be controlled with keyboard

• Hover = focus

• Easy with jQuery

$('.menu').bind('hover focus', function() {

//do a thing

});


aria roles

• Add semantic meaning to content over and above HTML elements

• Assistive tech uses them


aria roles Examples<nav role="nav">

<ul>





</ul>

</nav>


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;

}


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>


http://twitter.com/profile

http://twitter.com/profile

aria roles Examples<input type=”search” role=”search” />

This one is super important for assistive tech

Which brings us onto forms...


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"


forms

• Beware of using <p> etc in forms

• Screenreaders in forms mode probably ignore non form tags


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


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


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


http://www.read-able.com/

http://www.read-able.com/

http://juicystudio.com/services/readability.php

http://juicystudio.com/services/readability.php

http://office.microsoft.com/en-us/word-help/test-your-document-s-readability-HP010148506.aspx

http://office.microsoft.com/en-us/word-help/test-your-document-s-readability-HP010148506.aspx

Wider accessibility stuff

• No more code I promise


offline accessibility

• Accessibility not just about code

• Content must be accessible too, considerations our client must make

• Example





service design

• “Before you start this giant form, you’ll need the following...”


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.


Use a screenreader

• Impress your friends

• Terrify yourself

• You’ve got one

• Mac Voiceover ⌘ + F5


other stuff

• Navigate with a keyboard

• Snoop on each other’s code

• Install an extension


Technology

Torchbox University Accessibility