SlideShare a Scribd company logo

Accessibility - A feature you can build

Monika Piotrowicz, profile picture
Monika Piotrowicz

The document presents an overview of web accessibility (a11y), emphasizing the importance of designing websites that are usable by all individuals, including those with disabilities. It includes techniques for enhancing accessibility through proper HTML practices, use of ARIA roles, and testing methods with screen readers. Resources and tools for further learning and testing accessibility are also provided.

Technology
Related topics:
Web Accessibility • Front-End Development
1 of 77
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
Web Accessibility (a11y) A feature you can build MidwestJS - Aug 14 Monika Piotrowicz (@monsika)
Monika Piotrowicz Front End Web Dev Lead Shopify ! @monsika @shopify
I’m just... A regular Front End Developer... ! ! !
And isn’t this… A JavaScript Conference?! ! ! !
So how’d I get here? A short story, starring WCAG 2.0 AA ! ! !
Today • Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
Web Accessibility • “When sites are correctly designed, developed and edited, all users can have equal access to information and functionality” - Wikipedia • “Able to be easily obtained or used; easily understood or appreciated” - Oxford Dictionary • Accessibility ~ Usability • All people can use an application, and it should be easy to use for all people;
Accessibility by the #’s rough 1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011 http://1.usa.gov/M6tObC (under 65/over 65) 2 - Range worldwide prevalence of red-green color deficiency among men, 2012 http://1.usa.gov/M6tKsz Group Population Vision Problems 3-10% Colorblindness 4-8% Physical Functioning 8% Cognitive Difficulty 6% Hearing Difficulty 3-11% Assistive Tools • screen readers • screen magnifiers • keyboard-only • braille display • bumped font size
Me last year...
Go!
WCAG The standard http://www.w3.org/TR/WCAG20/ Understanding WCAG http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Techniques http://www.w3.org/TR/WCAG20-TECHS/ Quick Reference http://www.w3.org/WAI/WCAG20/quickref/ FAQ http://www.w3.org/WAI/WCAG20/wcag2faq.html
Accessibility just a checklist !=
Starting out Early accessibility considerations
First Steps • clear visuals with fallbacks for imagery • well-functioning forms • keyboard interactions
Accessibility - A feature you can build
Visual Considerations • start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp
Give yourself a color audit… and win!
Visual Considerations ✓start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp • don’t rely on colour alone • add legends and texture or symbols
Red-Green Colorblind (Deuteranopia)
Visual Considerations ✓start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp ✓don’t rely on colour alone • add legends and texture or symbols • all images have a meaningful alt attribute • W3C How to write Alt Text http://bit.ly/1aKwIOg • More from A List Apart http://bit.ly/1aKwRkI
Accessibility - A feature you can build
✓ Every form field includes a real label <label for="[INPUT ID]"> ✓ Placeholders don’t count ✓ Labels can include help, required, error text • Provide meaningful message and action on form error WebAIM Forms http://bit.ly/1aKw2bM Harmful Placeholders http://bit.ly/1qNUTOM WebAIM Validation http://bit.ly/1aKw6bB Accessible Form Labeling http://bit.ly/1aKw83b Forms
<label for="InputFirstName"> <span class="txt-label">First Name *</span> <span class="txt-error">Required, please provide your first name</span> </label> <input type="text" id=“InputFirstName" required /> WebAIM Forms http://bit.ly/1aKw2bM WebAIM Validation http://bit.ly/1aKw6bB Accessible Form Labeling http://bit.ly/1aKw83b Harmful Placeholders http://bit.ly/1qNUTOM
Accessibility - A feature you can build
a, a:focus { outline: none; outline: 0; }
Keyboard Strategy ✓ obvious focus states (keep those outlines!) • add tabindex=0 to non-focusable, clickable elements
Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ add tabindex=0 to non-focusable, clickable elements • add equivalents for :hover, hover() & click() ↳ :focus, focusin() & keydown() $modalTrigger.attr('tabindex', '0'); $modalTrigger.on({ 'click': handleTrigger, 'keydown': function (evt) { var keyPressed = evt.keyCode; if (keyPressed === app.keyCodes.ENTER || keyPressed === app.keyCodes.SPACE) { handleTrigger();
Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ add tabindex=0 to non-focusable, clickable elements ✓ add equivalents for :hover, hover() & click() ↳ :focus, focusin() & keydown() • HTML can get you there, FREE! WebAIM http://bit.ly/M24Da2 Tabindex bit.ly/1xY7eCL Keyboard Events http://bit.ly/M241Br
Wanted: Free Events! <span class="btn toggle-trigger" tabindex="0">Click to Toggle</span> ! <a href="#" class="btn toggle-trigger">Click to Toggle</a> ! <button type="button" class="toggle-trigger">Click to Toggle</ button> Use the button element http://bit.ly/1efaOO1 Links aren’t buttons http://bit.ly/1efaT4o
! • opened modal window? onModalOpen = function($modalWrapper) { $modalWrapper.attr('tabindex', '-1').focus(); }; Focus Management • Focus follows the user… focus()
• Focus follows the user… • opened modal window? • scrolled viewport? • transitioned to new view? focus() Focus Management focus() focus()
• Focus follows the user… • opened modal window? • scrolled viewport? • transitioned to new view? • closed modal window? freakOut() Focus Management
! $modalTrigger.on('click', function(e){ var $modal, modalTrigger = e.currentTarget; ! // modal logic here ! // save trigger elem so on modalClose it gets focus $modal.data('trigger', modalTrigger); }); ! handleModalClose = function() { var newFocusElem = $modal.data('trigger'); ! // focus returns to the element that triggered the modal $(newFocusElem).focus(); ! // remove the trigger, might be different next time $modal.removeData('trigger'); }; http://codepen.io/mpiotrowicz/full/Juocl/
Have an exit strategy mousetrap Photograph by Sheba_Also licensed under Creative Commons
boldly go... The SCREEN READER
TRY ONE!! How else can you expect to build for one? NVDA VoiceOver TalkBack JAWS
How do they work? • announce generated HTML in source order
• Use keyboard to navigate and find content • Highly customizable Screen reader 101 ! • 97.6% of screen reader users have JS enabled!1 1 - WebAIM Survey http://bit.ly/1nqd4fp
HTML COUNTS! • Shortcuts drill down to headings, landmarks, lists, links, etc
• Do your main content areas have headings? • Are they descriptive? • Do they follow a hierarchy? (h1 >> h6) Headings Document Outline http://bit.ly/1ef9ScA The Section Element http://bit.ly/1ef9TNN Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx H1 Blog H2 Recent Articles H3 Article Title H3 Article Title H3 Article Title H2 About Me H3 Contact Me H3 Footer Title • Main way screen reader users navigate
• img with empty alt attribute alt="" SR’s ignore... • :before content, :after content* (sort of) • display: none; • visibility: hidden; * in most cases, so assume it won’t be announced Accessible Icon Fonts http://bit.ly/1efabUP .icon-star:before { content: “★”; } • keep in mind for icons and icon fonts! • or just use SVG
• content “hidden” with opacity, z-index, height • off-screen positioning (text-indent, top, left) .sr-only, .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } * as seen in HTML5 BP, Twitter Bootstrap, etc. WebAIM Invisible Content http://bit.ly/1efaij8 • CSS clipping* SR’s won’t ignore
Beyond the basics There’s gotta be more to screen readers than just that, right?
Accessibility - A feature you can build
• Applied directly to HTML ! • Does not affect styles or non-SR behaviour • Roles, states & properties • Semantic information and better interactions for screen readers ARIA • Part of HTML5 spec HTML5 Spec (W3C) http://bit.ly/1aKxXx5 ARIA Spec (W3C) http://bit.ly/1aKya3f
Roles • Create new semantic meaning for elements via “role-” attribute • Once set, they don’t change <nav role="navigation"> ! <article role="article"> ! <div role="tablist"> ! <div role="combobox">
Landmark Roles Define top-level page sections for easy navigation ! •main •banner •navigation •search •complimentary •contentinfo •form Role
Landmark Roles Define top-level page sections for easy navigation ! •main ........ <main> •banner ........ <header> •navigation ........ <nav> •search ........ <form> (search form) •complimentary ........ <aside> •contentinfo ........ <footer> •form Role HTML 5 Using Landmarks http://bit.ly/1aKyuyQ WebAIM Landmarks http://bit.ly/1aKytem Support for HTML5 as landmarks http://bit.ly/LVR8YX
Include all content in a landmark Elements using landmark roles role="banner" role="navigation" role="main"
Widget Roles Semantic meaning to your custom components •tooltip •slider •dialog •tab •progressbar •combobox •menu •alert .. and many more! http://www.w3.org/TR/wai-aria/roles#widget_roles
ul class="tab-controls"> <li> <a href="#Tab1">Panel 1</a> </li> <li> <a href="#Tab2" class="current-item">Panel 2</a> </li> <li> <a href="#Tab3">Panel 3</a> </li> </ul> <div id="TabContainer"> <div class="tab-panel" id="Tab1"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab2"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab3"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> ??? <ul class="tab-controls" role="tablist"> <li> <a href="#Tab1" class="current-item" role="tab">Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id="Tab1" role="tab-panel"> http://codepen.io/mpiotrowicz/full/gocmu/
• Describe relationships between content & between user interactions • updated via JS on UI changes • attributes start with “aria-” prefix States & Properties
<ul class="tab-controls"> <li> <a href="#Tab1">Panel 1</a> </li> <li> <a href="#Tab2" class="current-item">Panel 2</a> </li> <li> <a href="#Tab3">Panel 3</a> </li> </ul> <div id="TabContainer"> <div class="tab-panel" id="Tab1"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab2"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab3"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> <ul class="tab-controls" role="tablist"> <li> <a href="#first-tab" class="current- item" role="tab">Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id="first-tab" role="tab-panel"> <ul class="tab-controls" role="tablist"> <li> <a href=“#Tab1" class="current-item" role="tab" aria- selected="true" aria-expanded="true" aria-controls="Tab1" >Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id=“Tab1" aria-hidden=“false" role=“tab- panel"> http://codepen.io/mpiotrowicz/full/gocmu/
Content Relationships • Semantically link labels to content or add them when missing • aria-labelledby • aria-describedby • aria-label } text-element ID’s, comma-separated string of label text
Content Relationships <section aria-labelledby="HeadingAbout"> <h1 id="HeadingAbout">About Potato Chips</h1> <p>.... Make the most of landmarks http://bit.ly/M1TFSb
Content Relationships <nav role="navigation" aria-label="Chip Section Navigation"> <ul> <li> <a href="/types">Flavors</a> </li>
<label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Content Relationships
<label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions
<label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" aria-invalid="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions
<label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" aria-invalid="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions aria-pressed aria-selected aria-checked aria-disabled aria-expanded aria-controls aria-haspopup aria-valuemax aria-valuemin aria-multiselectable aria-owns aria-live http://www.w3.org/TR/wai-aria/states_and_properties
It's just HTML! .elem[aria-hidden = "false"] { display: block; } ! .elem[aria-invalid ="true"] { background: red; } ! .elem[aria-selected = "true"] { border: green; } The more you know
Accessibility - A feature you can build
Putting it all together • A11y Project Patterns http://a11yproject.com/patterns/ • Tab Example - http://codepen.io/mpiotrowicz/full/gocmu/ • Practical ARIA Examples http://bit.ly/1bhMqBg • HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ • jQueryUI https://jqueryui.com/ • Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy • Accessible Web Components http://bit.ly/1iMwBiG
Using ARIA Wisely • ARIA is a bridge, not a replacement. • USE plain HTML if you can • Not magic and makes no promises • Events, focus management, keyboard support, and meaningful structure is still up to you • Only way to know for sure... TEST
ARIA Resources Getting Started with ARIA http://a11yproject.com/posts/getting-started-aria/ The WAI forward http://www.smashingmagazine.com/2014/07/09/the-wai-forward/ W3C Intro http://www.w3.org/TR/wai-aria-primer/ W3C Design Patterns http://www.w3.org/TR/wai-aria-practices/ W3C Supporting Info for developers http://www.w3.org/TR/aria-in-html/ WEBAIM Introduction http://webaim.org/techniques/aria/
Testing
Automated Tools • Accessibility Dev Tools (Chrome) http://bit.ly/1fW0W0A • Web Dev Toolbar (Chrome & FF) http://bit.ly/1dA2JmY • WebAIM WAVE (FF) http://wave.webaim.org/toolbar/ • Quail Project quailjs.org • TenonIO - http://tenon.io/
Accessibility - A feature you can build
Manual Testing • disable all images • test with just a keyboard • load it in a screen reader • load it in another screen reader 10 Tips anyone can use http://bit.ly/1efaA9N 6 Tests anyone can do http://bit.ly/1efaC1c Does your page make sense? Is it usable ?
Unsolicited Advice • Start small, there’s still a big impact • Prioritize areas/pages • main navigation? • contact us form? • homepage? • Document as you go
Final Thoughts
What I’ve learned • Bake it in, don’t tack it on • Awesome and helpful community • You may find it hard to stop
Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
Thanks! ! Questions? @monsika
More Resources
More Resources General Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF The Accessibility Tree - http://bit.ly/1kzPmO6 Mozilla Dev Network ARIA http://mzl.la/M6u9ez Screen Readers WebAIM Screen Reader Testing http://bit.ly/M6sLIH Videos of Screen Readers In Use http://bit.ly/M6sR39 How browsers interact with screen readers http://bit.ly/M6sUfi NVDA resources WebAIM NVDA http://bit.ly/M6sZj5 WebAIM NVDA Shortcuts http://bit.ly/M6t0n2 Using NVDA and FF to test pages http://bit.ly/M6t6Lu Installing NVDA in a VM http://bit.ly/M6t8D4 VoiceOver resources WebAIM VoiceOver http://bit.ly/M6tbyS Apple VoiceOver User Guide http://bit.ly/M6tolE Apple Developer Accessibility Guide http://bit.ly/M6ttpe JAWS resources WebAIM JAWS http://bit.ly/M6tw4D WebAIM JAWS Shortcuts http://bit.ly/M6sBRM
Community & Blogs #a11y @webaim @a11yproject @paciellogroup ! Weekly Mailer - http://bit.ly/1zO7aIC www.a11yproject.com www.webaim.org www.webaxe.org ! an a11y meetup near you! http://bit.ly/1bhN3dW

More Related Content

PDF
Web Accessibility - A feature you can build
Monika Piotrowicz
 
PDF
a11yTO - Web Accessibility for Developers
Monika Piotrowicz
 
PPTX
WCAG
PurnimaAgarwal6
 
PDF
Building & Scaling a Front End Practice & Team
Monika Piotrowicz
 
PPTX
Web Standards And Protocols
Steven Cahill
 
PDF
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
PPT
Accessible & Usable Web Forms. Your How To Guide!
Rabab Gomaa
 
PDF
What is jQuery?
tina3reese7
 
Web Accessibility - A feature you can build
Monika Piotrowicz
 
a11yTO - Web Accessibility for Developers
Monika Piotrowicz
 
WCAG
PurnimaAgarwal6
 
Building & Scaling a Front End Practice & Team
Monika Piotrowicz
 
Web Standards And Protocols
Steven Cahill
 
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
Accessible & Usable Web Forms. Your How To Guide!
Rabab Gomaa
 
What is jQuery?
tina3reese7
 

What's hot (20)

PPTX
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
PDF
TPR4
tutorialsruby
 
PDF
10 Simple Rules for Making My Site Accessible
Helena Zubkow
 
PDF
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
PPTX
Responsive Design Overview for UB CIT
Adrian Roselli
 
PDF
Keyboard and Interaction Accessibility Techniques
Jared Smith
 
PDF
State of jQuery '09
jeresig
 
PDF
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
PDF
Front end development best practices
Karolina Coates
 
PDF
jQueryMobile Jump Start
Haim Michael
 
PDF
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
PPTX
Building jQuery Mobile Web Apps
Operation Mobile
 
PDF
HTML CSS JavaScript jQuery Training
ubshreenath
 
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
PDF
Accessibility in pattern libraries
Russ Weakley
 
PDF
Responsive & Responsible Web Design in DNN
gravityworksdd
 
PDF
HTML5 and the dawn of rich mobile web applications
James Pearce
 
PPTX
Introduction to jquery mobile with Phonegap
Rakesh Jha
 
PPT
Mobile Information Architecture
Christian Crumlish
 
PDF
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
TPR4
tutorialsruby
 
10 Simple Rules for Making My Site Accessible
Helena Zubkow
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
Responsive Design Overview for UB CIT
Adrian Roselli
 
Keyboard and Interaction Accessibility Techniques
Jared Smith
 
State of jQuery '09
jeresig
 
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
Front end development best practices
Karolina Coates
 
jQueryMobile Jump Start
Haim Michael
 
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Building jQuery Mobile Web Apps
Operation Mobile
 
HTML CSS JavaScript jQuery Training
ubshreenath
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Accessibility in pattern libraries
Russ Weakley
 
Responsive & Responsible Web Design in DNN
gravityworksdd
 
HTML5 and the dawn of rich mobile web applications
James Pearce
 
Introduction to jquery mobile with Phonegap
Rakesh Jha
 
Mobile Information Architecture
Christian Crumlish
 
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Ad

Viewers also liked (11)

PDF
Images of Rizzle Kicks live in Brighton
Gary Marlowe
 
PPTX
What do the top 60 non fiction books of all time say about average sentence l...
AROSA Consultancy and Training P/L
 
PDF
Images of the Spirit of Ecstacy at 100
Gary Marlowe
 
DOCX
Resume
Donga Jayesh
 
PDF
How and Why We Run Internal Hackdays
Melinda Seckington
 
PPTX
Elit 48 c class 3 post qhq for 2016
jordanlachance
 
DOC
Kalyan update Resume
Kalyan Kumar SLNR
 
PDF
Learning game, gamification, wtf?
Laurent Auneau
 
PDF
How to succeed at hiring without really trying
Melinda Seckington
 
PDF
The 1337 Playbook - How Romania's Gamedevs Will Win The Future
Mihai Pohontu
 
PDF
Building a product content strategy practice at Shopify
Alaine Mackenzie
 
Images of Rizzle Kicks live in Brighton
Gary Marlowe
 
What do the top 60 non fiction books of all time say about average sentence l...
AROSA Consultancy and Training P/L
 
Images of the Spirit of Ecstacy at 100
Gary Marlowe
 
Resume
Donga Jayesh
 
How and Why We Run Internal Hackdays
Melinda Seckington
 
Elit 48 c class 3 post qhq for 2016
jordanlachance
 
Kalyan update Resume
Kalyan Kumar SLNR
 
Learning game, gamification, wtf?
Laurent Auneau
 
How to succeed at hiring without really trying
Melinda Seckington
 
The 1337 Playbook - How Romania's Gamedevs Will Win The Future
Mihai Pohontu
 
Building a product content strategy practice at Shopify
Alaine Mackenzie
 
Ad

Similar to Accessibility - A feature you can build (20)

PDF
Accessibility - A feature you can build
Monika Piotrowicz
 
PPTX
How you can start building accessible websites today (... and why!)
nrasul
 
PPTX
Workflow Essentials for Web Development
Xavier Porter
 
PPTX
Accessibility and universal usability
Sarah Hudson
 
PDF
P.S. I love you
Oleksandr Strikha
 
PDF
Four Principles of Accessibility UK Version
Homer Gaines
 
PDF
Building An Accessible Site from the Ground Up
Russell Heimlich
 
PPTX
Lit 20170306
Scott Williams
 
PPTX
Website development accessibility
Ilesh Mistry
 
PPSX
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Raj Lal
 
PDF
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
GreeceJS
 
PPTX
A Half Day Workshop on Building Accessible Websites For People With Disabilities
Aayush Shrestha
 
PPTX
A Primer on Web Accessibility for Teams
Mikey Ilagan
 
PPTX
HTML5 Accessibility
bgibson
 
PPTX
Web accessibility
Afif Alfiano
 
PDF
How Accessibility Made Me a Better Developer
Billy Gregory
 
PDF
Building a better, accessible web
Matt Stow
 
PPTX
Introduction to accessibility
Joseph McLarty
 
KEY
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
PDF
Architecting a Futuristic MODX Manager with HTML5
Jp DeVries
 
Accessibility - A feature you can build
Monika Piotrowicz
 
How you can start building accessible websites today (... and why!)
nrasul
 
Workflow Essentials for Web Development
Xavier Porter
 
Accessibility and universal usability
Sarah Hudson
 
P.S. I love you
Oleksandr Strikha
 
Four Principles of Accessibility UK Version
Homer Gaines
 
Building An Accessible Site from the Ground Up
Russell Heimlich
 
Lit 20170306
Scott Williams
 
Website development accessibility
Ilesh Mistry
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Raj Lal
 
Modern web development and accessibility (Christina Papadimitriou, Nadia Mark...
GreeceJS
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
Aayush Shrestha
 
A Primer on Web Accessibility for Teams
Mikey Ilagan
 
HTML5 Accessibility
bgibson
 
Web accessibility
Afif Alfiano
 
How Accessibility Made Me a Better Developer
Billy Gregory
 
Building a better, accessible web
Matt Stow
 
Introduction to accessibility
Joseph McLarty
 
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
Architecting a Futuristic MODX Manager with HTML5
Jp DeVries
 

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
A Presentation on Artificial Intelligence
memembruh336
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 

Accessibility - A feature you can build

  • 1. Web Accessibility (a11y) A feature you can build MidwestJS - Aug 14 Monika Piotrowicz (@monsika)
  • 2. Monika Piotrowicz Front End Web Dev Lead Shopify ! @monsika @shopify
  • 3. I’m just... A regular Front End Developer... ! ! !
  • 4. And isn’t this… A JavaScript Conference?! ! ! !
  • 5. So how’d I get here? A short story, starring WCAG 2.0 AA ! ! !
  • 6. Today • Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
  • 7. Web Accessibility • “When sites are correctly designed, developed and edited, all users can have equal access to information and functionality” - Wikipedia • “Able to be easily obtained or used; easily understood or appreciated” - Oxford Dictionary • Accessibility ~ Usability • All people can use an application, and it should be easy to use for all people;
  • 8. Accessibility by the #’s rough 1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011 http://1.usa.gov/M6tObC (under 65/over 65) 2 - Range worldwide prevalence of red-green color deficiency among men, 2012 http://1.usa.gov/M6tKsz Group Population Vision Problems 3-10% Colorblindness 4-8% Physical Functioning 8% Cognitive Difficulty 6% Hearing Difficulty 3-11% Assistive Tools • screen readers • screen magnifiers • keyboard-only • braille display • bumped font size
  • 10. Go!
  • 14. First Steps • clear visuals with fallbacks for imagery • well-functioning forms • keyboard interactions
  • 16. Visual Considerations • start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp
  • 17. Give yourself a color audit… and win!
  • 18. Visual Considerations ✓start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp • don’t rely on colour alone • add legends and texture or symbols
  • 20. Visual Considerations ✓start with a good font size & high contrast • Contrast Checker Tool - contrast-finder.tanaguru.com • Chrome Plugin - http://bit.ly/1ljQvFF • Accessible colour palette how-to http://bit.ly/1fnbmJp ✓don’t rely on colour alone • add legends and texture or symbols • all images have a meaningful alt attribute • W3C How to write Alt Text http://bit.ly/1aKwIOg • More from A List Apart http://bit.ly/1aKwRkI
  • 22. ✓ Every form field includes a real label <label for="[INPUT ID]"> ✓ Placeholders don’t count ✓ Labels can include help, required, error text • Provide meaningful message and action on form error WebAIM Forms http://bit.ly/1aKw2bM Harmful Placeholders http://bit.ly/1qNUTOM WebAIM Validation http://bit.ly/1aKw6bB Accessible Form Labeling http://bit.ly/1aKw83b Forms
  • 23. <label for="InputFirstName"> <span class="txt-label">First Name *</span> <span class="txt-error">Required, please provide your first name</span> </label> <input type="text" id=“InputFirstName" required /> WebAIM Forms http://bit.ly/1aKw2bM WebAIM Validation http://bit.ly/1aKw6bB Accessible Form Labeling http://bit.ly/1aKw83b Harmful Placeholders http://bit.ly/1qNUTOM
  • 26. Keyboard Strategy ✓ obvious focus states (keep those outlines!) • add tabindex=0 to non-focusable, clickable elements
  • 27. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ add tabindex=0 to non-focusable, clickable elements • add equivalents for :hover, hover() & click() ↳ :focus, focusin() & keydown() $modalTrigger.attr('tabindex', '0'); $modalTrigger.on({ 'click': handleTrigger, 'keydown': function (evt) { var keyPressed = evt.keyCode; if (keyPressed === app.keyCodes.ENTER || keyPressed === app.keyCodes.SPACE) { handleTrigger();
  • 28. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ add tabindex=0 to non-focusable, clickable elements ✓ add equivalents for :hover, hover() & click() ↳ :focus, focusin() & keydown() • HTML can get you there, FREE! WebAIM http://bit.ly/M24Da2 Tabindex bit.ly/1xY7eCL Keyboard Events http://bit.ly/M241Br
  • 29. Wanted: Free Events! <span class="btn toggle-trigger" tabindex="0">Click to Toggle</span> ! <a href="#" class="btn toggle-trigger">Click to Toggle</a> ! <button type="button" class="toggle-trigger">Click to Toggle</ button> Use the button element http://bit.ly/1efaOO1 Links aren’t buttons http://bit.ly/1efaT4o
  • 30. ! • opened modal window? onModalOpen = function($modalWrapper) { $modalWrapper.attr('tabindex', '-1').focus(); }; Focus Management • Focus follows the user… focus()
  • 31. • Focus follows the user… • opened modal window? • scrolled viewport? • transitioned to new view? focus() Focus Management focus() focus()
  • 32. • Focus follows the user… • opened modal window? • scrolled viewport? • transitioned to new view? • closed modal window? freakOut() Focus Management
  • 33. ! $modalTrigger.on('click', function(e){ var $modal, modalTrigger = e.currentTarget; ! // modal logic here ! // save trigger elem so on modalClose it gets focus $modal.data('trigger', modalTrigger); }); ! handleModalClose = function() { var newFocusElem = $modal.data('trigger'); ! // focus returns to the element that triggered the modal $(newFocusElem).focus(); ! // remove the trigger, might be different next time $modal.removeData('trigger'); }; http://codepen.io/mpiotrowicz/full/Juocl/
  • 34. Have an exit strategy mousetrap Photograph by Sheba_Also licensed under Creative Commons
  • 36. TRY ONE!! How else can you expect to build for one? NVDA VoiceOver TalkBack JAWS
  • 37. How do they work? • announce generated HTML in source order
  • 38. • Use keyboard to navigate and find content • Highly customizable Screen reader 101 ! • 97.6% of screen reader users have JS enabled!1 1 - WebAIM Survey http://bit.ly/1nqd4fp
  • 39. HTML COUNTS! • Shortcuts drill down to headings, landmarks, lists, links, etc
  • 40. • Do your main content areas have headings? • Are they descriptive? • Do they follow a hierarchy? (h1 >> h6) Headings Document Outline http://bit.ly/1ef9ScA The Section Element http://bit.ly/1ef9TNN Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx H1 Blog H2 Recent Articles H3 Article Title H3 Article Title H3 Article Title H2 About Me H3 Contact Me H3 Footer Title • Main way screen reader users navigate
  • 41. • img with empty alt attribute alt="" SR’s ignore... • :before content, :after content* (sort of) • display: none; • visibility: hidden; * in most cases, so assume it won’t be announced Accessible Icon Fonts http://bit.ly/1efabUP .icon-star:before { content: “★”; } • keep in mind for icons and icon fonts! • or just use SVG
  • 42. • content “hidden” with opacity, z-index, height • off-screen positioning (text-indent, top, left) .sr-only, .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } * as seen in HTML5 BP, Twitter Bootstrap, etc. WebAIM Invisible Content http://bit.ly/1efaij8 • CSS clipping* SR’s won’t ignore
  • 43. Beyond the basics There’s gotta be more to screen readers than just that, right?
  • 45. • Applied directly to HTML ! • Does not affect styles or non-SR behaviour • Roles, states & properties • Semantic information and better interactions for screen readers ARIA • Part of HTML5 spec HTML5 Spec (W3C) http://bit.ly/1aKxXx5 ARIA Spec (W3C) http://bit.ly/1aKya3f
  • 46. Roles • Create new semantic meaning for elements via “role-” attribute • Once set, they don’t change <nav role="navigation"> ! <article role="article"> ! <div role="tablist"> ! <div role="combobox">
  • 47. Landmark Roles Define top-level page sections for easy navigation ! •main •banner •navigation •search •complimentary •contentinfo •form Role
  • 48. Landmark Roles Define top-level page sections for easy navigation ! •main ........ <main> •banner ........ <header> •navigation ........ <nav> •search ........ <form> (search form) •complimentary ........ <aside> •contentinfo ........ <footer> •form Role HTML 5 Using Landmarks http://bit.ly/1aKyuyQ WebAIM Landmarks http://bit.ly/1aKytem Support for HTML5 as landmarks http://bit.ly/LVR8YX
  • 49. Include all content in a landmark Elements using landmark roles role="banner" role="navigation" role="main"
  • 50. Widget Roles Semantic meaning to your custom components •tooltip •slider •dialog •tab •progressbar •combobox •menu •alert .. and many more! http://www.w3.org/TR/wai-aria/roles#widget_roles
  • 51. ul class="tab-controls"> <li> <a href="#Tab1">Panel 1</a> </li> <li> <a href="#Tab2" class="current-item">Panel 2</a> </li> <li> <a href="#Tab3">Panel 3</a> </li> </ul> <div id="TabContainer"> <div class="tab-panel" id="Tab1"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab2"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab3"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> ??? <ul class="tab-controls" role="tablist"> <li> <a href="#Tab1" class="current-item" role="tab">Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id="Tab1" role="tab-panel"> http://codepen.io/mpiotrowicz/full/gocmu/
  • 52. • Describe relationships between content & between user interactions • updated via JS on UI changes • attributes start with “aria-” prefix States & Properties
  • 53. <ul class="tab-controls"> <li> <a href="#Tab1">Panel 1</a> </li> <li> <a href="#Tab2" class="current-item">Panel 2</a> </li> <li> <a href="#Tab3">Panel 3</a> </li> </ul> <div id="TabContainer"> <div class="tab-panel" id="Tab1"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab2"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="Tab3"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> <ul class="tab-controls" role="tablist"> <li> <a href="#first-tab" class="current- item" role="tab">Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id="first-tab" role="tab-panel"> <ul class="tab-controls" role="tablist"> <li> <a href=“#Tab1" class="current-item" role="tab" aria- selected="true" aria-expanded="true" aria-controls="Tab1" >Panel 1</a> ! <div id="tab-container"> <div class="tab-panel" id=“Tab1" aria-hidden=“false" role=“tab- panel"> http://codepen.io/mpiotrowicz/full/gocmu/
  • 54. Content Relationships • Semantically link labels to content or add them when missing • aria-labelledby • aria-describedby • aria-label } text-element ID’s, comma-separated string of label text
  • 55. Content Relationships <section aria-labelledby="HeadingAbout"> <h1 id="HeadingAbout">About Potato Chips</h1> <p>.... Make the most of landmarks http://bit.ly/M1TFSb
  • 56. Content Relationships <nav role="navigation" aria-label="Chip Section Navigation"> <ul> <li> <a href="/types">Flavors</a> </li>
  • 57. <label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Content Relationships
  • 58. <label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions
  • 59. <label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" aria-invalid="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions
  • 60. <label for="InputPhoneNumber">Phone Number</label> <input aria-describedby="PhoneHelpText" aria-required="true" aria-invalid="true" id="InputPhoneNumber"> <span id="PhoneHelpText"> eg. 555-555-5555. We will use this number only in case of emergency </span> Descriptions aria-pressed aria-selected aria-checked aria-disabled aria-expanded aria-controls aria-haspopup aria-valuemax aria-valuemin aria-multiselectable aria-owns aria-live http://www.w3.org/TR/wai-aria/states_and_properties
  • 61. It's just HTML! .elem[aria-hidden = "false"] { display: block; } ! .elem[aria-invalid ="true"] { background: red; } ! .elem[aria-selected = "true"] { border: green; } The more you know
  • 63. Putting it all together • A11y Project Patterns http://a11yproject.com/patterns/ • Tab Example - http://codepen.io/mpiotrowicz/full/gocmu/ • Practical ARIA Examples http://bit.ly/1bhMqBg • HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ • jQueryUI https://jqueryui.com/ • Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy • Accessible Web Components http://bit.ly/1iMwBiG
  • 64. Using ARIA Wisely • ARIA is a bridge, not a replacement. • USE plain HTML if you can • Not magic and makes no promises • Events, focus management, keyboard support, and meaningful structure is still up to you • Only way to know for sure... TEST
  • 65. ARIA Resources Getting Started with ARIA http://a11yproject.com/posts/getting-started-aria/ The WAI forward http://www.smashingmagazine.com/2014/07/09/the-wai-forward/ W3C Intro http://www.w3.org/TR/wai-aria-primer/ W3C Design Patterns http://www.w3.org/TR/wai-aria-practices/ W3C Supporting Info for developers http://www.w3.org/TR/aria-in-html/ WEBAIM Introduction http://webaim.org/techniques/aria/
  • 67. Automated Tools • Accessibility Dev Tools (Chrome) http://bit.ly/1fW0W0A • Web Dev Toolbar (Chrome & FF) http://bit.ly/1dA2JmY • WebAIM WAVE (FF) http://wave.webaim.org/toolbar/ • Quail Project quailjs.org • TenonIO - http://tenon.io/
  • 69. Manual Testing • disable all images • test with just a keyboard • load it in a screen reader • load it in another screen reader 10 Tips anyone can use http://bit.ly/1efaA9N 6 Tests anyone can do http://bit.ly/1efaC1c Does your page make sense? Is it usable ?
  • 70. Unsolicited Advice • Start small, there’s still a big impact • Prioritize areas/pages • main navigation? • contact us form? • homepage? • Document as you go
  • 72. What I’ve learned • Bake it in, don’t tack it on • Awesome and helpful community • You may find it hard to stop
  • 73. Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
  • 76. More Resources General Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF The Accessibility Tree - http://bit.ly/1kzPmO6 Mozilla Dev Network ARIA http://mzl.la/M6u9ez Screen Readers WebAIM Screen Reader Testing http://bit.ly/M6sLIH Videos of Screen Readers In Use http://bit.ly/M6sR39 How browsers interact with screen readers http://bit.ly/M6sUfi NVDA resources WebAIM NVDA http://bit.ly/M6sZj5 WebAIM NVDA Shortcuts http://bit.ly/M6t0n2 Using NVDA and FF to test pages http://bit.ly/M6t6Lu Installing NVDA in a VM http://bit.ly/M6t8D4 VoiceOver resources WebAIM VoiceOver http://bit.ly/M6tbyS Apple VoiceOver User Guide http://bit.ly/M6tolE Apple Developer Accessibility Guide http://bit.ly/M6ttpe JAWS resources WebAIM JAWS http://bit.ly/M6tw4D WebAIM JAWS Shortcuts http://bit.ly/M6sBRM
  • 77. Community & Blogs #a11y @webaim @a11yproject @paciellogroup ! Weekly Mailer - http://bit.ly/1zO7aIC www.a11yproject.com www.webaim.org www.webaxe.org ! an a11y meetup near you! http://bit.ly/1bhN3dW