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

1. BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y

Insidrrr Day 3 / 27.04.2013📅
Jan Eric Hellbusch und Nicolai Schwarz👥

2. 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).
✒

3. »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


4. BILDER01

5. 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.
✒

7. 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.
✒

8. BILDER01

9. alt="Angela Merkel"
title="Foto:
Armin Linnartz,
Quelle: wikipedia.de"
BILDER01

10. NOTIZEN
Einenpassendenalt-Textzufinden,isteineKunstfürsich.ImBeispieldervorherigen
Seitereichtvielleichttatsächlich»AngelaMerkel«.InvielenFällenlässtsichdasBild
aberbesserbeschreiben.Einreines»AngelaMerkel«wärefürdiefolgendenBilderzu
wenig.
✒

12. 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.
✒

15. 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
✒

16. alt
title
caption/figcaption
longdesc (URI)
BILDER01

17. ÜBERSCHRIFTEN02

18. 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
✒

21. 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.
✒

22. LINKS03

23. 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
✒

26. SCHRIFTGRÖSSEN04

27. 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.
✒

33. FOCUS05

34. 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.
✒

39. 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
✒

40. FOCUS05
Ältere CSS-Reset-Anweisungen enthalten noch:
/* remember to define focus styles! */
:focus { outline: 0; }

41. 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

42. KLICKFLÄCHEN06

43. NOTIZEN
FürKlickflächengibtesinnerhalbderWCAGkeinekonkreteForderung.Allerdings
solltendieseFlächenalleinschonausGründenderUsabilitygroßgenugsein.Das
betrifftinsbesonderePagerundkleineIcons.Wennschonjemandmitnormaler
BeweglichkeitProblemehat,dieKlickflächenzutreffen,wieergehtesdannerst
jemandemmiteinermotorischenStörung?
✒

45. FORMULARE07

46. 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.
✒

48. <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" />

49. <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" />

50. <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" />

51. 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?«).
✒

54. KONTRASTMODUS08

55. 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.
✒

60. NOTIZEN
ImGegensatzdazuistpro-retina.deaufdenKontrastmodusvorbereitet.InderNaviga-
tionkommtaußerdemeineborder-TechnikzumZuge,diedenaktuellenMenüpunkt
bzw.den:hover-ZustandmiteinemzusätzlichenRandhervorhebt.
🔗http://webkrauts.de/artikel/2008/sonnenseiten-barrierefreiheit
✒

64. FEHLERMELDUNG09

65. NOTIZEN
NocheinmaleinBeispielvonpro-retina.de:FülltjemandeinFormularnichtrichtig
aus,wirddieFehlermeldungaufderSeiteausgegeben.DasistStandard.AufderWeb-
sitewirdeineFehlermeldungaberzusätzlichinden<title>derSeitegeschrieben.Das
hatdenVorteil,dassScreenreader-NutzernichterstzumInhaltspringenmüssen;
der<title>wirdIhnensofortvorgelesen,undsiebekommendenFehlerschnellermit.
✒

68. ARIA ROLES10

69. 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.
✒

70. ARIA ROLES10
<div id="header">
<div id="footer">
<ul id="nav">

71. ARIA ROLES10
<div id="header">
<div id="footer">
<ul id="nav">
<header>
<footer>
<nav>

72. 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">

73. 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

74. FARBKONTRASTE11

75. 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.
✒

76. 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

80. EXTRAS12

81. 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.
✒

85. BARRIEREFREIHEIT IM FOKUS
ein Dutzend Beispiele für a11y

Soweit zu den Beispielen✓
Und nun: die Screenreader-Demonstration📣

86. 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


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