Apr 18, 2017 - 19h15 : Nicolas Steenhout â Don't Turn Off That JavaScript Just Yet! .... Abesty - Own work, CC BY-SA 3
JS accessibility Don’t turn Off That JavaScript Just Yet!
a11yMTL Meetup Group Shopify Montreal April 18th, 2017
SSID
Shopify Guests
Password
welcome2shopify
Bienvenue / welcome 18h30 :
Réseautage informel / informal networking
19h00 : Mot de bienvenue / welcome and announcements 19h15 : 20h15 :
Nicolas Steenhout – Don’t Turn Off That JavaScript Just Yet! Discussions de groupe / Group discussions
21h00 : Fin de la soirée / Event wrap up
Commanditaires / sponsors
https://meetup.com/a11ymtl/
https://facebook.com/groups/a11ymtl/
2017/05/18 – 6:30pm GAAD – Global Accessibility Awareness Day With the Honourable Carla Qualtrough Minister of sports and people with disabilities Shopify Montréal 490, rue de la Gauchetière Ouest
5 minutes 20 slides
What would YOU say?
Interested? bit.ly/a11ymtl-ignite-en Intéressé(e)? bit.ly/a11ymtl-ignite-fr
A LITTLE BIT ABOUT US •
SHOPIFY PLATFORM RELEASED: 2006
•
MERCHANTS: 325,000+
•
MERCHANTS IN: ~150 Countries
•
THEMES IN OUR THEME STORE: 100+
•
EMPLOYEES: 1750+
•
TOTAL SALES ON SHOPIFY: $24 Billion
•
APPS IN OUR APP STORE: 1500+
•
EXPERTS IN OUR NETWORK: 780+
OFFICES IN MONTREAL, OTTAWA, TORONTO AND WATERLOO (CA), AS WELL AS SAN FRANCISCO (US)
WE’RE HIRING! Front End Developers Back End Developers Designers UX Researchers and many more opportunities
bit.ly/shopify-wants-you
#a11yMTL
Nicolas Steenhout My name is Nicolas Steenhout. I speak, train, and consult about inclusion, accessibility and disability. www.incl.ca @vavroom
Follow along!
http://bit.ly/a11ymtl-201704
What if I told you…
… these stairs are accessible?
Accessibility:
Don't turn off that JavaScript just yet!
Nicolas Steenhout
[email protected] @vavroom
a11y
For everyone
On every device
Assistive Technologies (AT) •
Screen readers
•
Keyboard
•
Dragon Naturally Speaking
•
Sip & puff switch
•
Eye tracking
•
etc…
People with disabilities are,
by far, the largest minority
group on the web
Sighted
keyboard-only
user Temporary impairments!
Technical challenge
Meeting
requirements
doesn't always
ensure
accessibility
Involve real users with disabilities
in your testing process
Barriers aren't just for
people with disabilities
Ye goode olde days
97% http://webaim.org/projects/screenreadersurvey5/#javascript
JS to increase accessibility •
Additional information
•
Warnings
•
Instructions
•
Warning for timed responses
•
Giving additional time
Information interpretable as text e.g. Progress bar - indicate progress in text.
62%
Focus management
Keyboard navigation Tab
SHIFT + Tab
ENTER
Spacebar
Focusable elements •
Links
•
Buttons
•
Form elements
•
iframe
•
etc
Exhaustive list on:
https://allyjs.io/
tabindex="-1"
To allow keyboard
focus for user.
To allow programmatic
focus
Positive tabindex
Accessible modal window •
Doesn't appear in normal tab order
•
Captures keyboard until window closed
•
Sets focus on heading
•
Close with "esc" or close button
Working example:
http://codepen.io/vavroom/pen/NpRLzE
Event handlers Device dependent • •
Mouse
or Keyboard
Device independent • • •
Mouse
and Keyboard
and Other means
Event pairing
Pair mouse events with nearest keyboard equivalent
mousedown / keydown
Focus on purpose,
not mechanics of action
Modifying default behavior
object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);
object.addEventListener("focus", myScript);
object.addEventListener("blur", myScript);
object.addEventListener("click", myScript);
object.addEventListener("dblclick", myScript);
Dynamic content
1. Can you trigger content with keyboard?
2. Is content accessible?
WAI-ARIA
Accessible Rich Internet Applications
A technical spec by the W3C to help increase accessibility of the web,
particularly dynamic content and user interfaces
1st rule of ARIA
"Don't use ARIA (unless it is necessary)"
Semantics vs WAI-ARIA A is a button
a is a div
Why change default behavior?
Triggered and focused with keyboard only http://codepen.io/vavroom/full/GWjXaG/
ARIA Roles
ARIA Properties and States
Live Regions
Live Regions
Live Regions
Questions?
Thank you!
Nicolas Steenhout
[email protected]
@vavroom
Photo Credits •Accessible stairs by Abesty - Own work, CC BY-SA 3.0,
https://commons.wikimedia.org/wiki/ File:Macdonaldtown_Railway_Station_stairs_to_platform.jpg •Solar car by Hideki Kimura, Kouhei Sagawa -
Own work, CC BY 3.0,
https://commons.wikimedia.org/w/index.php?curid=8341063 •Barriers by Mad Cycle Lanes of Manchester
http://madcyclelanesofmanchester.blogspot.ca/ •Old Books - Public domain CC0
https://pixabay.com/en/age-ancient-antique-book-brown-16841/ •Magnifying glass by Niabot - Own work, CC BY-SA 3.0
https://commons.wikimedia.org/wiki/ File:Magnifying_glass_with_focus_on_glass.png
Questions & comments
Keep in touch!
Nicolas Steenhout @vavroom
Denis Boudreau @dboudreau
Arthur Gouveia @arthurgouveia
Merci beaucoup! Device-independent scripting is the key to accessible functionalities
facebook.com/groups/a11yMTL @a11yMTL
twitter.com/a11yMTL Desktop and mobile screen reader accessibility
17
@a11yMTL
Desktop and mobile screen reader accessibility
18
http://a11yMTL.org/ @a11yMTL
Desktop and mobile screen reader accessibility
19
