A brief introduction on how accessibility can be incorporated into an responsive web site. Because of the amount of useful links in the slides we have left the download option enabled to make it a little easier for you get access to them

1. Building Inclusive and
Responsive websites
Chris Bush
UX Practice Lead - wearesigma.com
@wearesigma / @suthen

2. GeekTweet
#RWDa11y
Best tweet will win a copy of
“design meets disability”.
If you don’t win it - buy it!

3. TOPICS
• TYPES OF IMPAIRMENT
• ACCESSIBLE DESIGN
• ACCESSIBLE CODE
• REVIEWING YOUR SITES

4. TYPES OF IMPAIRMENT

5. TYPES OF IMPAIRMENT
Vision Hearing
Ability to see, or process visual information Ability to hear, or process acoustic information
›
Motor Cognitive
Ability in mentally demanding areas such as
Ability to interact with a device reading, memory, attention, or complex
accurately and quickly concepts or language
Modified from the BBC GEL Accessibility guidelines

6. TYPES OF IMPAIRMENT – LONG TERM
Vision Hearing
Blindness, low vision & colour blindness Hearing loss
›
Motor Cognitive
Dyspraxia, RSI, arthritis and cerebral palsy Down's syndrome, Asperger's and dyslexia
Modified from the BBC GEL Accessibility guidelines

7. TYPES OF IMPAIRMENT – TEMPORARY
Vision Hearing
Forgot my glasses Watching a video in a noisy environment
›
Motor Cognitive
Temporary injury such as a broken wrist Hangover!

8. START WITH DESIGN

10. DON’T PENALISE YOUR USERS
The use …but the
cases and content
UI may be should not
different… be.

11. THINK ABOUT INTERACTION
Design hit
areas to be
finger
friendly

12. THINK ABOUT INTERACTION
Design hit
areas to be
input
device
friendly

13. THINK ABOUT COLOUR
2.7 million
people in
the UK are
colour blind

14. CHECK COLOUR CONTRAST
Photoshop
to the
rescue, sort
of.
Other tools
include
Visolve and
Sim Daltonism

15. CHECK COLOUR CONTRAST
Anything
missing?
Not sure?
Try the
Juicy studio
Contrast
tester

16. DESIGN FOR READABILITY
10-15
words on a
line
Clear visual
hierarchy
Adequate
line-heights
(120-150%)
A good
background
contrast
without
flicker

17. SOLID FOUNDATIONS

18. ARIA
The Accessible Rich Internet Applications
Suite, defines a way to make web content more
accessible to people with disabilities.
It especially helps with dynamic content and
advanced user interfaces
• Landmark roles
• States and properties

19. ARIA: LANDMARK ROLES
Quick <header role=“banner”> <div id=“search” role=“search”>
navigation
between <nav role="navigation">
known
content
<aside role=
groups <div id=“main” role=“main”>
“complimentary”>
<footer role=“contentinfo”>

20. ARIA: LANDMARK ROLES
<header role=“banner”> <div id=“search” role=“search”>
Don’t over <nav role="navigation">
use them
<aside role=
<div id=“main” role=“main”>
“complimentary”>
No-one
likes a
chatty
<footer role=“contentinfo”> screen
reader

21. UNDERSTANDING ROLES
Using ARIA
in HTML.

22. ARIA: LANDMARK ROLES

23. ARIA: LANDMARK ROLES
Banner

24. ARIA: LANDMARK ROLES
Search

25. ARIA: LANDMARK ROLES
Navigation

26. ARIA: LANDMARK ROLES
What the screen reader says
JAWS says:
“Banner region start” and “Banner region end”.
NVDA 2012.3 says:
“Banner region start” at the beginning of the banner landmark.
VoiceOver on IOS says:
“Landmark start” and “Landmark end”. Does not say which landmark it is.
Talkback on Android says :
“Banner” at the beginning of the landmark but does not identify the end of the
landmark.

27. ARIA: LANDMARK ROLES
Improving the experience for mobile
<nav
id=“popnav"
aria-label=“Popular Navigation"
role="navigation">
Mobile iOS 6
“Popular Navigation, Landmark start”
Mixed support on older devices, so
you should include meaningful text within
landmarks to help users identify the
context.

28. AVOIDING VERBOSITY
BAD EXAMPLE
<div class="ottSidekickFeedLeadArticleWrapper ">
<a id="ott_sidekick1_lead_article_image_link" href=“http://news.sky.com/story/1020776"
class="Article" onclick="{removed}">
<img title="Autumn Statement: Osborne Tightens The Screw"
alt="Autumn Statement: Osborne Tightens The Screw"
src="-90x90.jpg"></a>
</div>
<div class="ottSidekickFeedLeadArticleContents">
<h4 class="hbx-lid">
<a href="http://news.sky.com/story/1020776"
title="Autumn Statement: Osborne Tightens The Screw"
onclick=“{removed}”>Autumn Statement: Osborne Tightens The ...</a>
</h4>
<p title="Chancellor George Osborne will warn there are no &quot;miracle cures&quot; as he admits
more drastic action is needed to balance Britain's books.">Chancellor George Osborne will warn there are no
"miracle cures" as he admi...</p></div>

29. AVOIDING VERBOSITY
GOOD EXAMPLE
<h2 class=" secondary-story-header">
<a href="/news/uk-england-beds-bucks-herts-20603182"
rel="published-1354669877163" class="story">
<img alt="Euromillions logo" src="http://news.bbcimg.co.uk/media/images/30185-1.jpg">
Deadline day for £64m lotto prize</a>
</h2>
<p>The highest lottery prize ever to remain unclaimed - nearly £64m - will go to good causes if the winner does
not come forward by 23:00 GMT.
</p>

30. CODE FOR SIMPLICITY
LANDMARK ROLES BAD EXAMPLE
<form id="search" method="get" action="/help/search.htm" role="search">
<label for="query" id="searchlabel" class="hidden">Search</label>
<input type="text" id="query" name="query" class="searchinput" value=""
placeholder=“Enter a search term”/>
<input id="searchsubmit" name="searchsubmit" type="image" value="Search" src="/u-gofotzyp/search.gif" />
</form>

31. WHERE DID MY ZOOM GO?
Keep pinch-
zoom
enabled

32. CHECKING YOUR WORK

33. • Some great checklists available
http://www.iheni.com/mobile-accessibility-tests/
http://www.w3.org/WAI/WCAG20/quickref/
• Listen to your sites on screen readers
(Try turning your monitor off)
• Automated testers like achecker.ca
Great learning device
• Expert reviews
RNIB – See it right
Abilitynet
Independent evaluators

34. RESOURCES

35. GREAT ACCESSIBILITY SITES
• http://www.w3.org/WAI
• http://webaim.org
• http://achecker.ca/
• http://www.bbc.co.uk/accessibility
• http://www.abilitynet.org.uk/myway
www.iheni.com
• http://www.rnib.org.uk/professionals/webaccessibility/designbuild/P
ages/design_build.aspx
• http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0
ARIA guides
• http://www.w3.org/WAI/intro/aria.php
• http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html

36. COLOUR
• http://juicystudio.com/services/luminositycontrastratio.php
• http://www.ryobi-sol.co.jp/visolve/en/
• www.colourblindawareness.org
• www.24ways.org/2012/colour-accessibility
• www.wearecolorblind.com
• http://michelf.ca/projects/sim-daltonism/
READABILITY
• http://informationarchitects.net/blog/100e2r/
• http://www.plainenglish.co.uk/free-guides.html
• http://webaim.org/techniques/writing/

37. THANKS!
chris.bush@sigma.se
wearesigma.com
@wearesigma / @suthen