SlideShare ist ein Scribd-Unternehmen logo
BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y

Insidrrr Day 3 / 27.04.2013📅
Jan Eric Hellbusch und Nicolai Schwarz👥
NOTIZEN
DiesistdiekommentierteFassungderSession»BarrierefreiheitimFokus«,
dieichzusammenmitJanEricHellbuschbeimInsidrrrDay3am27.April2013
gehaltenhabe.DieseFolienenthaltennurmeinenPart:zwölfBeispieleausder
täglichenArbeit,beidenenwirdieBarrierefreiheitverbessernkönnen.
Notizen-SeitenwiediesebeziehensichjeweilsaufdiefolgendenSeiten.
EinpaarAbkürzungen:
WCAG=WebContentAccessibilityGuidelines, 🔗Wikpedia
ARIA=AccessibleRichInternetApplications, 🔗Wikpedia
BITV=Barrierefreie-Informationstechnik-Verordnung, 🔗Wikpedia
a11y=KurzformfürAccessibility(Barrierefreiheit),weilman11Zeichenauslässt
Werallesgenauerwissenwill,kannsichdasBuch»Barrierefreiheitverstehenund
umsetzen«von KerstinProbieschundJanEricHellbuschbesorgen(🔗dpunkt.verlag).
✒
»Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten,
dass jeder sie nutzen und lesen kann.« Jan Eric Hellbusch
Barrierefreiheit geht sehr häufig Hand in Hand
mit Usability oder Suchmaschinenoptimierung.
Barrierefreiheit und gutes Design widersprechen sich nicht!
Allerdings gibt es durchaus ein paar kleine Details,
die Designer und/oder Frontendentwickler nerven können.
BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y

