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 &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>

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/

THANKS!chris.bush@sigma.se

wearesigma.com

@wearesigma / @suthen