BARRIEREFREIHEIT IM FOKUSein Dutzend Beispiele für a11yInsidrrr Day 3 / 27.04.2013📅Jan Eric Hellbusch und Nicolai Schwarz👥
NOTIZENDiesistdiekommentierteFassungderSession»BarrierefreiheitimFokus«,dieichzusammenmitJanEricHellbuschbeimInsidrrrDay3a...
»Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten,dass jeder sie nutzen und lesen kann.« Jan Eric Hellbus...
BILDER01
NOTIZENAlleBilderbenötigeneinalt-Attribut.DerTextwirdBlindendurchdenScreenreadervorgelesen;ererscheint,wenndasBildnichtgel...
NOTIZENNebendemalt-gibtesnochdastitle-Attribut.Währendderalt-TextdasBildsogutwiemöglichbeschreibensoll,istdertitle-Textfür...
BILDER01
alt="Angela Merkel"title="Foto:Armin Linnartz,Quelle: wikipedia.de"BILDER01
NOTIZENEinenpassendenalt-Textzufinden,isteineKunstfürsich.ImBeispieldervorherigenSeitereichtvielleichttatsächlich»AngelaMe...
NOTIZENZusätzlichkommenauchnochBildunterzeileninsSpiel.IneinigenArtikelnistzulesen,dassaufdenalt-Textverzichtetwerdenkann,...
NOTIZENalt-Textesolltenkurzgehaltenwerden.Wasabermachenwirz.B.mitInfografiken,diesichnichtineinpaarWörternerklärenlassen?F...
alttitlecaption/figcaptionlongdesc (URI)BILDER01
ÜBERSCHRIFTEN02
NOTIZENÜberschriftensindeineidealeMöglichkeit,sichmitdemScreenreadereinenschnellenÜberblickübereineWebsitezuverschaffen.Da...
NOTIZENInHTML5istesaußerdemmöglich,verschiedene<section>oderandereBereicheeinzusetzen,diejeweilsneumiteiner<h1>beginnen.Br...
LINKS03
NOTIZENLinkssolltennichtnurdurchFarbedargestelltwerden.WereineSehschwächehatwirddieFarbealleinevtl.nichtwahrnehmen.Deshalb...
SCHRIFTGRÖSSEN04
NOTIZENLinksaufderWebsite,diedazudienen,dieSchriftgrößezuverändern,sindheutzutageeigentlichnichtmehrnötig.Schließlichhabea...
FOCUS05
NOTIZENTastaturnutzersollteninderLagesein,mitderTab-TastebequemdurcheineWebsitezutabben.DabeispringensievonLinkzuLinkbzw.i...
NOTIZENLandetderTastatur-NutzeraufeinemLink,wirddieserinderRegelvoneinerdünnengepunkteten(dotted)Linieumrahmt.Dasistgut,we...
FOCUS05Ältere CSS-Reset-Anweisungen enthalten noch:/* remember to define focus styles! */:focus { outline: 0; }
FOCUS05Prüfen, ob die Reset-Anweisungen sinnvoll sind:focus { outline: none; }unterdrückt die Outline für alle User;sowohl...
KLICKFLÄCHEN06
NOTIZENFürKlickflächengibtesinnerhalbderWCAGkeinekonkreteForderung.AllerdingssolltendieseFlächenalleinschonausGründenderUs...
FORMULARE07
NOTIZENÜberFormularekönntemansichereineeigeneSessionhalten.Wichtigisterstein-malalleFeldermiteinementsprechenden<label>zuv...
<label for="edit-email">E-Mail<span class="form-required" title="Diese Angabe wird benötigt.">*</span></label><input type=...
<label for="edit-email">E-Mail<span class="form-required">(Pflichtfeld)</span></label><input type="text" id="edit-email" n...
<label for="edit-email">E-Mail<span class="form-required">(Pflichtfeld)</span></label><input type="text" id="edit-email" n...
NOTIZENMancheCMS/PluginsliefernimmernocheinBild-Captcha,umSpamzuvermeiden.DieseDingersindsinnfrei.Entwedersiesindsoeinfach...
KONTRASTMODUS08
NOTIZENDerKontrastmodusnutztalternativeFarben,Schriftarten,Symbolgrößen,AbständeundRahmen.JenachSehbehinderungkanndaseineg...
NOTIZENImGegensatzdazuistpro-retina.deaufdenKontrastmodusvorbereitet.InderNaviga-tionkommtaußerdemeineborder-TechnikzumZug...
FEHLERMELDUNG09
NOTIZENNocheinmaleinBeispielvonpro-retina.de:FülltjemandeinFormularnichtrichtigaus,wirddieFehlermeldungaufderSeiteausgegeb...
ARIA ROLES10
NOTIZENMitdenARIArolesistesmöglich,WidgetsundInhalteeinerWebsiteinhaltlichgenauerzubeschreiben.SokanneinSchieberegleretwad...
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="conten...
ARIA ROLES10Abstract Roles – Abstract roles are used for the ontology. Authors MUST NOTnot use abstract roles in content.W...
FARBKONTRASTE11
NOTIZENAlsDesignermussichfeststellen:Farbkontraste(imSinnederBarrierefreiheit)nerven.NatürlichlegeichandenwichtigenStellen...
FARBKONTRASTE11»Das W3C macht da mit der WCAG 2.0 (Web Content AccessibilityGuidelines 2.0) klare Vorgaben. Der Kontrast z...
EXTRAS12
NOTIZENWährendvieleTechnikenzurBarrierefreiheitproblemlosaufdenmeistenWebsitesumgesetztwerdenkönnen,gibteseinigeElemente,d...
BARRIEREFREIHEIT IM FOKUSein Dutzend Beispiele für a11ySoweit zu den Beispielen✓Und nun: die Screenreader-Demonstration📣
KONTAKTJanEricHellbusch@2bweb🔗barrierefreies-webdesign.de·	 Sachbuchautor·	 DelegierterdesDVBSimFach-ausschussfürInformati...
CREDITSBildnachweise·	 TitelundKapitelbilderstammenvon 🔗http://sxc.hu.·	 DasMerkel-BildaufdenSeiten7und8kommtvon 🔗Wikpedia...
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
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
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
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
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
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
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
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Upcoming SlideShare
Loading in...5
×