BILDER01
NOTIZEN
AlleBilderbenötigeneinalt-Attribut.DerTextwirdBlindendurchdenScreenreader
vorgelesen;ererscheint,wenndasBildnichtgeladenwerdenkann;underistsinnvoll
fürdieSuchmaschinenoptimierung.Bilder,diezumInhaltgehören,erforderneinen
alt-Text,derdasBildsogutwiemöglichbeschreibt.Bilder,dienurzumDesignund
nichtzumInhaltbeitragen,sollteneinenleerenalt-Textbekommen.
Dasweißmittlerweilejeder–solltemanmeinen.Trotzdemgibtesimmerwieder
Websites,aufdenenkeinalt-Textvergebenist.NutzereinesScreenreadersbekommen
davonalsonichtsmit.HierzumBeispielvierBilderineinemBuch-Shop.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
Nebendemalt-gibtesnochdastitle-Attribut.Währendderalt-TextdasBildsogutwie
möglichbeschreibensoll,istdertitle-TextfürzusätzlicheInformationengedacht.Eine
guteAufteilungist:
alt=BeschreibungdesBildes
title=AngabenzurQuelle/Fotograf/URL
Wichtigist,nichtdenselbenTextdoppeltzuvergeben.ErwürdeimScreenreaderauch
zweimalvorgelesenwerden.
Einige(ältere)CMSfüllendentitle-TextautomatischmitdemNamenderBilddatei.
WordPressmachtdasheutenoch.Dasistebensonichthilfreich.
✒
BILDER01
alt="Angela Merkel"
title="Foto:
Armin Linnartz,
Quelle: wikipedia.de"
BILDER01
NOTIZEN
Einenpassendenalt-Textzufinden,isteineKunstfürsich.ImBeispieldervorherigen
Seitereichtvielleichttatsächlich»AngelaMerkel«.InvielenFällenlässtsichdasBild
aberbesserbeschreiben.Einreines»AngelaMerkel«wärefürdiefolgendenBilderzu
wenig.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
ZusätzlichkommenauchnochBildunterzeileninsSpiel.IneinigenArtikelnistzu
lesen,dassaufdenalt-Textverzichtetwerdenkann,wenneineBildunterzeilevergeben
ist.DasProblemdabeiistdasHTML-KonstruktfürdieBildunterzeile.KanneinScreen-
readerBildundTexttatsächlicheinanderzuordnen?Dasalt-Attributstehtimmerhin
direktbeimBild-Element.Außerdemkannespassieren,dasseinalt-Textsichdeutlich
vonderBildunterzeileunterscheidet–siehedasBeispielvontaz.de.
Nebenbei:Wieeffektivistes,BildundBildunterzeileinHTML5mit<figure>und
<figcaption>auszuzeichnen?
FüreinemoderneWebsiteistdassicherpassend,aberScreenreaderkönnenmit
HTML5nochnichtvielanfangen.DortwirdderZusammenhangaktuellalsonicht
hergestellt.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
alt-Textesolltenkurzgehaltenwerden.Wasabermachenwirz.B.mitInfografiken,die
sichnichtineinpaarWörternerklärenlassen?FürsolcheFällestehtunsdasAttribut
longdesczurVerfügung,dasaufeineURLmiteinerlängerenErläuterungverlinken
kann.JenachCMSundEinstellungenhabennormaleAutoren/Redakteuredarauf
vielleichtkeinenZugriff;hilfreichistdieseOptionaberallemal.
ZurVerfügungstehenunsalso:
·	 alt=BeschreibungdesBildes
·	 title=AngabenzurQuelle/Fotograf/URL
·	 Unterzeile=RedaktionellerText,dersichdeutlichvomalt-Textunterscheidenkann
·	 longdesc=URI zueinemlängerenText,umkomplexeGrafikenzuerklären
✒
alt
title
caption/figcaption
longdesc (URI)
BILDER01
ÜBERSCHRIFTEN02
NOTIZEN
ÜberschriftensindeineidealeMöglichkeit,sichmitdemScreenreadereinenschnellen
ÜberblickübereineWebsitezuverschaffen.DabeisolltendieÜberschriftenaberdeut-
lichformuliertsein.WasverbirgtsichaufderfolgendenSeiteetwahinter»Uruk«oder
»Schiff«?FürSehendesinddieInhalteleichterzuverstehen,weilimSlidernebender
ÜberschriftnochweitereInformationenschnellerfasstwerdenkönnen.
InmanchenFällenkanneshilfreichsein,zusätzlicheTexteineinerÜberschriftfür
Screenreaderhinzuzufügen,aberoptischzuverstecken,etwa
<h2>Uruk<spanclass="visuallyhidden">(Ausstellung)</span></h2>
🔗http://davidwalsh.name/html5-boilerplate
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
InHTML5istesaußerdemmöglich,verschiedene<section>oderandereBereiche
einzusetzen,diejeweilsneumiteiner<h1>beginnen.BrowserkönnendieseÜberschrif-
ten-Ordnunginterngutverarbeiten;dadurchkommenauchScreenreaderdamitklar.
PersönlicheMeinung:BeidenmeistenSitesseheichkeinHindernis,eine»ordentliche«
hx-Strukturaufzubauen,diewirseitJahrengewohntsind.Oftreichenjadie
Ordnungenh1bish4fürdiegesamteSiteaus.
DereinzigeGrundjeweilsbeih1zubeginnen,wärenrechtgroßeWebsitesoderaber
kompliziertgebauteCMS,beidenenesschwierigerist,dieÜberschriften-Struktur
anzupassen.
✒
LINKS03
NOTIZEN
LinkssolltennichtnurdurchFarbedargestelltwerden.WereineSehschwächehatwird
dieFarbealleinevtl.nichtwahrnehmen.DeshalbsolltenalleLinks(imFließtext)unter-
strichensein.EswärenauchandereAuszeichnungen(fett,kursiv,Icons)möglich,aber
Unterstreichungenhabensichetabliert.
EbensosollteLinktextdenLinksogutwiemöglichbeschreiben.Beicdu.dezum
Beispielan»LesenSiedieaktuelleAusgabedesUNIONMagazin!«zusehen.
BeiderGelegenheitgibtesimmerwiederDiskussionenumden»mehr«-oder
»Weiterlesen«-Linkz.B.amEndevonTeasern.WerhiermitdemScreenreadervonLink
zuLinkdurchtabbtkannmitden»mehr«-Linktextennichtvielanfangen.Auchhier
wärenoptischversteckteTextemöglich.AllerdingserlaubtWCAG2.0auchLinktexte,
diedurcheinen»programmatischermittelbarenKontext«aussagekräftigwerden.
🔗http://www.bitvtest.de/infothek/artikel/lesen/aussagekraeftige-linktexte.html
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
SCHRIFTGRÖSSEN04
NOTIZEN
LinksaufderWebsite,diedazudienen,dieSchriftgrößezuverändern,sindheutzutage
eigentlichnichtmehrnötig.SchließlichhabealleBrowserseitlängeremeineneinge-
bautenSeitenzoom.
DieserSeitenzoomfunktioniertabernichtinallenBrowserngleich.Firefoxberück-
sichtigtaktuellz.B.responsiveElemente(Seite30),Chromevergrößerteinfachnur
(Seite31).
FürdieBarrierefreiheitreichtderSeitenzoomfürdieStufeAAaus.BeiAAAhingegen
istkeinwaagerechterScrollbalkenmehrerlaubt.WennAAAangepeiltwird,dannsind
Zoom-Layoutsmeistnichtmehrausreichend.EskommtalsoaufdaskonkreteProjekt
anundnachwelchemMaßstabdieBarrierefreiheitgeprüftwird.BeimBITV-Testetwa
mussauchdiereineTextvergrößerungbei150%–bzw.»Schriftgradamgrößten«imIE
–erfülltsein(entgegenWCAG2.0,dievon200%spricht).
FürhöhereWeiheninderBarrierefreiheitbildenSchriftenaufBasisvomemweiterhin
diebesteGrundlage.BeiresponsivenWebsiteskannesaußerdemschwierigwerden,in
denflexiblenÜbergängenzusätzlichdenText-Zoomzuberücksichtigen.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
FOCUS05
NOTIZEN
TastaturnutzersollteninderLagesein,mitderTab-TastebequemdurcheineWebsite
zutabben.DabeispringensievonLinkzuLinkbzw.ineinemFormularweiter.Die
Websitesollteoptischhervorheben,aufwelchemElementgeradederFokusliegt.
TabbtmanaufderaktuellenWebsitevoninsidrrr.dewirdzunächsteinSprunglink
zumInhalteingeblendet(gut).DanachwandertderFokusinsMenü,wovoneinTasta-
turnutzerabernichtsmitbekommt,weilderMenüpunktoptischnichthervorgehoben
wird(schlecht).ErsteinpaarTabsspäter,erscheintausdemNichtsplötzlicheinUnter-
menüpunkt.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
LandetderTastatur-NutzeraufeinemLink,wirddieserinderRegelvoneinerdünnen
gepunkteten(dotted)Linieumrahmt.Dasistgut,weilhierwiedereinoptischesSignal
gegebenwird,wosichderFokusgeradebefindet.DesignermögendieseLinienichtun-
bedingtundunterdrückendenRahmenoft.InälterenCSS-ResetswirddieLinieebenso
ausgeblendet.
StattdenRahmenaberfüralleFällezuunterdrücken,istesgeschickter,sichaufdie
Zustände:hoverund:activezubeschränken.
🔗http://webkrauts.de/artikel/2009/verliere-nicht-den-focus
✒
FOCUS05
Ältere CSS-Reset-Anweisungen enthalten noch:
/* remember to define focus styles! */
:focus { outline: 0; }
FOCUS05
Prüfen, ob die Reset-Anweisungen sinnvoll sind
:focus { outline: none; }
unterdrückt die Outline für alle User;
sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur
a:hover, a:active { outline: none; }
unterdrückt die Outline beim Draufklicken mit der Maus
Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline
🔗 http://webkrauts.de/2009/12/11/verliere-nicht-den-focus
KLICKFLÄCHEN06
NOTIZEN
FürKlickflächengibtesinnerhalbderWCAGkeinekonkreteForderung.Allerdings
solltendieseFlächenalleinschonausGründenderUsabilitygroßgenugsein.Das
betrifftinsbesonderePagerundkleineIcons.Wennschonjemandmitnormaler
BeweglichkeitProblemehat,dieKlickflächenzutreffen,wieergehtesdannerst
jemandemmiteinermotorischenStörung?
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
FORMULARE07
NOTIZEN
ÜberFormularekönntemansichereineeigeneSessionhalten.Wichtigisterstein-
malalleFeldermiteinementsprechenden<label>zuversehen.DassollteeinCMSvon
sichausliefern.AußerdemsolltenPflichtfeldergekennzeichnetwerden.DieFrageist,
reichteinStern*dafüraus?LiefertdasCMSnurdiesenStern,isteinTextvordem
Formularsinnvoll,dererklärt,dassSternePflichfelderkennzeichnen.
SinnfreiisteineAngabewie
title="DieseAngabewirdbenötigt."
–denndieseliesteinScreenreadergarnichtvor.
Direkt»Pflichtfeld«zunotieren,istdiebesteLösung.Zusätzlichkann
aria-required="true"
angegebenwerden.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
<label for="edit-email">E-Mail
<span class="form-required" title="Diese Angabe wird benötigt.">*</span>
</label>
<input type="text" id="edit-email" name="email" value="" size="60"
maxlength="60" class="form-text required" />
<label for="edit-email">E-Mail
<span class="form-required">(Pflichtfeld)</span>
</label>
<input type="text" id="edit-email" name="email" value="" size="60"
maxlength="60" class="form-text required" />
<label for="edit-email">E-Mail
<span class="form-required">(Pflichtfeld)</span>
</label>
<input type="text" id="edit-email" name="email" value="" size="60"
maxlength="60" class="form-text required" aria-required="true" />
NOTIZEN
MancheCMS/PluginsliefernimmernocheinBild-Captcha,umSpamzuvermeiden.
DieseDingersindsinnfrei.Entwedersiesindsoeinfach,dassauchSpambotssielösen
können.Odersiesindsoschwer,dassalleNutzerdamitProblemehaben.Undnatürlich
habenSehbehindertekeineChance,solcheinCaptchazulösen.
DierichtigeLösungwäreentwedereinHoneypotoderabereinFrage-Captcha.
·	 EinHoneypotfügteinFormularfeldhinzu,dassowohlvorsehendenNutzernalsauch
vorScreenreadernverborgenwird.SpambotsaberfüllendiesesFeldaus,sodassSpam
darüberausgefiltertwerdenkann.
·	 EinFrage-CaptchabestehtauseinersimplenFrageplusAntwort.Etwa:»WelcherTag
folgtaufMontag?«DieFragedarfnichtzuschwersein,dennNutzersollenjanichtan
derletztenHürdebeimAbsendenscheitern(»AnwievieleLändergrenzenDeutsch-
land?«,»WiehießderersteAußenministerderBRD?«).
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
KONTRASTMODUS08
NOTIZEN
DerKontrastmodusnutztalternativeFarben,Schriftarten,Symbolgrößen,Abstände
undRahmen.JenachSehbehinderungkanndaseinegroßeHilfesein.Wichtigistzu
wissen,dassHintergrundbilderund-farbenimKontrastmodusnichtdargestellt
werden.
DasBeispielzeigtmeineWebsitetextformer.de,dieichoffensichtlichnieaufden
Kontrastmodusgetestethabe.DasNewsbild,daszumStarterscheint,solltebessernicht
alsHintergrundbildeingebautwerden(ScreenreaderbekommenandieserStelleechten
Textvorgesetzt).UndbeiderNavigationrächtessich,wennmansichirgendwannmal
Image-Replacement-Technikenangeeignet(undnichtweiterdarübernachgedacht)hat.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
NOTIZEN
ImGegensatzdazuistpro-retina.deaufdenKontrastmodusvorbereitet.InderNaviga-
tionkommtaußerdemeineborder-TechnikzumZuge,diedenaktuellenMenüpunkt
bzw.den:hover-ZustandmiteinemzusätzlichenRandhervorhebt.
🔗http://webkrauts.de/artikel/2008/sonnenseiten-barrierefreiheit
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
FEHLERMELDUNG09
NOTIZEN
NocheinmaleinBeispielvonpro-retina.de:FülltjemandeinFormularnichtrichtig
aus,wirddieFehlermeldungaufderSeiteausgegeben.DasistStandard.AufderWeb-
sitewirdeineFehlermeldungaberzusätzlichinden<title>derSeitegeschrieben.Das
hatdenVorteil,dassScreenreader-NutzernichterstzumInhaltspringenmüssen;
der<title>wirdIhnensofortvorgelesen,undsiebekommendenFehlerschnellermit.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
ARIA ROLES10
NOTIZEN
MitdenARIArolesistesmöglich,WidgetsundInhalteeinerWebsiteinhaltlich
genauerzubeschreiben.SokanneinSchieberegleretwadieRollerole="slider"
bekommen,wasesassistivenTechnologienermöglicht,dieFunktionzuverstehen.
🔗http://www.hessendscher.de/wai-aria/
DabeiüberschreibtdieRolledieursprünglicheFunktiondesElements.
Mit<prole="heading">würdeeinAbsatzalsoalsÜberschriftfungieren,wasnichtsinn-
vollist,schließlichgibtesbereitsdiehx-Elemente.
BeimaktuellenStandkönnenScreenreadermitHTML5-Elementennichtsanfangen,
ARIAroleswerdenaberinterpretiert.DaheristdieAngabe<navrole="navigation">
zwarinhaltlichdoppelt,abernötig.
DieseRollensolltennichtimÜberflussverteiltwerden,sondernüberlegt.
✒
ARIA ROLES10
<div id="header">
<div id="footer">
<ul id="nav">
ARIA ROLES10
<div id="header">
<div id="footer">
<ul id="nav">
<header>
<footer>
<nav>
ARIA ROLES10
<div id="header">
<div id="footer">
<ul id="nav">
<header>
<footer>
<nav>
<header role="banner">
<footer role="contentinfo">
<footer role="complementary">
<nav role="navigation">
ARIA ROLES10
Abstract Roles – Abstract roles are used for the ontology. Authors MUST NOT
not use abstract roles in content.
Widget Roles – These roles act as standalone user interface widgets or as part of
larger, composite widgets. dialog / progressbar / slider / status
Document Structure – These roles describe structures that organize content in a
page. Document structures are not usually interactive.
article / columnheader / definition / directory / document
Landmark Roles – These roles are regions of the page intended as
navigational landmarks. contentinfo / form / main / navigation / search
FARBKONTRASTE11
NOTIZEN
AlsDesignermussichfeststellen:Farbkontraste(imSinnederBarrierefreiheit)nerven.
NatürlichlegeichandenwichtigenStellenWertaufeinendeutlichenKontrast.
InmanchenFällenfindeicheinengeringenKontrastallerdingshübscher/passender/
ausreichend.InmeinemFallsindmeineAugenundmeineMonitoreaberauchganz
gut.Ichkannschließlichalleserkennen,wasichmirzusammenbaue.
FürdieBarrierefreiheitmussichmanchmaleinenhöherenKontrastwählenalsiches
gernehätte.SowirdauseinemhellerenvielleichteindunkleresGrau.Dasstörtmichals
Designer,abernatürlichkommtesallenNutzernzugute,wennderKontrasthöherist.
FürTextaufHintergrundgibtesfesteKontrastwerte,dieerreichtwerdenmüssen.
ZumTestengibtesverschiedeneTools,zumBeispieldenColourContrastCheckunter
🔗http://snook.ca/technical/colour_contrast/colour.html.
DeutlicheKontrastesolltenauchfür:hover-und:focus-Zuständegewähltwerden.
✒
FARBKONTRASTE11
»Das W3C macht da mit der WCAG 2.0 (Web Content Accessibility
Guidelines 2.0) klare Vorgaben. Der Kontrast zwischen Text im Vordergrund und
seiner Hintergrundfarbe sollte bei einer Textgröße kleiner 18px (ohne Fettschrift)
und kleiner 14px (fett geschrieben) ein Verhältnis 4,5:1 aufweisen, kleiner 18px
(nicht fett geschrieben) und größer 18px (bei Fettschrift) noch 3:1, um die AA
Spezifikationen zu erfüllen. Für die AAA-Spezifikation beträgt die Ratio sogar 7:1
bzw. 4,5:1 (A, AA und AAA sind die Stufen der Konformität, mit denen die Zu-
gänglichkeit einer Internetseite vom W3C bewertet wird). Text über gemustertem
Hintergrund oder Bildern sollte dementsprechend höher kontrastiert werden. Texte
und Schriften als Teil eines Logos oder mit rein dekorativem Charakter hingegen
sind von diesen Bestimmungen ausgenommen.«
🔗 http://webkrauts.de/2009/08/05/kontrastreiche-farbwelten
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
EXTRAS12
NOTIZEN
WährendvieleTechnikenzurBarrierefreiheitproblemlosaufdenmeistenWebsites
umgesetztwerdenkönnen,gibteseinigeElemente,dieeherseltenumgesetztwerden.
LeichteSpracheistzumBeispielsinnvollfürHörgeschädigte,Gehörlose,Menschen
mitgeistigerBehinderung,Analphabeten,MigrantenundTouristenmitwenig
KompetenzinderdeutschenSprache.DieTextewerdennachbestimmtenGrundsätzen
geschrieben,etwa:EswerdenkurzeSätzeverwendet.OderjederSatzenthältnureine
Aussage.AufWebsiteskommensolcheTextedennocheherseltenzumEinsatz.
🔗http://de.wikipedia.org/wiki/Leichte_Sprache
Ebensoistesoftnichtmöglich,VideoszusätzlichmitGebärdensprachezuversehen
oderVideosundAudiodateienzutranskribieren.
✒
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y

