Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web...
Transcript of Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web...
![Page 1: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/1.jpg)
Growing AccessibilityAdvanced Web Accessibility Coding and Testing for Libraries
Katherine LynchSenior Application Developer, University of Pennsylvania Libraries
![Page 2: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/2.jpg)
Web Accessibility
“Web accessibility means that people with disabilities can use the web.”- Tim Berners-Lee
![Page 3: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/3.jpg)
Web Accessibility
Perceivable
Operable
Understandable
Robust
![Page 4: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/4.jpg)
We are all in agreement...
![Page 5: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/5.jpg)
We are all in agreement...
● Equivalent ability to access information and interact with websites and applications for all users is important.
![Page 6: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/6.jpg)
We are all in agreement...
● Equivalent ability to access information and interact with websites and applications for all users is important.
● To truly work toward as equivalent a user experience as possible for all, at minimum baseline web accessibility measures are required.
![Page 7: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/7.jpg)
Best Practices for Coding
![Page 8: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/8.jpg)
Best Practices for Coding
in 5 minutes!
![Page 9: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/9.jpg)
Prioritize the fundamentals
...and execute them flawlessly.
![Page 10: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/10.jpg)
Source: http://www.morguefile.com/archive/display/939534
![Page 11: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/11.jpg)
Prioritize the fundamentals
Image alt text
Lists
Properly ordered headings
<h1>There Can Be Only One</h1>
<h2>There Can Be More Than One Of Me</h2>
<h3>Provided That We Occur in Numeric Order</h3>
<h2>These Are Getting A Little Long For Actual Headings</h2>
![Page 12: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/12.jpg)
Prioritize the fundamentals
Avoid walls o’ text
Be mindful of color contrast
Provide alternatives to rich media
Equivalent text
Captions, transcription
Skip links
Source: http://www.public-domain-image.com/free-images/flora-plants/fruits/apple-pictures/four-red-organic-apples-on-branch-725x544.jpg
![Page 13: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/13.jpg)
Source: http://www.morguefile.com/archive/display/105605
![Page 14: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/14.jpg)
HTML5 Semantic Elements<h1>Blog Posts</h1><p>Short intro text</p><h2>Code4Lib Philadelphia 2016!</h2><div class=”blogpost”> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <div style="float: left;"> <img src="bell.jpg" alt="The Liberty Bell" /> <span>It was smaller in person.</span> </div> <p>It was a great conference and the organizers are awesome!</p></div>
![Page 15: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/15.jpg)
HTML5 Semantic Elements<h1>Blog Posts</h1><p>Short intro text</p>
<h2>Code4Lib Philadelphia 2016!</h2><div class=”blogpost”> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <div style="float: left;"> <img src="bell.jpg" alt="The Liberty Bell" /> <span>It was smaller in person.</span> </div> <p>It was a great conference and the organizers are awesome!</p></div>
![Page 16: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/16.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header> <article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p> </article></section>
![Page 17: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/17.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header> <article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p> </article>
</section>
![Page 18: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/18.jpg)
HTML5 Semantic Elements<section>
<header> <h1>Blog Posts</h1> <p>Short intro text</p>
</header> <article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p> </article></section>
![Page 19: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/19.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header>
<article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p>
</article></section>
![Page 20: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/20.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header> <article>
<header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p> </article></section>
![Page 21: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/21.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header> <article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p>
<figure> <img src="bell.jpg" alt="The Liberty Bell" /> <figcaption>It was smaller in person.</figcaption>
</figure> <p>It was a great conference and the organizers are awesome!</p> </article></section>
![Page 22: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/22.jpg)
HTML5 Semantic Elements<section> <header> <h1>Blog Posts</h1> <p>Short intro text</p> </header> <article> <header><h2>Code4Lib Philadelphia 2016!</h2></header> <p>I went to <a href="http://2016.code4lib.org/">Code4Lib Philadelphia 2016</a> this year and it was a blast!</p> <p>I also managed to do some sightseeing.</p> <figure> <img src="bell.jpg" alt="The Liberty Bell" />
<figcaption>It was smaller in person.</figcaption> </figure> <p>It was a great conference and the organizers are awesome!</p> </article></section>
![Page 23: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/23.jpg)
ARIA
Accessible Rich Internet Applications
Roles States & Properties
![Page 24: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/24.jpg)
ARIA Roles
<div role=“alert”> You have been signed out due to inactivity.</div>
<div role=“status”> Password successfully updated.</div>
![Page 25: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/25.jpg)
ARIA States & Properties
aria-live=”polite” “assertive” “off”
![Page 26: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/26.jpg)
ARIA States & Propertiesaria-relevant=”additions” “deletions” “text” “all”
<div class=“chat_queue” aria-live=“polite” aria-relevant=“additions deletions”> <ul> <li>User 1</li> <li>User 2</li> <li>User 3</li> </ul></div>
![Page 27: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/27.jpg)
ARIA States & Propertiesaria-relevant=”additions” “deletions” “text” “all”
<div class=“chat_queue” aria-live=“polite” aria-relevant=“additions deletions”> <ul> <li>User 1</li> <li>User 2</li> <li>User 3</li> </ul></div>
![Page 28: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/28.jpg)
Prioritizing - Must, Should, Can
What must be done?
What should be done?
Additionally, what can be done?
![Page 29: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/29.jpg)
Accessibility Testing
![Page 30: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/30.jpg)
Accessibility Testing
...also in 5 minutes!
![Page 31: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/31.jpg)
Automated Testing: Validators
WAVE (free) http://wave.webaim.org/
AChecker (free) http://achecker.ca/checker/index.php
Compliance Sheriff ($$) https://www.cryptzone.com/products/content-governance/compliance-sheriff
![Page 32: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/32.jpg)
![Page 33: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/33.jpg)
Automated Testing: Testing Suites
Capybara-Accessible (Rails) https://github.com/Casecommons/capybara-accessible
Robot Framework Accessibility Testing Libraries (Python) https://pypi.python.org/pypi/robotframework-selenium2accessibility/0.2.1
Google Chrome Accessibility Developer Tools https://github.com/GoogleChrome/accessibility-developer-tools
![Page 34: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/34.jpg)
![Page 35: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/35.jpg)
Remember the human aspect
![Page 36: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/36.jpg)
![Page 37: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/37.jpg)
Self-guided testing
Make a list of everything that users MUST be able to perceive, understand, and do on a given test site.
![Page 38: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/38.jpg)
Self-guided testing
Unplug your mouse (or turn it around).
Unlink all stylesheets.
Turn off the monitor and turn on a screen reader. Use the screen reader navigation commands.
Challenge the way you interact with a site.
![Page 39: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/39.jpg)
![Page 40: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/40.jpg)
Advocacy in the community
Lead by example.
Realize that you have a gift to share.
...never stop helping someone!
Embrace continuous improvement.
![Page 41: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/41.jpg)
![Page 43: Growing Accessibility - Code4Lib · 2019. 8. 19. · Growing Accessibility Advanced Web Accessibility Coding and Testing for Libraries Katherine Lynch Senior Application Developer,](https://reader033.fdocuments.us/reader033/viewer/2022052007/601c05869e5b9336022ce9ae/html5/thumbnails/43.jpg)
Web Accessibility Basics
● W3C WAI Web Accessibility Basicshttps://www.w3.org/WAI/EO/wiki/Web_Accessibility_Basics
● WebAIM Intro to Web Accessibilityhttp://webaim.org/intro/
● Web Accessibility Tutorialshttps://www.w3.org/WAI/tutorials/