StripeCon New Zealand 2017 - Jacinta Cali - Accessibility

Jacinta CaliDirector of Website Projects at Internetrix@Cali33

Accessibility

(web) Accessibility

Jacinta Cali

Director, Internetrix

linkedin.com/in/jacintacali/ @Cali33

Wake up, Neo...

How did I get here today?

Wake up, Neo...

Why Accessibility?

Our aim

Improve each person’s digital experience

with the application of design thinking and

make a positive difference to the internet.

Web Accessibility

What is Accessibility?

My intent for today

Get you thinking more about Accessibility and it’s benefits

Update you on recent changes to the W3C’s WCAG

Share real life SilverStripe case studies & useful tools

Web Accessibilitycreating an inclusive web

“We need to make every single thing accessible to every single

person with a disability.”Stevie Wonder

Rethink your Audienceaccessibility is hard, but it matters

15% live with a disability

Source: World Health Organisation 2010

Web Accessibility

The Disability Spectrum

Vision Impaired

Hearing Impaired

Physical Cognitive

Web Accessibility

Permanent Disability

eg. Epilepsy

Web Accessibility

Temporary Disability

eg. blocked ears

Web Accessibility

Situational Disability

eg. panic attack

“We need to make every single thing accessible to every single

person. with a disability.”

The W3C GuidesWCAG

Web Accessibility

Key WCAG considerations:

Text Based Alternatives

Tech Compatible

Intuitive Design

Time-limit Conscious

Media Alternatives

Keyboard Accessible

Web Accessibility

W3C’s WCAG timeline

› 1999 - WCAG 1.0 released by W3C

› 2008 - WCAG 2.0 (current version) released

› 2012 - WCAG 2.0 became ISO standard

› 2017 - WCAG 2.1 draft under public review

› 2018 - Expected release of WCAG 2.1

› 2019 - A new version “Silver” 3.0 is coming

What’s new in WCAG 2.1 it adds to 2.0

Web Accessibility

4:5:1 & 3:1 contrast controls

Elements have 4:5:1 contrast

Change text without losing function

Tooltips are easy to interact with ...

21 new WCAG 2.1 additions:

Password memorise

Override keyboard shortcuts

Use only one finger or touch point

Equivalent labels ...

Events are triggered on touch up

Alternatives to device info

Responsive design down to 320px

Elements can be identified

Notify users when content changes

Don’t interfere with inputs

Provide method to prevent interruptions

Interactive elements 44x44(px)...

Web Accessibility

4:5:1 & 3:1 contrast controls

Elements have 4:5:1 contrast

Change text without losing function

Tooltips are easy to interact with

A few Key WCAG 2.1 highlights:

Password memorise

Override keyboard shortcuts

Use only one finger or touch point

Equivalent labels

Events are triggered on touch up

Alternatives to device info

Responsive design down to 320px

Elements can be identified

Notify users when content changes

Don’t interfere with inputs

Provide method to prevent interruptions

Interactive elements 44x44(px)

Purpose of Controls

Conventional name of elements can be determined

Eg. Use Semantic HTML5 elements<aside> <section> <nav>

instead of <div class=”nav”>

Accidental Activation

Events are triggered on touch up with activation of a component (up-event)

Graphics Contrast

Have a contrast ratio of at least 4.5:1 against the adjacent colour(s)

Or at least 3:1 ration for Thicker graphics

Target Size: Pointer Inputs

A minimum 44x44px touch space rule is required for major interactive elements

Authentication Alternative

Authenticating doesn’t force you to remember your password

To read the full draft go to:

w3.org/TR/WCAG21

Project Case Study WCAG 2.0 accessibility for nsw.gov.au

2017 Project Showcase: nsw.gov.au

- Lots of content

- Has interactive pages

- Has interactivity

between departments

- Lots of external links

The Project

The Accessibility Process

› Audit (human usability + automated tests)

› Report findings

› Rectify issues

› Repeat... until it passes

What Worked Well

The Project

Tracking our Accessibility Progress

What Worked Well

Accessibility was introduced early in the design phase

Colours, font size & content design

What Worked Well

Straightforward solutions that made content editors lives easier.

Such as...

What Worked Well

Hidden spans for screen readersExternal links

What Worked Well

Translucent background overlays

What Worked Well

Keyboard navigation

What Worked Well

Forms ModificationForm labels and error messages

Our Preferred Approach

The slider - initially looked like...

Our Preferred Approach

The slider - ended up as...

Our Preferred Approach

Project Constraints

› Limited User Testing

› Later in dev

› Audit of the content

Our Recommended ProcessHow we prefer to do it

Our Preferred Approach

Accessibility first, before code

Our Preferred Approach

Earlier (and more) User Research

Useful Resources...

Useful Resources

WCAG 2.0 - Quick Referencehttps://www.w3.org/WAI/WCAG20/quickref

Useful Resources

Accessibility Developer ToolsOffered by Google Accessibility - Great for ARIA tag error checks

Useful Resources

Tenon.iohttps://tenon.io

helps identify accessibility issues in any environment including on your local host

Useful Resources

Dyslexiefontdyslexiefont.com

specially designed for people with dyslexia, in order to make reading easier

Useful Resources

Webaim Colour Contrast Checkerhttp://webaim.org/resources/contrastchecker/

Useful Resources

Accessible colour palette builderhttps://toolness.github.io/accessible-color-matrix/

Useful Resources

Screen readers

For Windows

NV Access

● Free to use (or donate)

● Gaining popularity

● Easy to install and quick to use

● https://www.nvaccess.org/

For Mac

VoiceOver

● Inbuilt in all recent systems

● Super quick to turn on and off

Useful Resources

A11y Projecthttp://a11yproject.com

“Each small task of everyday life is part of the total harmony of the universe.”

- St. Theresa of Lisieux

Our Preferred Approach

› Design for accessibility before you build

› Stay up to date, check out v2.1 of WCAG

› Audit for accessibility at all stages of any project

› Test with real people with real disabilities

› A more accessible site is better for everyone

In Conclusion

Thanks for listening

I’m Jacinta Cali

linkedin.com/in/jacintacali/

@internetrix

@Cali33

Internetrix is an award winning Digital Agency

that creates and supports online to make a difference.

Pick up the phone, live chat, or email us if you would like to hear how

our skills and knowledge can help you.

Get in touch:

Email: irx.info@internetrix.com.au | Phone: 02 4253 5300 | @internetrix