Soweit zu den Beispielen✓
Und nun: die Screenreader-Demonstration📣
KONTAKT
JanEricHellbusch
@2bweb
🔗barrierefreies-webdesign.de
·	 Sachbuchautor
·	 DelegierterdesDVBSimFach-
ausschussfürInformations-und
Telekommunikationssystemeder
Blinden-undSehbehindertenverbände
Deutschlands
·	 LeiterdesAKHomepageder
ProRetina
NicolaiSchwarz
@textformer
🔗textformer.de
·	 freierDesignerundWebentwickler
ausDortmund
·	 Autorfürt3n
·	 RedakteurbeiderScreenguide
·	 Redakteurbeiwebkrauts.de
·	 DozentfürWebdesign

CREDITS
Bildnachweise
·	 TitelundKapitelbilderstammenvon 🔗http://sxc.hu.
·	 DasMerkel-BildaufdenSeiten7und8kommtvon 🔗Wikpedia.
·	 DieanderenMerkel-Bilderstammenvoncommons.wikimedia.orgundflickr.com.
GenutzteFonts
·	 Neuton– 🔗http://www.dafont.com/neuton.font
·	 SciFly– 🔗http://www.dafont.com/scifly.font
·	 Icons:Entypo– 🔗http://www.entypo.com/


