cmd interaction design - y2 q2 les 7 - accessibility design 1
DESCRIPTION
TRANSCRIPT
![Page 1: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/1.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Toegankelijk ontwerpen (1)
![Page 2: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/2.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Toegankelijkheid is het wegnemen van obstakels die het gebruik van
computers en webdiensten belemmeren.
![Page 3: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/3.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
"The power of the Web is in its universality. Access by everyone regardless of disability
is an essential aspect."
Tim Berners-Lee
![Page 4: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/4.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 5: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/5.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe surft een blinde op websites?
Gebruikt voorleessoftware, toetsenbord en brailleleesregel
Gebruikt geen muis Neemt alleen tekst en audio
waar Scant de pagina op gehoor Vindt houvast in kopregels
en hyperlinks Heeft voorkeur voor
mobiele sites
![Page 6: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/6.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 7: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/7.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 8: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/8.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Gemakkelijk te navigeren?
![Page 9: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/9.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 10: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/10.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 11: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/11.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 12: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/12.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorkeur voor mobiele versie
![Page 13: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/13.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
De ROI van toegankelijkheidWat levert het op?
![Page 14: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/14.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 15: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/15.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 16: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/16.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
3 blinden?
![Page 17: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/17.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 18: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/18.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
55+ 65+
28%
15%
![Page 19: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/19.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 20: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/20.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 21: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/21.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
“Our vision is to create innovative technology that is accessible to everyone
and that adapts to each person's needs. Accessible
technology eliminates barriers for people with disabilities and it enables individuals to take
full advantage of their capabilities.”
http://www.microsoft.com/enable/microsoft/
Creative Capitalism:“There are two great forces of
human nature: self interest and caring for others. We need to combine that in our economic system: making profits and
also improving lives of those who don’t fully benefit from
today’s market forces.”http://youtu.be/Ql-Mtlx31e8
![Page 22: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/22.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 23: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/23.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Gebruiksgemak
Beter participeren in de
maatschappij
Lagere kosten
infrastructuur
Groter bereik(SEO /
mobile)
Goedkoper onderhoud /
beheer
Minder CO2 / energieverbrui
k
People
Planet
Profit
Positief imago /
reputatie
Meer comfort/ zelfstandighei
dAny where, any time, any how
Conversie
Tevreden klanten
Sneller = goedkope
r
Verantwoordelijkheid
![Page 24: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/24.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Drempelvrij
Drempels WegW3C
Webrichtlijnen
Prio 2Accessibility
WCAG
Webrichtlijnen, Drempelvrij?Wegwijs in het lingo
![Page 25: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/25.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Landschap
Web
Content
Accessibility
Guidelines
A
AA
AAA
Drempelvrij
WCAG niveau AA
Webrichtlijnen
![Page 26: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/26.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Webrichtlijnen
• Rijksoverheid• Provincies• Gemeenten• Waterschappen
Drempelvrij
• Alle publieke organisaties (ziekenhuizen, scholen, semi-overheid, nutsbedrijven, enz.)
• Grote thuiswinkels (Wehkamp, Bol.com)
• Maatschappelijk betrokken organisaties
• Organisaties waar ouderen een belangrijke doelgroep zijn
Moreel verplicht voor:Verplicht voor:
![Page 27: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/27.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe maak je sites toegankelijk?De basisprincipes
![Page 28: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/28.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Richtlijnen
www.w3.org/Translations/WCAG20-nl/ www.webrichtlijnen.nl
![Page 29: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/29.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Eerst even installeren
![Page 30: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/30.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 1
Lever een tekstalternatief voor alle niet-tekstuele content
Uitzondering: Decoratieve afbeeldingen
![Page 31: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/31.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alt=“De Amsterdamse grachten lagen vol bootjes met oranje feestvierders”
![Page 32: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/32.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alt=“Foto van Arnold Schwarzenegger”
![Page 33: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/33.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alt=“Doe nu in 2 minuten de Spaartest (advertentie SNS Bank)”
![Page 34: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/34.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 35: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/35.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Logo’s als home-link
<a href=“/” title=“Ga naar homepage shell.nl”>
<img src=“logo.png” alt=“Shell logo” />
</a>
![Page 36: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/36.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 37: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/37.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alt=“”
![Page 38: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/38.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zelf testen
![Page 39: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/39.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 2
Lever alternatieven voor video en audio.
Ondertiteling Audiobeschrijving Transcriptie
![Page 40: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/40.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.rijksoverheid.nl/documenten-en-publicaties/videos/2011/04/19/wekelijks-gesprek-rtlz-19-april-2011.html
![Page 41: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/41.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 3
Geef informatie betekenisvolle opmaak. Maak het niet afhankelijk van zintuigen.
Geen html-elementen voor visuele trucjes
Niet alleen kleur, vorm, omvang, locatie of geluid
![Page 42: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/42.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 43: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/43.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 44: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/44.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 45: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/45.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 46: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/46.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 47: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/47.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat communiceert een tag cloud?
![Page 48: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/48.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
CategorieënSorteer op alfabet /
populariteit.
• access (2)
• aspects (2)
• audience (5)
• become (4)
• Blogs (10)
• Enz.
![Page 49: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/49.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
<p> <strong> <font size=4> De paginatitel </font> </strong> </p>
<p> <strong class=“groot”> Paragraaftitel </strong> <br/>
Alinea in de paragraaf </p>
<p> <strong> Subparagrafen komen ook voor </strong> <br/>
Alinea in de subparagraaf </p>
FOUT
Kopregels
![Page 50: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/50.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
<h1> De paginatitel </h1>
<h2> Paragraaftitel </h2>
<p> Alinea in de paragraaf </p>
<h3> Subparagrafen komen ook voor </h3>
<p> Alinea in de subparagraaf </p>
GOED
Kopregels
![Page 51: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/51.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Kolommen
![Page 52: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/52.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Geen tabellen voor presentatie
<table>
</table>
FOUT
![Page 53: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/53.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Tabellen
<th scope=“col”> product </th>
<th scope=“col”> maart </th>
<th scope=“col”> april </th>
<th scope=“row”> soep </th>
<td> 240 </td> <td> 287 </td>
<th scope=“row”> patat </th>
<td> 582 </td> <td> 479 </td>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<caption> Afzet kantineproducten in maart en april </caption>
![Page 54: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/54.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 4
Maak het gemakkelijk om content beter te zien en horen.
Genoeg contrast tussen tekst en achtergrond
Tekst schalen
![Page 55: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/55.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 56: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/56.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 57: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/57.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 58: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/58.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 59: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/59.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 60: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/60.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 61: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/61.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Richtlijnen
1.4.3 Zorg voor minimaal contrast tussen tekstkleur en achtergrondkleur van 4,5:1.- Uitzondering: decoratieve tekst en logo’s- Voor grote tekst minimaal 3:1
![Page 62: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/62.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 5
Zorg dat de hele website bedienbaar is met het toetsenbord.
Komt de cursor overal? Ook in Google Maps en de
videospeler? Is de tabvolgorde logisch?
![Page 63: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/63.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 6
Geef gebruikers genoeg tijd om content te lezen en te gebruiken.
Controle over: Tijdslimieten Bewegende, knipperende, scrollende
of automatisch actualiserende content
![Page 64: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/64.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 7
Veroorzaak geen epileptische aanvallen.
Geen snelle flitsen
![Page 65: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/65.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Richtlijnen
2.3.1 Maak niets wat meer dan 3x flitst binnen een seconde, tenzij de flits onder de drempelwaarde valt:
Oppervlakte < 20.000 pixel2 , ofFlitskleuren < 10% verschil in helderheidscontrast
![Page 66: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/66.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 8
Help gebruikers navigeren.
‘Skip’-links en ‘anker’-links Beschrijvende titels en links Alternatieve routes
![Page 67: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/67.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Skip-links (onzichtbare navigatie)
![Page 68: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/68.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Screenshot mijn blog
![Page 69: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/69.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
11-7-2007, persbericht
Eerste Kamer niet akkoord met wetsvoorstel
luchtkwaliteitseisen
Lees verder
FOUT
Feed forward
Klik hier om met ons contact op te nemen.
FOUT
11-7-2007, persbericht
Eerste Kamer niet akkoord met wetsvoorstel
luchtkwaliteitseisenGOED
Neem contact met ons opGOE
D
<a href=“pagina.html” title=“Eerste Kamer verwerpt
milieuwet”> Lees verder </a> EXTRA
optioneel:
![Page 70: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/70.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Feed forward
Als u in heel 2006 een fiscale partner had, telt u de alimentatie en de uitgaven voor onderhoudsverplichtingen van u en uw fiscale partner
bij elkaar op. Het aftrekbare bedrag kunt u vervolgens verdelen tussen u en uw fiscale partner zoals u dat wilt. FOU
T
Als u in heel 2006 een fiscale partner had, telt u de alimentatie en de uitgaven voor onderhoudsverplichtingen van u en uw fiscale partner bij elkaar op. Vervolgens kunt u het aftrekbare bedrag onderling
verdelen zoals u dat wilt. GOED
http://www.den-dopper.com/2007/09/27/effectiever-hyperlinken-vertrouwen-is-te-ontwerpen-deel-3/
![Page 71: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/71.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alternatieve routes
Als ontwerper begin je het liefst met het ideaalplaatje. Dat is volkomen logisch en prima. Maar vraag jezelf
als ontwerper regelmatig af: “Is dit zo toegankelijk voor iedereen?” Zo niet,
in welke vorm dan wel?
![Page 72: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/72.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 9
Stem taalgebruik af op de gebruiker.
Taal en taalwissels Afkortingen Moeilijke begrippen Taalniveau B1 (meestal)
![Page 73: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/73.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 74: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/74.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zin of passage in een andere taal
<p> We leren hoe de bezoekers zich door de site bewegen, wat ze snappen en wat niet, waar ze vastlopen, over welke onderdelen ze enthousiast zijn en veel meer. Maar, als we mensen neerzetten op de homepage, slaan we een belangrijk aspect van de user experience over: hoe eenvoudig vinden mensen de weg NAAR de website? </p>
<blockquote lang=“en”>
<p> Findability precedes usability <br />
in the alphabet and on the web. <br />
You can’t use what you can’t </p>
<p> <cite> Peter Morville – Ambient Findability </cite> </p>
</blockquote>
![Page 75: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/75.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Welk land is dit?
![Page 76: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/76.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 77: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/77.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 10
Maak de user interface voorspelbaar en consequent.
Geen onverwachte contextwijzigingen Consequente navigatie en
functionaliteiten
![Page 78: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/78.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Richtlijnen
3.2.1 Als de gebruiker de focus verplaatst naar een component, dan veroorzaakt dat geen contextwijziging.
3.2.2 Als de gebruiker de instelling van een component verandert, veroorzaakt dat geen contextwijziging, tenzij hij daar vooraf over geïnformeerd is.
3.2.3 Presenteer terugkerende navigatiemechanismen iedere keer in dezelfde relatieve volgorde, tenzij de verandering wordt geïnitieerd door de gebruiker.
3.2.4 Duid een terugkerende functionaliteit steeds hetzelfde aan.
![Page 79: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/79.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 11
Help de gebruiker fouten te vermijden en ze te verbeteren.
![Page 80: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/80.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 81: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/81.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 82: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/82.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Instructies bij formulier
![Page 83: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/83.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wees tolerant
![Page 84: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/84.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Geef tips
![Page 85: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/85.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Geef informatieve foutmeldingen
ONVOLDOENDE
![Page 86: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/86.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Geef informatieve foutmeldingen
![Page 87: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/87.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 12
Bouw volgens webstandaarden.
Gebruik strikte specificaties (bv. XHTML 1.0 strict)
Gebruik geen ‘depricated’ elementen (bv. font)
![Page 88: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/88.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 13
Bouw websites volgens het principe van gelaagd bouwen.
Houd structuur en vormgeving zoveel mogelijk gescheiden
Maak de vindbaarheid en bruikbaarheid van content niet afhankelijk van scripts en plugins.
![Page 89: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/89.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 90: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/90.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 91: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/91.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 92: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/92.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Progressive Enhancement
data
logicaopbouwvormgeving
verrijking
![Page 93: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/93.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Principe 14
Produceer duurzame en vriendelijke URL’s
Directory-structuur Geen sessies Doorverwijzen bij verplaatste content Canonical URI’s
![Page 94: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/94.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Test tools
Webrichtlijnen QuickscanTest automatisch 47 van de 125 Webrichtlijnen.http://versie1.webrichtlijnen.nl/toetsen/
Luminosity Colour Contrast Ratio AnalyserTest het contrast tussen voor- en achtergrondkleur.http://juicystudio.com/services/luminositycontrastratio.php
Colorblind Web Page FilterBekijk je site door de ogen van een kleurenblinde.http://colorfilter.wickline.org/
Kleed je site uitBekijk je site zonder afbeeldingen, vormgeving en scripts.http://www.kleedjesiteuit.nl
ToetstoolTest op webrichtlijnen en w3c validiteit vanuit een toolbar. http://www.toetstool.nl/
Accessibility Leesniveau ToolTest de technische leesbaarheid van een tekst.http://www.accessibility.nl/internet/tools/leesniveau_tool
![Page 95: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/95.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meer weten?
Toegankelijkheid voor ontwerpershttp://www.den-dopper.com/2010/07/22/toegankelijkheid-voor-ontwerpers/
De richtlijnen:www.w3.org/Translations/WCAG20-nl/
![Page 96: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/96.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening
Welke website is toegankelijker?www.rotterdam.nl of www.delft.nl ?
Beoordeel de toegankelijkheid volgens de 14 principes.
![Page 97: CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c7e9af4a795904268b45de/html5/thumbnails/97.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper