Toronto Accessibility & Inclusive DesignToronto Accessibility & Inclusive Designmeetup.com/a11yTOmeetup.com/a11yTO

@a11yTO@a11yTO #a11yTO#a11yTO

Toronto Accessibility & Inclusive DesignToronto Accessibility & Inclusive Designmeetup.com/a11yTOmeetup.com/a11yTO

@a11yTO@a11yTO #a11yTO#a11yTO

Practical Web AccessibilityPractical Web Accessibility

GeorgeZamfir.com - @GeorgeZamfir

Practical Web AccessibilityPractical Web Accessibility&&

The Accessibility TribeThe Accessibility Tribe

This is our local-global tribe!

john.foliot.ca/csun-2012-recap

“capture(d) the CSUN zeitgeist (of) the global accessibility community as a tribe, drawn together by a shared ambition to make the web a truly inclusive place.”

- Leonie Watson

And we want you to join the tribe!(there are superheroes)

Welcome to the Welcome to the The Accessibility Superheroes TribeThe Accessibility Superheroes Tribe

Superheroes talking:

Superman: Hey these iPhones are great, now we can all keep in touch and share our crime fighting techniques with each other.Batman: I know, right? I can’t imagine life without one. That would really suck.Flash: How come I didn’t get one?SpidermanSpiderman: Hahaha, Apple doesn’t : Hahaha, Apple doesn’t support Flash.support Flash.

#a11yTO – 2 take-aways#a11yTO – 2 take-aways

Learn something newLearn something new

and / or

Validate of your ideasValidate of your ideas

#a11yTO #a11yTO – Learn Something New

#a11yTO #a11yTO – Validation

#a11yTO – 2 take-aways#a11yTO – 2 take-aways

Learn something newLearn something new &

Validate of your ideasValidate of your ideas

It’s about the tribe so I shortened my talk!

Practical Web AccessibilityPractical Web AccessibilitySequel to the Guelph presentations - bit.ly/a11y_scotia

Lessons learned from redesigning scotiabank.com

1. Make A Huge Difference For The Users1. Make A Huge Difference For The Users2. Practical “Dynamic Web 2.0” Accessibility2. Practical “Dynamic Web 2.0” Accessibility

Make A Huge Difference For The UsersMake A Huge Difference For The Users

1.1. Big impact issuesBig impact issues

2.2. Don’t just check the WCAG 2 check-marksDon’t just check the WCAG 2 check-marks

3.3. My bias: keyboard testingMy bias: keyboard testing

Need help?Need help?Good thing we now have a tribe to help out Good thing we now have a tribe to help out

1. Big impact issues1. Big impact issues

“Who Wants To Be A Millionaire” question:

Which of the following is the largest?Possible answers: an elephant or the moon

The contestant chose "An Elephant"!

1. Big impact issues1. Big impact issues

1. 1. “If I can only fix one thing what would that be?”“If I can only fix one thing what would that be?”

2. Look at the 2. Look at the BIGBIG picture & the users’ needs picture & the users’ needs

3. Our approach: 3. Our approach: • framework-firstframework-first• common componentscommon components• frequently used “tools”frequently used “tools”• ““real” content structurereal” content structure

1. Big impact issues – Our Approach1. Big impact issues – Our Approach

1. Framework-first

2. Common components

3. Frequently used “tools”

4. “real” content structure

2. Checking the WCAG2 check-marks2. Checking the WCAG2 check-marks

Don’t get hung up onWeb Content Accessibility Guidelines 2 (WCAG 2)

3. Keyboard Testing3. Keyboard Testing

2 BIG concepts:

Everything is functional by keyboard(including highly interactive UI elements)

Visual focus indicator(be the :focus to my :hover)

This website is best viewed at 1024x768 and only works with the mouse

Practical “Dynamic Web 2.0”AccessibilityPractical “Dynamic Web 2.0”AccessibilityWidgetsWidgetsOverlaysOverlaysPop-upsPop-upsSlidersSliders

Modal dialogsModal dialogsDrop-downsDrop-downs

......Oy!Oy!

Sounds familiar?

Practical “Dynamic Web 2.0”AccessibilityPractical “Dynamic Web 2.0”Accessibility

Demo Time!

In the end…In the end…

Accessibility is for everyone!Accessibility is for everyone!“We are only as (dis)abled as the environment around us”

– – Oscar PistoriusOscar Pistorius

Don’t be the policeman, be the fireman!Don’t be the policeman, be the fireman!– – John FoliotJohn Foliot

Practical Web Accessibility

THANK YOU!!