Barrierefreiheit im Fokus: 12 Beispiele für Accessibility

3.466 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.466
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×