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+

“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

People

Planet

Profit

Positief imago /

reputatie

Meer comfort/ zelfstandighei

dAny where, any time, any how

Conversie

Tevreden klanten

Sneller = goedkope

Verantwoordelijkheid

Drempelvrij

Drempels WegW3C

Webrichtlijnen

Prio 2Accessibility

Webrichtlijnen, Drempelvrij?Wegwijs in het lingo

Landschap

Content

Accessibility

Guidelines

Drempelvrij

WCAG niveau AA

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

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

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>

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>

Kopregels

Kolommen

Geen tabellen voor presentatie

<table>

</table>

Tabellen

<th scope=“col”> product </th>

<th scope=“col”> maart </th>

<th scope=“col”> april </th>

<th scope=“row”> patat </th>

<table>

</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

Feed forward

Klik hier om met ons contact op te nemen.

11-7-2007, persbericht

Eerste Kamer niet akkoord met wetsvoorstel

luchtkwaliteitseisenGOED

Neem contact met ons opGOE

<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

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>

<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

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

Meer weten?

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

De richtlijnen: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?

f.den.dopper@hr.nl

@ferrydendopper

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

Design

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

Master design

Learning fromVideos in Open Online Educationweb.mit.edu/xtalks/VanDerZee-xTalk-4-12-17.pdf · (Web Content Accessibility Guidelines) ICLON, Interfacultair Centrum voor Lerarenopleiding,

Apartment Design

ASO LV Bogotá, sábad 3o de mayo d e 1919 Números 1073 y2 …€¦ · R E P U B L I G A D E C O í Q; tl B I A 3BE ASO LV Bogotá, sábad 3o de mayo d e 1919 Números 1073 y2 16733

DESIGN PORTFOLIO_ALEXANDRA_ARONOVA

Wierda Design

Design cycle for microprocessors STUDENTSseminarisempresa.fib.upc.edu/aulesempresa/2010/programes/INTEL… · Architecture Design specification Behavioral design • Design plan must

Open Design / Design Colaborativo - Heloisa Neves

Design FAIR!

Design research stage (fulltime) – voorjaar 2020...2019/12/02 · design, design for interaction, strategic design) – Je spreekt vloeiend Nederlands en Engels. – Je hebt interesse

CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction

Uitnodiging lectorinstallatie dr.ir. N.H. van Steenis dr ......Good mobile accessibility contributes to overall wellbeing and prosperity. For this reason the western world attach great

Geometric Design

CMD Interaction Design - Y2 Q1 les 1 - Design Patterns

Workshop: Accessibility

PUBLIC DESIGN

SEO vs design. Tips voor een SEO-vriendelijk design.

ACTION DESIGN PRINCIPLES GAME & PLAY DESIGN THEORIE Klaas Kuitenbrouwer

ii. g.ge#Eiidioi::iexu---y2--sdu-r-zydy

Design document