Weitere ähnliche Inhalte

Andere mochten auch

Edelman goodpurpose 2012
Edelman goodpurpose 2012Edelman goodpurpose 2012
Edelman goodpurpose 2012
Edelman.ergo GmbH
 
Sustain 2.0 - Nachhaltigkeit und Web 2.0
Sustain 2.0 - Nachhaltigkeit und Web 2.0Sustain 2.0 - Nachhaltigkeit und Web 2.0
Sustain 2.0 - Nachhaltigkeit und Web 2.0
Roland Dunzendorfer
 
Recommandations déontologiques SVA+
Recommandations déontologiques SVA+Recommandations déontologiques SVA+
Recommandations déontologiques SVA+
Fédération Française des Télécoms
 
Best of mensuel bowers & wilkins - mars
Best of mensuel   bowers & wilkins - marsBest of mensuel   bowers & wilkins - mars
Best of mensuel bowers & wilkins - mars
B&W Group France
 
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
mjcatoir
 
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
mystocks
 
Presentation paie publique ce
Presentation paie publique cePresentation paie publique ce
Presentation paie publique ce
Miguel Iglesias
 
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
TribuAndCo
 
Chussyonsen
ChussyonsenChussyonsen
Chussyonsen
Ana Torres
 
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich WerbungFehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
Realizing Progress
 
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud AnbietersSwiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
topsoft - inspiring digital business
 
