A brief presentation on what accessibility (a11y) is on the web, why its important, benefits of building accessible experiences for users, and how to plan for a project with an a11y engagement. Resources include many tools for evaluating and auditing a site's accessibility level.

1. Web Accessibility
Showing your users you care about them

2. Who Am I?
Todd Milliken
Web Developer at emagine
@tweetinwittodd
linkedin.com/in/todd-milliken/

3. What is a11y?
• A(ccessibilit)y
• Encompasses people with disabilities
• Encompasses people with temporary disabilities
• Encompasses people without disabilities

5. Why a11y?
Business Reasons
• Reduce maintenance costs
• Increase audience reach
• “A ramp for a building can work for everyone”
• Monetary benefits
• Inherently goes hand-in-hand with best practices
• SEO
• Mobile First and Responsive design
• Designing for older or younger users

6. Why a11y?
Moral Reasons
• According to the UN, it’s a basic human right
• If you don’t care about your users, they won’t care about
you
• Inclusivity broadens your reach and connects you to more
users

8. Benefits of a11y
• Reflects positively on brand values
• High user engagement
• Happy users
• All the benefits from best practices (SEO, Mobile First,
Responsive Design, etc)

9. Disadvantages of a11y
• Reflects negatively on brand values if absent or done
poorly
• Excludes potential users, lost revenue
• Increases time spent on project to add a11y support

10. Planning for a11y
• Identify level of compliance you need (A, AA, vs AAA)
• Allow for extra time.
• Expect a brief learning curve for each team member.
• Developers: Semantic markup, ARIA, testing tools
• Designers: Color contrast, typography
• Project Managers: Section 508, A, AA, and AAA compliance, legal
requirements
• Content Creators: Alt text, links, heading hierarchy
• More functionality = more time spent designing, developing, testing.

11. Implementing a11y
• Track time and progress. Understand level of effort for future a11y engagements
• Project Managers: Encourage collaboration among team members.
• Developers: Use native HTML5 elements and apply ARIA markup when needed
https://www.24a11y.com/2017/a-developers-guide-to-better-accessibility/
• Content writers: Optimize for SEO, use descriptive headings and unique link text.
• Designers: Use a mobile-first mentality. Solve problems at the lower common
denominator.
• Test early. Build components and test them individually, then grouped into other
parts of the UI. This iterative testing can catch problems early.
• Reduce complexity when possible. More complexity will increase possibility of
accessibility barriers, and extend project.

13. Testing a11y
Use online tools.
• Color Contrast: https://webaim.org/resources/
contrastchecker/
• Siteimprove Accessibility Checker (Chrome Extension)
https://chrome.google.com/webstore/detail/siteimprove-
accessibility/efcfolpjihicnikpmhnmphjhhpiclljc
• WP Plugins
https://make.wordpress.org/accessibility/handbook/
which-tools-can-i-use/wp-accessibility-plugin/
https://wordpress.org/plugins/gravity-forms-wcag-20-
form-fields/

14. Re-use a11y
• Make note of what works and doesn’t work (color contrast,
typography)
• Designers/Developers - create reusable interfaces
• Don’t re-invent the wheel. Lookup accessible patterns
before creating your own.

15. Resources
Articles
• World Wide Web Consortium (W3C)
https://www.w3.org/standards/webdesign/accessibility
• Section 508 and ADA Compliance
https://www.section508.gov/
https://www.ada.gov/websites2_prnt.pdf
• WCAG 2.0 (A, AA, vs AAA requirements)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/
conformance.html
• United Nations Convention on the Rights of Persons with Disabilities
https://www.un.org/development/desa/disabilities/convention-on-
the-rights-of-persons-with-disabilities/article-9-accessibility.html

16. Resources
Tools
• Siteimprove Accessibility Checker (Chrome Extension)
https://chrome.google.com/webstore/detail/siteimprove-accessibility/
efcfolpjihicnikpmhnmphjhhpiclljc
• Wave: Accessibility Evaluation Tool
https://wave.webaim.org/
• WebAim: Color Contrast Tool
https://webaim.org/resources/contrastchecker/
• Choosing Background & Text Colors for your palette.
http://colorsafe.co/
• Patternlab for organizing UI patterns in the application
http://patternlab.io/

17. Resources
For each phase of the project lifecycle
• Project Managers
https://webaccess.its.uiowa.edu/roles/role-project-manager.html
https://www.spotless.co.uk/blog/accessibility-project-managers/
• Designers
https://webaccess.its.uiowa.edu/roles/role-graphic-designer.html
https://webaim.org/resources/designers/
https://webaim.org/blog/wcag-2-0-and-link-colors/ (links and colors)
• Developers
https://webaccess.its.uiowa.edu/roles/role-web-developer.html
https://10up.github.io/wp-component-library/
https://make.wordpress.org/accessibility/handbook/which-tools-can-
i-use/wp-accessibility-plugin/
https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/

18. Resources
Additional resources from the meetup
• Follow Rachel Cherry
https://bamadesigner.com/
https://twitter.com/bamadesigner
• wa11y WordPress plugin - Identifies areas of your site to
improve
https://wordpress.org/plugins/wa11y/
• Spectrum (Chrome Extension) - Simulate color blindness
deficiencies
https://chrome.google.com/webstore/detail/spectrum/
ofclemegkcmilinpcimpjkfhjfgmhieb

19. Questions?
Comments?