CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1

Interaction Design 201 Vragen of feedback? @ferrydendopper

Toegankelijk ontwerpen (1)


Toegankelijkheid is het wegnemen van obstakels die het gebruik van

computers en webdiensten belemmeren.


"The power of the Web is in its universality. Access by everyone regardless of disability

is an essential aspect."

Tim Berners-Lee


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


Gemakkelijk te navigeren?


Voorkeur voor mobiele versie


De ROI van toegankelijkheidWat levert het op?


3 blinden?


55+ 65+

28%

15%


“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


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


Drempelvrij

Drempels WegW3C

Webrichtlijnen

Prio 2Accessibility

WCAG

Webrichtlijnen, Drempelvrij?Wegwijs in het lingo


Landschap

Web

Content

Accessibility

Guidelines

A

AA

AAA

Drempelvrij

WCAG niveau AA

Webrichtlijnen


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:


Hoe maak je sites toegankelijk?De basisprincipes


Richtlijnen

www.w3.org/Translations/WCAG20-nl/ www.webrichtlijnen.nl

http://www.w3.org/Translations/WCAG20-nl/

http://www.webrichtlijnen.nl/


Eerst even installeren


Principe 1

Lever een tekstalternatief voor alle niet-tekstuele content

Uitzondering: Decoratieve afbeeldingen


Alt=“De Amsterdamse grachten lagen vol bootjes met oranje feestvierders”


Alt=“Foto van Arnold Schwarzenegger”


Alt=“Doe nu in 2 minuten de Spaartest (advertentie SNS Bank)”


Logo’s als home-link

<a href=“/” title=“Ga naar homepage shell.nl”>

<img src=“logo.png” alt=“Shell logo” />

</a>


Alt=“”


Zelf testen


Principe 2

Lever alternatieven voor video en audio.

Ondertiteling Audiobeschrijving Transcriptie


http://www.rijksoverheid.nl/documenten-en-publicaties/videos/2011/04/19/wekelijks-gesprek-rtlz-19-april-2011.html





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


Wat communiceert een tag cloud?


CategorieënSorteer op alfabet /

populariteit.

• access (2)

• aspects (2)

• audience (5)

• become (4)

• Blogs (10)

• Enz.


<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


<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


Kolommen


Geen tabellen voor presentatie

<table>

</table>

FOUT


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>


Principe 4

Maak het gemakkelijk om content beter te zien en horen.

Genoeg contrast tussen tekst en achtergrond

Tekst schalen


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


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?


Principe 6

Geef gebruikers genoeg tijd om content te lezen en te gebruiken.

Controle over: Tijdslimieten Bewegende, knipperende, scrollende

of automatisch actualiserende content


Principe 7

Veroorzaak geen epileptische aanvallen.

Geen snelle flitsen


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


Principe 8

Help gebruikers navigeren.

‘Skip’-links en ‘anker’-links Beschrijvende titels en links Alternatieve routes


Skip-links (onzichtbare navigatie)


Screenshot mijn blog


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:


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/




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?


Principe 9

Stem taalgebruik af op de gebruiker.

Taal en taalwissels Afkortingen Moeilijke begrippen Taalniveau B1 (meestal)


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>


Welk land is dit?


Principe 10

Maak de user interface voorspelbaar en consequent.

Geen onverwachte contextwijzigingen Consequente navigatie en

functionaliteiten


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.


Principe 11

Help de gebruiker fouten te vermijden en ze te verbeteren.


Instructies bij formulier


Wees tolerant


Geef tips


Geef informatieve foutmeldingen

ONVOLDOENDE


Geef informatieve foutmeldingen


Principe 12

Bouw volgens webstandaarden.

Gebruik strikte specificaties (bv. XHTML 1.0 strict)

Gebruik geen ‘depricated’ elementen (bv. font)


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.


Progressive Enhancement

data

logicaopbouwvormgeving

verrijking


Principe 14

Produceer duurzame en vriendelijke URL’s

Directory-structuur Geen sessies Doorverwijzen bij verplaatste content Canonical URI’s


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

http://versie1.webrichtlijnen.nl/toetsen/

http://versie1.webrichtlijnen.nl/toetsen/

http://juicystudio.com/services/luminositycontrastratio.php

http://juicystudio.com/services/luminositycontrastratio.php

http://colorfilter.wickline.org/

http://colorfilter.wickline.org/

http://www.kleedjesiteuit.nl/

http://www.toetstool.nl/

http://www.toetstool.nl/

http://www.accessibility.nl/internet/tools/leesniveau_tool

http://www.accessibility.nl/internet/tools/leesniveau_tool


Meer weten?

Toegankelijkheid voor ontwerpershttp://www.den-dopper.com/2010/07/22/toegankelijkheid-voor-ontwerpers/

De richtlijnen:www.w3.org/Translations/WCAG20-nl/

http://www.den-dopper.com/2010/07/22/toegankelijkheid-voor-ontwerpers/



http://www.w3.org/Translations/WCAG20-nl/


Oefening

Welke website is toegankelijker?www.rotterdam.nl of www.delft.nl ?

Beoordeel de toegankelijkheid volgens de 14 principes.


Vragen? Feedback?

[email protected]

@ferrydendopper

CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1

Design

Transcript of CMD Interaction Design - Y2 Q2 les 7 - Accessibility Design 1