Autoradio
AutoradioAutoradio
Autoradio
mikou31
 
Danses
DansesDanses
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
ComMetrics - CyTRAP
 

Andere mochten auch (18)

Edelman goodpurpose 2012
Edelman goodpurpose 2012Edelman goodpurpose 2012
Edelman goodpurpose 2012
 
Sustain 2.0 - Nachhaltigkeit und Web 2.0
Sustain 2.0 - Nachhaltigkeit und Web 2.0Sustain 2.0 - Nachhaltigkeit und Web 2.0
Sustain 2.0 - Nachhaltigkeit und Web 2.0
 
PHP: if-else
PHP: if-elsePHP: if-else
PHP: if-else
 
Ilusion
IlusionIlusion
Ilusion
 
Recommandations déontologiques SVA+
Recommandations déontologiques SVA+Recommandations déontologiques SVA+
Recommandations déontologiques SVA+
 
Infographies
InfographiesInfographies
Infographies
 
Best of mensuel bowers & wilkins - mars
Best of mensuel   bowers & wilkins - marsBest of mensuel   bowers & wilkins - mars
Best of mensuel bowers & wilkins - mars
 
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
Intermédialité et expérience transmédiatique, Enquêtes Ecrans. Marie-Julie Ca...
 
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
 
DRAGON BALL Z
DRAGON BALL ZDRAGON BALL Z
DRAGON BALL Z
 
Presentation paie publique ce
Presentation paie publique cePresentation paie publique ce
Presentation paie publique ce
 
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
 
Chussyonsen
ChussyonsenChussyonsen
Chussyonsen
 
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich WerbungFehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
Fehlerkultur in Relaunchprojekten: das Beispiel der Österreich Werbung
 
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud AnbietersSwiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
Swiss Cloud Conference 2014: die Folgen des Konkurses des Cloud Anbieters
 
Autoradio
AutoradioAutoradio
Autoradio
 
Danses
DansesDanses
Danses
 
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
Google-bing-like-careum-congress-workshop-patientenbildung-teil-2
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Nicolai Schwarz
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
Nicolai Schwarz
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
Nicolai Schwarz
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
Nicolai Schwarz
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
Nicolai Schwarz
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
Nicolai Schwarz
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
Nicolai Schwarz
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
Nicolai Schwarz
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
Nicolai Schwarz
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 

Mehr von Nicolai Schwarz (16)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 

Barrierefreiheit im Fokus: 12 Beispiele für Accessibility