how to improve your website’s accessibility without going crazy
TRANSCRIPT
![Page 1: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/1.jpg)
How to Improve Your Website’s Accessibility
Without Going CrazyEric Eggert
[email protected] • yatil W3C/Web Accessibility Initiative
![Page 2: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/2.jpg)
![Page 3: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/3.jpg)
![Page 4: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/4.jpg)
![Page 5: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/5.jpg)
– w3.org/accessibility
The Web is fundamentally designed to work for all people, whatever their hardware, software,
language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of
hearing, movement, sight, and cognitive ability.
![Page 6: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/6.jpg)
Accessibility: Make sure that People with disabilities can effectively interact with the Web
![Page 7: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/7.jpg)
– Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”)
“On the web, every decision I make can have a profound effect on hundreds of thousands (if not millions) of people’s lives. I can make checking into
a flight a breeze, or I can make it a living hell.
That’s a lot of power. And to quote Stan Lee: ‘With great power comes great responsibility.’”
![Page 10: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/10.jpg)
@dstorey
![Page 11: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/11.jpg)
People
Accessibility
Usability
People
![Page 12: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/12.jpg)
users is People
![Page 13: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/13.jpg)
Q: How do People With Disabilities
Use the web?
![Page 14: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/14.jpg)
Browser Web Content
![Page 15: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/15.jpg)
Browser Web Content
Assistive tech
![Page 16: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/16.jpg)
Zoom
![Page 17: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/17.jpg)
Pinch Out by Julie Muckensturm from the Noun Project
![Page 18: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/18.jpg)
![Page 19: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/19.jpg)
Single Switch
![Page 20: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/20.jpg)
Braille
![Page 21: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/21.jpg)
customizations
![Page 22: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/22.jpg)
Captions
![Page 23: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/23.jpg)
Resource: How People with
Disabilities Use the Web
w3.org/WAI/intro/people-use-web/
![Page 24: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/24.jpg)
Q: Accessibility sounds complicated.
![Page 25: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/25.jpg)
Q: How do I start with Accessibility?
![Page 26: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/26.jpg)
Designers Content creators
Developers
![Page 27: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/27.jpg)
![Page 28: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/28.jpg)
![Page 29: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/29.jpg)
![Page 30: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/30.jpg)
![Page 31: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/31.jpg)
![Page 32: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/32.jpg)
Resource: Tips for getting started with web accessibility
w3.org/WAI/gettingstarted/tips/
![Page 33: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/33.jpg)
Q: How do I make sure my website is accessible?
![Page 34: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/34.jpg)
Resource: Web Content
Accessibility Guidelines (WCAG) 2.0
w3.org/TR/WCAG/
![Page 35: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/35.jpg)
Principles: Perceivable
Operable Understandable
Robust
![Page 36: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/36.jpg)
Perceivable: Meaningful Sequence
![Page 37: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/37.jpg)
Perceivable: Text Alternatives
![Page 38: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/38.jpg)
<button> <span class="icon icon-pencil"> </span>
</button>
![Page 39: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/39.jpg)
<button title="Edit"> <span class="icon icon-pencil"> </span>
</button>
![Page 40: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/40.jpg)
<button title="Edit"> <span class="icon icon-pencil-kaput“> </span>
</button>
![Page 41: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/41.jpg)
![Page 42: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/42.jpg)
ImageS
![Page 43: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/43.jpg)
<button> <img src="pencil.png" alt="Edit"> </button>
![Page 44: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/44.jpg)
<button> <img src="pencil.svg" alt="Edit"> </button>
![Page 46: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/46.jpg)
Resource: Web Accessibility
Tutorials
w3.org/WAI/tutorials/
<aside>
![Page 47: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/47.jpg)
Page structure (Draft) Menus (Draft)
images Tables forms
carousels (Draft)
</aside>
![Page 48: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/48.jpg)
Visible text labels
![Page 49: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/49.jpg)
<button> <span class="icon icon-pencil"> </span> Edit
</button>
![Page 50: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/50.jpg)
Perceivable: Color Contrast
![Page 51: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/51.jpg)
Operable: usable with a Keyboard
![Page 52: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/52.jpg)
Operable: Ability to bypass
blocks
![Page 53: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/53.jpg)
Operable: Proper headings
F labels
![Page 54: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/54.jpg)
Understandable: Page language
![Page 55: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/55.jpg)
Understandable: Consistent Navigation
![Page 56: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/56.jpg)
Understandable: Indicate errors
![Page 57: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/57.jpg)
Robust: Compatibility
![Page 58: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/58.jpg)
Q: How do I make sure that the
user experience is accessible?
![Page 59: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/59.jpg)
You achiEve the best results when…
![Page 60: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/60.jpg)
Accessibility is not an afterthought
![Page 61: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/61.jpg)
Smooth use of your product
![Page 62: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/62.jpg)
Everything feels coherent
![Page 63: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/63.jpg)
No compromises
![Page 64: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/64.jpg)
No need to rebuild
![Page 65: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/65.jpg)
Accessibility is an opportunity
![Page 66: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/66.jpg)
Reach more people
![Page 67: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/67.jpg)
makes your web project easy to understand
![Page 68: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/68.jpg)
consistent layout H Navigation
![Page 69: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/69.jpg)
Accessibility is A creative outlet
![Page 70: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/70.jpg)
Produce the best video player UI
![Page 71: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/71.jpg)
Consider the order of the content
![Page 72: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/72.jpg)
Take the available data and do something no one
expects
![Page 73: How to improve your website’s accessibility without going crazy](https://reader034.vdocuments.mx/reader034/viewer/2022042706/588848f91a28ab951c8b49ed/html5/thumbnails/73.jpg)