Barrierefreiheit im Fokus: 12 Beispiele für Accessibility

1,441

Published on

Mein Part einer gemeinsamen Session mit Jan Eric Hellbusch auf dem Insidrrr Day 3 in Köln am 27. April 2013.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,441
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Barrierefreiheit im Fokus: 12 Beispiele für Accessibility

  1. 1. BARRIEREFREIHEIT IM FOKUSein Dutzend Beispiele für a11yInsidrrr Day 3 / 27.04.2013📅Jan Eric Hellbusch und Nicolai Schwarz👥
  2. 2. NOTIZENDiesistdiekommentierteFassungderSession»BarrierefreiheitimFokus«,dieichzusammenmitJanEricHellbuschbeimInsidrrrDay3am27.April2013gehaltenhabe.DieseFolienenthaltennurmeinenPart:zwölfBeispieleausdertäglichenArbeit,beidenenwirdieBarrierefreiheitverbessernkönnen.Notizen-SeitenwiediesebeziehensichjeweilsaufdiefolgendenSeiten.EinpaarAbkürzungen:WCAG=WebContentAccessibilityGuidelines, 🔗WikpediaARIA=AccessibleRichInternetApplications, 🔗WikpediaBITV=Barrierefreie-Informationstechnik-Verordnung, 🔗Wikpediaa11y=KurzformfürAccessibility(Barrierefreiheit),weilman11ZeichenauslässtWerallesgenauerwissenwill,kannsichdasBuch»Barrierefreiheitverstehenundumsetzen«von KerstinProbieschundJanEricHellbuschbesorgen(🔗dpunkt.verlag).✒
  3. 3. »Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten,dass jeder sie nutzen und lesen kann.« Jan Eric HellbuschBarrierefreiheit geht sehr häufig Hand in Handmit 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 FOKUSein Dutzend Beispiele für a11y
  4. 4. BILDER01
  5. 5. NOTIZENAlleBilderbenötigeneinalt-Attribut.DerTextwirdBlindendurchdenScreenreadervorgelesen;ererscheint,wenndasBildnichtgeladenwerdenkann;underistsinnvollfürdieSuchmaschinenoptimierung.Bilder,diezumInhaltgehören,erforderneinenalt-Text,derdasBildsogutwiemöglichbeschreibt.Bilder,dienurzumDesignundnichtzumInhaltbeitragen,sollteneinenleerenalt-Textbekommen.Dasweißmittlerweilejeder–solltemanmeinen.TrotzdemgibtesimmerwiederWebsites,aufdenenkeinalt-Textvergebenist.NutzereinesScreenreadersbekommendavonalsonichtsmit.HierzumBeispielvierBilderineinemBuch-Shop.✒
  6. 6. NOTIZENNebendemalt-gibtesnochdastitle-Attribut.Währendderalt-TextdasBildsogutwiemöglichbeschreibensoll,istdertitle-TextfürzusätzlicheInformationengedacht.EineguteAufteilungist:alt=BeschreibungdesBildestitle=AngabenzurQuelle/Fotograf/URLWichtigist,nichtdenselbenTextdoppeltzuvergeben.ErwürdeimScreenreaderauchzweimalvorgelesenwerden.Einige(ältere)CMSfüllendentitle-TextautomatischmitdemNamenderBilddatei.WordPressmachtdasheutenoch.Dasistebensonichthilfreich.✒
  7. 7. BILDER01
  8. 8. alt="Angela Merkel"title="Foto:Armin Linnartz,Quelle: wikipedia.de"BILDER01
  9. 9. NOTIZENEinenpassendenalt-Textzufinden,isteineKunstfürsich.ImBeispieldervorherigenSeitereichtvielleichttatsächlich»AngelaMerkel«.InvielenFällenlässtsichdasBildaberbesserbeschreiben.Einreines»AngelaMerkel«wärefürdiefolgendenBilderzuwenig.✒
  10. 10. NOTIZENZusätzlichkommenauchnochBildunterzeileninsSpiel.IneinigenArtikelnistzulesen,dassaufdenalt-Textverzichtetwerdenkann,wenneineBildunterzeilevergebenist.DasProblemdabeiistdasHTML-KonstruktfürdieBildunterzeile.KanneinScreen-readerBildundTexttatsächlicheinanderzuordnen?Dasalt-AttributstehtimmerhindirektbeimBild-Element.Außerdemkannespassieren,dasseinalt-TextsichdeutlichvonderBildunterzeileunterscheidet–siehedasBeispielvontaz.de.Nebenbei:Wieeffektivistes,BildundBildunterzeileinHTML5mit<figure>und<figcaption>auszuzeichnen?FüreinemoderneWebsiteistdassicherpassend,aberScreenreaderkönnenmitHTML5nochnichtvielanfangen.DortwirdderZusammenhangaktuellalsonichthergestellt.✒
  11. 11. NOTIZENalt-Textesolltenkurzgehaltenwerden.Wasabermachenwirz.B.mitInfografiken,diesichnichtineinpaarWörternerklärenlassen?FürsolcheFällestehtunsdasAttributlongdesczurVerfügung,dasaufeineURLmiteinerlängerenErläuterungverlinkenkann.JenachCMSundEinstellungenhabennormaleAutoren/RedakteuredaraufvielleichtkeinenZugriff;hilfreichistdieseOptionaberallemal.ZurVerfügungstehenunsalso:· alt=BeschreibungdesBildes· title=AngabenzurQuelle/Fotograf/URL· Unterzeile=RedaktionellerText,dersichdeutlichvomalt-Textunterscheidenkann· longdesc=URI zueinemlängerenText,umkomplexeGrafikenzuerklären✒
  12. 12. alttitlecaption/figcaptionlongdesc (URI)BILDER01
  13. 13. ÜBERSCHRIFTEN02
  14. 14. NOTIZENÜberschriftensindeineidealeMöglichkeit,sichmitdemScreenreadereinenschnellenÜberblickübereineWebsitezuverschaffen.DabeisolltendieÜberschriftenaberdeut-lichformuliertsein.WasverbirgtsichaufderfolgendenSeiteetwahinter»Uruk«oder»Schiff«?FürSehendesinddieInhalteleichterzuverstehen,weilimSlidernebenderÜberschriftnochweitereInformationenschnellerfasstwerdenkönnen.InmanchenFällenkanneshilfreichsein,zusätzlicheTexteineinerÜberschriftfürScreenreaderhinzuzufügen,aberoptischzuverstecken,etwa<h2>Uruk<spanclass="visuallyhidden">(Ausstellung)</span></h2>🔗http://davidwalsh.name/html5-boilerplate✒
  15. 15. NOTIZENInHTML5istesaußerdemmöglich,verschiedene<section>oderandereBereicheeinzusetzen,diejeweilsneumiteiner<h1>beginnen.BrowserkönnendieseÜberschrif-ten-Ordnunginterngutverarbeiten;dadurchkommenauchScreenreaderdamitklar.PersönlicheMeinung:BeidenmeistenSitesseheichkeinHindernis,eine»ordentliche«hx-Strukturaufzubauen,diewirseitJahrengewohntsind.OftreichenjadieOrdnungenh1bish4fürdiegesamteSiteaus.DereinzigeGrundjeweilsbeih1zubeginnen,wärenrechtgroßeWebsitesoderaberkompliziertgebauteCMS,beidenenesschwierigerist,dieÜberschriften-Strukturanzupassen.✒
  16. 16. LINKS03
  17. 17. NOTIZENLinkssolltennichtnurdurchFarbedargestelltwerden.WereineSehschwächehatwirddieFarbealleinevtl.nichtwahrnehmen.DeshalbsolltenalleLinks(imFließtext)unter-strichensein.EswärenauchandereAuszeichnungen(fett,kursiv,Icons)möglich,aberUnterstreichungenhabensichetabliert.EbensosollteLinktextdenLinksogutwiemöglichbeschreiben.Beicdu.dezumBeispielan»LesenSiedieaktuelleAusgabedesUNIONMagazin!«zusehen.BeiderGelegenheitgibtesimmerwiederDiskussionenumden»mehr«-oder»Weiterlesen«-Linkz.B.amEndevonTeasern.WerhiermitdemScreenreadervonLinkzuLinkdurchtabbtkannmitden»mehr«-Linktextennichtvielanfangen.AuchhierwärenoptischversteckteTextemöglich.AllerdingserlaubtWCAG2.0auchLinktexte,diedurcheinen»programmatischermittelbarenKontext«aussagekräftigwerden.🔗http://www.bitvtest.de/infothek/artikel/lesen/aussagekraeftige-linktexte.html✒
  18. 18. SCHRIFTGRÖSSEN04
  19. 19. NOTIZENLinksaufderWebsite,diedazudienen,dieSchriftgrößezuverändern,sindheutzutageeigentlichnichtmehrnötig.SchließlichhabealleBrowserseitlängeremeineneinge-bautenSeitenzoom.DieserSeitenzoomfunktioniertabernichtinallenBrowserngleich.Firefoxberück-sichtigtaktuellz.B.responsiveElemente(Seite30),Chromevergrößerteinfachnur(Seite31).FürdieBarrierefreiheitreichtderSeitenzoomfürdieStufeAAaus.BeiAAAhingegenistkeinwaagerechterScrollbalkenmehrerlaubt.WennAAAangepeiltwird,dannsindZoom-Layoutsmeistnichtmehrausreichend.EskommtalsoaufdaskonkreteProjektanundnachwelchemMaßstabdieBarrierefreiheitgeprüftwird.BeimBITV-TestetwamussauchdiereineTextvergrößerungbei150%–bzw.»Schriftgradamgrößten«imIE–erfülltsein(entgegenWCAG2.0,dievon200%spricht).FürhöhereWeiheninderBarrierefreiheitbildenSchriftenaufBasisvomemweiterhindiebesteGrundlage.BeiresponsivenWebsiteskannesaußerdemschwierigwerden,indenflexiblenÜbergängenzusätzlichdenText-Zoomzuberücksichtigen.✒
  20. 20. FOCUS05
  21. 21. NOTIZENTastaturnutzersollteninderLagesein,mitderTab-TastebequemdurcheineWebsitezutabben.DabeispringensievonLinkzuLinkbzw.ineinemFormularweiter.DieWebsitesollteoptischhervorheben,aufwelchemElementgeradederFokusliegt.TabbtmanaufderaktuellenWebsitevoninsidrrr.dewirdzunächsteinSprunglinkzumInhalteingeblendet(gut).DanachwandertderFokusinsMenü,wovoneinTasta-turnutzerabernichtsmitbekommt,weilderMenüpunktoptischnichthervorgehobenwird(schlecht).ErsteinpaarTabsspäter,erscheintausdemNichtsplötzlicheinUnter-menüpunkt.✒
  22. 22. NOTIZENLandetderTastatur-NutzeraufeinemLink,wirddieserinderRegelvoneinerdünnengepunkteten(dotted)Linieumrahmt.Dasistgut,weilhierwiedereinoptischesSignalgegebenwird,wosichderFokusgeradebefindet.DesignermögendieseLinienichtun-bedingtundunterdrückendenRahmenoft.InälterenCSS-ResetswirddieLinieebensoausgeblendet.StattdenRahmenaberfüralleFällezuunterdrücken,istesgeschickter,sichaufdieZustände:hoverund:activezubeschränken.🔗http://webkrauts.de/artikel/2009/verliere-nicht-den-focus✒
  23. 23. FOCUS05Ältere CSS-Reset-Anweisungen enthalten noch:/* remember to define focus styles! */:focus { outline: 0; }
  24. 24. FOCUS05Prü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 Tastatura:hover, a:active { outline: none; }unterdrückt die Outline beim Draufklicken mit der MausNutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline🔗 http://webkrauts.de/2009/12/11/verliere-nicht-den-focus
  25. 25. KLICKFLÄCHEN06
  26. 26. NOTIZENFürKlickflächengibtesinnerhalbderWCAGkeinekonkreteForderung.AllerdingssolltendieseFlächenalleinschonausGründenderUsabilitygroßgenugsein.DasbetrifftinsbesonderePagerundkleineIcons.WennschonjemandmitnormalerBeweglichkeitProblemehat,dieKlickflächenzutreffen,wieergehtesdannerstjemandemmiteinermotorischenStörung?✒
  27. 27. FORMULARE07
  28. 28. NOTIZENÜberFormularekönntemansichereineeigeneSessionhalten.Wichtigisterstein-malalleFeldermiteinementsprechenden<label>zuversehen.DassollteeinCMSvonsichausliefern.AußerdemsolltenPflichtfeldergekennzeichnetwerden.DieFrageist,reichteinStern*dafüraus?LiefertdasCMSnurdiesenStern,isteinTextvordemFormularsinnvoll,dererklärt,dassSternePflichfelderkennzeichnen.SinnfreiisteineAngabewietitle="DieseAngabewirdbenötigt."–denndieseliesteinScreenreadergarnichtvor.Direkt»Pflichtfeld«zunotieren,istdiebesteLösung.Zusätzlichkannaria-required="true"angegebenwerden.✒
  29. 29. <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" />
  30. 30. <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" />
  31. 31. <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" />
  32. 32. NOTIZENMancheCMS/PluginsliefernimmernocheinBild-Captcha,umSpamzuvermeiden.DieseDingersindsinnfrei.Entwedersiesindsoeinfach,dassauchSpambotssielösenkönnen.Odersiesindsoschwer,dassalleNutzerdamitProblemehaben.UndnatürlichhabenSehbehindertekeineChance,solcheinCaptchazulösen.DierichtigeLösungwäreentwedereinHoneypotoderabereinFrage-Captcha.· EinHoneypotfügteinFormularfeldhinzu,dassowohlvorsehendenNutzernalsauchvorScreenreadernverborgenwird.SpambotsaberfüllendiesesFeldaus,sodassSpamdarüberausgefiltertwerdenkann.· EinFrage-CaptchabestehtauseinersimplenFrageplusAntwort.Etwa:»WelcherTagfolgtaufMontag?«DieFragedarfnichtzuschwersein,dennNutzersollenjanichtanderletztenHürdebeimAbsendenscheitern(»AnwievieleLändergrenzenDeutsch-land?«,»WiehießderersteAußenministerderBRD?«).✒
  33. 33. KONTRASTMODUS08
  34. 34. NOTIZENDerKontrastmodusnutztalternativeFarben,Schriftarten,Symbolgrößen,AbständeundRahmen.JenachSehbehinderungkanndaseinegroßeHilfesein.Wichtigistzuwissen,dassHintergrundbilderund-farbenimKontrastmodusnichtdargestelltwerden.DasBeispielzeigtmeineWebsitetextformer.de,dieichoffensichtlichnieaufdenKontrastmodusgetestethabe.DasNewsbild,daszumStarterscheint,solltebessernichtalsHintergrundbildeingebautwerden(ScreenreaderbekommenandieserStelleechtenTextvorgesetzt).UndbeiderNavigationrächtessich,wennmansichirgendwannmalImage-Replacement-Technikenangeeignet(undnichtweiterdarübernachgedacht)hat.✒
  35. 35. NOTIZENImGegensatzdazuistpro-retina.deaufdenKontrastmodusvorbereitet.InderNaviga-tionkommtaußerdemeineborder-TechnikzumZuge,diedenaktuellenMenüpunktbzw.den:hover-ZustandmiteinemzusätzlichenRandhervorhebt.🔗http://webkrauts.de/artikel/2008/sonnenseiten-barrierefreiheit✒
  36. 36. FEHLERMELDUNG09
  37. 37. NOTIZENNocheinmaleinBeispielvonpro-retina.de:FülltjemandeinFormularnichtrichtigaus,wirddieFehlermeldungaufderSeiteausgegeben.DasistStandard.AufderWeb-sitewirdeineFehlermeldungaberzusätzlichinden<title>derSeitegeschrieben.DashatdenVorteil,dassScreenreader-NutzernichterstzumInhaltspringenmüssen;der<title>wirdIhnensofortvorgelesen,undsiebekommendenFehlerschnellermit.✒
  38. 38. ARIA ROLES10
  39. 39. NOTIZENMitdenARIArolesistesmöglich,WidgetsundInhalteeinerWebsiteinhaltlichgenauerzubeschreiben.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.✒
  40. 40. ARIA ROLES10<div id="header"><div id="footer"><ul id="nav">
  41. 41. ARIA ROLES10<div id="header"><div id="footer"><ul id="nav"><header><footer><nav>
  42. 42. 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">
  43. 43. ARIA ROLES10Abstract Roles – Abstract roles are used for the ontology. Authors MUST NOTnot use abstract roles in content.Widget Roles – These roles act as standalone user interface widgets or as part oflarger, composite widgets. dialog / progressbar / slider / statusDocument Structure – These roles describe structures that organize content in apage. Document structures are not usually interactive.article / columnheader / definition / directory / documentLandmark Roles – These roles are regions of the page intended asnavigational landmarks. contentinfo / form / main / navigation / search
  44. 44. FARBKONTRASTE11
  45. 45. NOTIZENAlsDesignermussichfeststellen:Farbkontraste(imSinnederBarrierefreiheit)nerven.NatürlichlegeichandenwichtigenStellenWertaufeinendeutlichenKontrast.InmanchenFällenfindeicheinengeringenKontrastallerdingshübscher/passender/ausreichend.InmeinemFallsindmeineAugenundmeineMonitoreaberauchganzgut.Ichkannschließlichalleserkennen,wasichmirzusammenbaue.FürdieBarrierefreiheitmussichmanchmaleinenhöherenKontrastwählenalsichesgernehätte.SowirdauseinemhellerenvielleichteindunkleresGrau.DasstörtmichalsDesigner,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.✒
  46. 46. FARBKONTRASTE11»Das W3C macht da mit der WCAG 2.0 (Web Content AccessibilityGuidelines 2.0) klare Vorgaben. Der Kontrast zwischen Text im Vordergrund undseiner 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 AASpezifikationen zu erfüllen. Für die AAA-Spezifikation beträgt die Ratio sogar 7:1bzw. 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 gemustertemHintergrund oder Bildern sollte dementsprechend höher kontrastiert werden. Texteund Schriften als Teil eines Logos oder mit rein dekorativem Charakter hingegensind von diesen Bestimmungen ausgenommen.«🔗 http://webkrauts.de/2009/08/05/kontrastreiche-farbwelten
  47. 47. EXTRAS12
  48. 48. NOTIZENWährendvieleTechnikenzurBarrierefreiheitproblemlosaufdenmeistenWebsitesumgesetztwerdenkönnen,gibteseinigeElemente,dieeherseltenumgesetztwerden.LeichteSpracheistzumBeispielsinnvollfürHörgeschädigte,Gehörlose,MenschenmitgeistigerBehinderung,Analphabeten,MigrantenundTouristenmitwenigKompetenzinderdeutschenSprache.DieTextewerdennachbestimmtenGrundsätzengeschrieben,etwa:EswerdenkurzeSätzeverwendet.OderjederSatzenthältnureineAussage.AufWebsiteskommensolcheTextedennocheherseltenzumEinsatz.🔗http://de.wikipedia.org/wiki/Leichte_SpracheEbensoistesoftnichtmöglich,VideoszusätzlichmitGebärdensprachezuversehenoderVideosundAudiodateienzutranskribieren.✒
  49. 49. BARRIEREFREIHEIT IM FOKUSein Dutzend Beispiele für a11ySoweit zu den Beispielen✓Und nun: die Screenreader-Demonstration📣
  50. 50. KONTAKTJanEricHellbusch@2bweb🔗barrierefreies-webdesign.de· Sachbuchautor· DelegierterdesDVBSimFach-ausschussfürInformations-undTelekommunikationssystemederBlinden-undSehbehindertenverbändeDeutschlands· LeiterdesAKHomepagederProRetinaNicolaiSchwarz@textformer🔗textformer.de· freierDesignerundWebentwicklerausDortmund· Autorfürt3n· RedakteurbeiderScreenguide· Redakteurbeiwebkrauts.de· DozentfürWebdesign
  51. 51. CREDITSBildnachweise· 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×