WordCamp Milano: Web Accessibility, where to start
-
Upload
rian-rietveld -
Category
Technology
-
view
6.272 -
download
0
Transcript of WordCamp Milano: Web Accessibility, where to start
![Page 1: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/1.jpg)
Web Accessibilitywhere to start?
Rian Rietveld
WordPress Engineer @ Human Made
![Page 2: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/2.jpg)
Web Accessibilitywhere to start?
Rian Rietveld
WordPress Engineer @ Human Made
![Page 3: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/3.jpg)
• Project manager
![Page 4: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/4.jpg)
• Project manager
• Information architect
![Page 5: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/5.jpg)
• Project manager
• Information architect
• Designer
![Page 6: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/6.jpg)
• Project manager
• Information architect
• Designer
• Frontend developer
![Page 7: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/7.jpg)
• Project manager
• Information architect
• Designer
• Frontend developer
• Backend developer
![Page 8: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/8.jpg)
• Project manager
• Information architect
• Designer
• Frontend developer
• Backend developer
• Content manager
![Page 9: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/9.jpg)
Everyone is involved
![Page 10: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/10.jpg)
In this talk• what not to do
![Page 11: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/11.jpg)
In this talk• what not to do
• tips for everyone involved
![Page 12: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/12.jpg)
In this talk• what not to do
• tips for everyone involved
• design and code example
![Page 13: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/13.jpg)
In this talk• what not to do
• tips for everyone involved
• design and code example
• but most of all…
![Page 14: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/14.jpg)
Change your point of view!
![Page 15: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/15.jpg)
What not to do
Check the accessibility at the end,
just going before online
![Page 16: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/16.jpg)
What not to do
Add a bunch accessibility plugins
and hope for the best
![Page 17: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/17.jpg)
Not that important
Text enlarger
AAAAAAAAA
![Page 18: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/18.jpg)
![Page 19: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/19.jpg)
![Page 20: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/20.jpg)
![Page 21: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/21.jpg)
Not that important
Read speaker
![Page 22: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/22.jpg)
Browsers get smarter
Users have their own AT
![Page 23: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/23.jpg)
So..What should I do?
![Page 24: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/24.jpg)
You are a high end user but your visitors not
![Page 25: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/25.jpg)
You are a high end user but your visitors not
Don’t create a website for yourself
![Page 26: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/26.jpg)
Start project• include accessibility from the beginning
![Page 27: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/27.jpg)
Start project• include accessibility from the beginning
• train your people and yourself
![Page 28: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/28.jpg)
Start project• include accessibility from the beginning
• train your people and yourself
• it is part of the project, like responsive design
![Page 29: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/29.jpg)
( usability === accessibility )
![Page 30: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/30.jpg)
Think twice about functionality
![Page 31: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/31.jpg)
( good SEO === accessibility )
![Page 32: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/32.jpg)
Designers
![Page 33: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/33.jpg)
Colour contrast
Contrast matters
Contrast matters
Contrast matters
Contrast matters
![Page 34: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/34.jpg)
Colour contrast
webaxe.org/color-contrast-tools/
text: 1 : 4.5 large text: 1: 3.1
![Page 35: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/35.jpg)
Not by colour alone
I'm gonna make you an offer you can't refuse
I'm gonna make you an offer you can't refuse
I'm gonna make you an offer you can't refuse
![Page 36: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/36.jpg)
Sim Daltonism
![Page 37: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/37.jpg)
Gestalt design
Keep together
what belongs together
![Page 38: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/38.jpg)
![Page 39: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/39.jpg)
![Page 40: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/40.jpg)
Coders
![Page 41: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/41.jpg)
Tell a story with HTML5
![Page 42: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/42.jpg)
Headings
• one unique <h1> per view
![Page 43: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/43.jpg)
Headings
• one unique <h1> per view • the rest meaningful
![Page 44: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/44.jpg)
Headings
• one unique <h1> per view • the rest meaningful • do not skip a level
![Page 45: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/45.jpg)
![Page 46: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/46.jpg)
![Page 47: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/47.jpg)
![Page 48: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/48.jpg)
![Page 49: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/49.jpg)
Meaningful link text
![Page 50: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/50.jpg)
![Page 51: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/51.jpg)
![Page 52: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/52.jpg)
![Page 53: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/53.jpg)
![Page 54: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/54.jpg)
![Page 55: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/55.jpg)
![Page 56: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/56.jpg)
<a href=“your-url" class="fa fa-twitter”></a>
![Page 57: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/57.jpg)
<a href=“your-url" class="fa fa-twitter”>Twitter</a>
![Page 58: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/58.jpg)
<a href=“your-url" class="fa fa-twitter”>
<span class=“screen-reader-text“>Twitter</span>
</a>
![Page 59: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/59.jpg)
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden;}
![Page 60: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/60.jpg)
Read more …
<a href=“link-to-post“> Read more
<span class=“screen-reader-text“>about cute kittens</span></a>
![Page 61: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/61.jpg)
<a href=“your-url"> <img src=“your-image-url” alt=“follow me on Twitter /></a>
![Page 62: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/62.jpg)
Use the right elements
![Page 63: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/63.jpg)
"If it's supposed to act like a button, it should be a
button."
Joe Dolson
![Page 64: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/64.jpg)
<div> or <span>is not for a menu toggle
![Page 65: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/65.jpg)
use a<button>
![Page 66: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/66.jpg)
Images
![Page 67: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/67.jpg)
If an image is purely decorative:add it to the CSS as background image
![Page 68: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/68.jpg)
If an image is purelydecorative,and part of the content:add an empty alt
<img src=“img-url” alt=“” />
![Page 69: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/69.jpg)
If an image is givinginformation:use a short describing alt text
<img src=“img-url” alt=“cute kitten” />
![Page 70: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/70.jpg)
Forms
![Page 71: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/71.jpg)
for needs id
<label for=”yourid”>Name</label>
<input name=”name” type=”text” value=”” id=”yourid”>
![Page 72: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/72.jpg)
no positive tab-index
![Page 73: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/73.jpg)
Test software
![Page 75: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/75.jpg)
![Page 76: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/76.jpg)
WAVE
Chrome plugin
or onlinehttp://wave.webaim.org
![Page 77: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/77.jpg)
![Page 78: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/78.jpg)
tenon.io
Automatic reports of your production site
WordPress integration with the plugin Access Monitor
![Page 79: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/79.jpg)
![Page 80: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/80.jpg)
webaim.org
make.wordpress.org/accessibility/handbook
![Page 81: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/81.jpg)
"Inclusive Design Patterns"
by Heydon Pickering
![Page 82: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/82.jpg)
Make it work
before you make it nice
![Page 83: WordCamp Milano: Web Accessibility, where to start](https://reader033.fdocuments.net/reader033/viewer/2022050613/58a0df521a28abeb378b677d/html5/thumbnails/83.jpg)
@rianrietveld