Download - Accessibility in Responsive web design
Building Inclusive and
Responsive websites
Chris Bush
UX Practice Lead - wearesigma.com
@wearesigma / @suthen
GeekTweet
#RWDa11yBest tweet will win a copy of
“design meets disability”.
If you don’t win it - buy it!
• TYPES OF IMPAIRMENT
• ACCESSIBLE DESIGN
• ACCESSIBLE CODE
• REVIEWING YOUR SITES
TOPICS
TYPES OF IMPAIRMENT
›
VisionAbility to see, or process visual information
HearingAbility to hear, or process acoustic information
MotorAbility to interact with a device
accurately and quickly
CognitiveAbility in mentally demanding areas such as
reading, memory, attention, or complex concepts or language
Modified from the BBC GEL Accessibility guidelines
TYPES OF IMPAIRMENT
›
VisionBlindness, low vision & colour blindness
HearingHearing loss
MotorDyspraxia, RSI, arthritis and cerebral palsy
CognitiveDown's syndrome, Asperger's and dyslexia
Modified from the BBC GEL Accessibility guidelines
TYPES OF IMPAIRMENT – LONG TERM
›
VisionForgot my glasses
HearingWatching a video in a noisy environment
MotorTemporary injury such as a broken wrist
CognitiveHangover!
TYPES OF IMPAIRMENT – TEMPORARY
START WITH DESIGN
…but the content
should not be.
DON’T PENALISE YOUR USERS
The use cases and UI may be different…
THINK ABOUT INTERACTION
Design hit areas to be
finger friendly
THINK ABOUT INTERACTION
Design hit areas to be
input device
friendly
THINK ABOUT COLOUR
2.7 million people in
the UK are colour blind
CHECK COLOUR CONTRAST
Photoshop to the
rescue, sort of.
Other tools include
Visolve andSim Daltonism
CHECK COLOUR CONTRAST
Not sure? Try the
Juicy studioContrast
tester
Anythingmissing?
Adequate line-heights(120-150%)
10-15 words on a
line
DESIGN FOR READABILITY
Clear visual hierarchy
A good background
contrast without flicker
SOLID FOUNDATIONS
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
ARIA: LANDMARK ROLES
<header role=“banner”>
<aside role=“complimentary”>
<div id=“main” role=“main”>
<footer role=“contentinfo”>
<nav role="navigation">
Quick navigation between known content groups
<div id=“search” role=“search”>
ARIA: LANDMARK ROLES
<header role=“banner”>
<aside role=“complimentary”>
<div id=“main” role=“main”>
<footer role=“contentinfo”>
<nav role="navigation">Don’t over use them
<div id=“search” role=“search”>
No-one likes a chatty screen reader
UNDERSTANDING ROLES
Using ARIA in HTML.
ARIA: LANDMARK ROLES
ARIA: LANDMARK ROLES
Banner
ARIA: LANDMARK ROLES
Search
ARIA: LANDMARK ROLES
Navigation
ARIA: LANDMARK ROLESWhat 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.
ARIA: LANDMARK ROLESImproving the experience for mobile
<navid=“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.
AVOIDING VERBOSITY
<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 "miracle cures" 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>
BAD EXAMPLE
AVOIDING VERBOSITY
<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>
GOOD EXAMPLE
CODE FOR SIMPLICITY
<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>
LANDMARK ROLES BAD EXAMPLE
WHERE DID MY ZOOM GO?
Keep pinch-zoom
enabled
CHECKING YOUR WORK
• Some great checklists availablehttp://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.caGreat learning device
• Expert reviewsRNIB – See it right
Abilitynet
Independent evaluators
RESOURCES
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
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/
