Text­al­ter­na­ti­ven für Gra­fi­ken

Es gibt viel­fäl­ti­ge Mög­lich­kei­ten, Gra­fi­ken ei­ne Text­al­ter­na­ti­ve zu ge­ben. Ab­hän­gig vom In­halt, Zweck und Kon­text der Gra­fik kann die­se Text­al­ter­na­ti­ve sehr un­ter­schied­lich aus­fal­len.

SCREENGUIDE - - Inneres - TExT: Jan Hell­busch

Bar­rie­re­freie Tex­te für Bil­der sind nicht tri­vi­al

So­fern ei­ne Web­sei­te bar­rie­re­frei sein soll, und das soll­te in den meis­ten Fäl­len das Ziel sein, spie­len Text­al­ter­na­ti­ven für Gra­fi­ken ei­ne wich­ti­ge Rol­le. Da­bei ist das The­ma al­les an­de­re als tri­vi­al. Zum ei­nen stellt sich die Fra­ge, wie ge­nau ei­ne Gra­fik be­schrie­ben wer­den muss (oder kann), und zum an­de­ren gibt es di­ver­se Tech­ni­ken für die Um­set­zung ei­ner Text­al­ter­na­ti­ve. Die An­for­de­rung, Text­al­ter­na­ti­ven für Gra­fi­ken zu be­stim­men, steht in Er­folgs­kri­te­ri­um 1.1.1 der Web Con­tent Ac­ces­si­bi­li­ty Gui­de­li­nes (WCAG) 2.0 [goo.gl/qxD­pyN]. Dem­nach be­nö­ti­gen Bil­der und Gra­fi­ken ei­ne Text­al­ter­na­ti­ve, die den äqui­va­len­ten Zweck er­füllt. Der Zweck der Gra­fik be­stimmt al­so das, was in die Text­al­ter­na­ti­ve ge­hört. Man­cher Le­ser wird sich be­reits die Fra­ge stel­len, war­um von „Text­al­ter­na­ti­ven” und nicht et­wa „Al­ter­na­tiv­tex­ten” die Re­de ist. Tat­säch­lich wer­den in den Web Con­tent Ac­ces­si­bi­li­ty Gui­de­li­nes 2.0 Text­al­ter­na­ti­ven ver­langt, und der be­kann­te Al­ter­na­tiv­text ist „nur” ei­ne der mög­li­chen Tech­ni­ken. In der Pra­xis ist der Al­ter- na­tiv­text al­ler­dings fast im­mer die rich­ti­ge Wahl, und es gibt nur we­ni­ge Aus­nah­men, et­wa bei Bild­un­ter­schrif­ten oder bei de­ko­ra­ti­ven Gra­fi­ken, bei de­nen Sie auf den Al­ter­na­tiv­text ver­zich­ten kön­nen (sie­he un­ten). Text­al­ter­na­ti­ven gibt es in zwei Gat­tun­gen: 1. Kur­ze Text­al­ter­na­ti­ven sind rei­ner Text (oh­ne HTML-Aus­zeich­nung) und soll­ten nicht län­ger als ein bis zwei Sät­ze sein; das ent­spricht et­wa 80 Zei­chen. Es han­delt sich bei der kur­zen Text­al­ter­na­ti­ve fast im­mer um ei­nen Al­ter­na­tiv­text, der mit dem üb­li­chen alt-At­tri­but für ein <img>-Tag fest­ge­legt wird: <img src="bild.png" alt="Zweck der Gra­fik">. 2. Lan­ge Be­schrei­bun­gen sind mit HTML aus­ge­zeich­ne­te Text­in­for­ma­tio­nen, die mit der Gra­fik ver­knüpft sind und die gra­fisch dar­ge­stell­ten In­for­ma­tio­nen wie­der­ge­ben. Wie auch für kur­ze Text­al­ter­na­ti­ven gibt es für lan­ge Be­schrei­bun­gen ver­schie­de­ne Um­set­zungs­tech­ni­ken.

Es exis­tie­ren Un­men­gen an Gra­fi­ken im Web, und es wird nicht mög­lich sein, hier für je­de er­denk­li­che Si­tua­ti­on Emp­feh­lun­gen für ei­ne idea­le Text­al­ter­na­ti­ve zu ge­ben. Viel­mehr wer­den im Fol­gen­den ei­ni­ge Bei­spie­le vor­ge­stellt, die ty­pi­sche Si­tua­tio­nen im All­tag dar­stel­len (sie­he au­ßer­dem die Links im In­fo­kas­ten „Le­se­tipps”).

DER ZWECK EI­NER GRA­FIK

Nach den WCAG 2.0 soll die Text­al­ter­na­ti­ve den glei­chen Zweck wie die Gra­fik er­fül­len. Neh­men wir als Bei­spiel Ab­bil­dung 1. Die Fra­ge, wel­chen Zweck die Gra­fik er­füllt, kann ad hoc na­tür­lich nicht be­ant­wor­tet wer­den, denn es gibt kei­ner­lei Kon­text. Viel­mehr kann der In­halt be­schrie­ben wer­den, et­wa mit: 1. Es wird ein Flug­zeug des Typs Air­bus A380 ge­zeigt. 2. Das Flug­zeug ist neu­tral la­ckiert und mit der Auf­schrift „Air­bus

A380 Mo­re per­so­nal space” ver­se­hen. Das Bild bie­tet aber mehr In­for­ma­tio­nen, et­wa: 3. Das Flug­zeug fliegt ei­ne Kur­ve (und ist nicht am Bo­den). 4. Es han­delt sich um ein Pas­sa­gier­flug­zeug. 5. Das Flug­zeug ver­fügt über zwei Trieb­wer­ke an je­dem Flü­gel. Wür­de das Bild auf ei­ner Web­sei­te oh­ne Text dar­ge­stellt, müss­ten Sie das Bild mög­lichst ge­nau be­schrei­ben. Es be­dürf­te ei­ner lan­gen Be­schrei­bung, die auf er­kenn­ba­re De­tails ein­geht. So könn­te die Zahl der Fens­ter oder die Far­be der La­ckie­rung the­ma­ti­siert wer­den. Der Zweck der Gra­fik wä­re die Darstel­lung des Flug­zeugs – es han­delt sich um ei­ne in­for­ma­ti­ve Gra­fik. Üb­li­cher ist aber die Ein­bin­dung des Bilds auf ei­ner Sei­te mit Text, zum Bei­spiel in ei­nem Ar­ti­kel über ei­ne Flug­schau oder die tech­ni­schen Da­ten des Flug­zeugs. Ob­wohl die Zahl der Fens­ter im­mer noch ei­ne Rol­le für die Text­al­ter­na­ti­ve spie­len kann, er­hält die­ses Bild in ei­nem Ar­ti­kel il­lus­trie­ren­den Cha­rak­ter, und die Text­al­ter­na­ti­ve muss das Bild le­dig­lich iden­ti­fi­zie­ren: Hier wird ei­ne mög­lichst kon­kre­te Be­zeich­nung für „Flug­zeug” ge­wählt so­wie die sicht­ba­re Be­schrif­tung in den Al­ter­na­tiv­text auf­ge­nom­men. Ge­ne­rell gilt bei Text in ei­ner Gra­fik, dass er auch in Text­form be­reit­zu­stel­len ist. Was nicht in die Text­al­ter­na­ti­ve ge­hört, sind In­for­ma­tio­nen, die dem Bild nicht zu ent­neh­men sind. Das gilt et­wa ge­nau­so für den Na­men des Pi­lo­ten wie für Co­py­right-Hin­wei­se. Sol­che In­for­ma­tio­nen ge­hö­ren in den Kon­text oder in ei­ne Bild­un­ter­schrift. Die glei­che Gra­fik könn­te auch Teil ei­nes Links in ei­nem Teaser sein. In die­sem Fall kommt es nach den WCAG 2.0 nicht mehr dar­auf an, dass das Bild be­schrie­ben oder iden­ti­fi­ziert wird, son­dern dass der Link­text den Link­zweck be­schreibt: Eben­so kann die Gra­fik als de­ko­ra­ti­ves Ele­ment der Sei­te ein­ge­setzt wer­den (Abb. 2); hier ver­lan­gen die WCAG 2.0, dass ei­ne Tech­nik ein­ge­setzt wird, die es Screen­re­a­dern er­laubt, die Gra­fik zu igno­rie­ren, zum Bei­spiel ein lee­rer Al­ter­na­tiv­text: Der Zweck ei­ner Gra­fik lässt sich al­so in vier Gr­und­ar­ten un­ter­schei­den: als in­for­ma­ti­ve Gra­fik (für das Ver­ständ­nis der In­hal­te not­wen­dig); als il­lus­trie­ren­de Gra­fik (für das Ver­ständ­nis der In­hal­te nicht not­wen­dig); als Teil ei­nes ak­ti­ven Ele­ments (zum Bei­spiel Link oder Schalt­flä­che); oder als de­ko­ra­ti­ve Gra­fik.

EI­NI­GE RE­GELN FÜR ALTERNATIVTEXTE

Alternativtexte stel­len die zu­ver­läs­sigs­te Tech­nik dar, um ei­ne Text­al­ter­na­ti­ve für ei­ne Gra­fik be­reit­zu­stel­len. Für die For­mu­lie­rung von Al­ter­na­tiv­tex­ten soll­ten Sie fol­gen­de Re­geln be­ach­ten: 1. Alternativtexte sind mög­lichst ob­jek­tiv zu for­mu­lie­ren. Sub­jek­ti­ve Be­wer­tun­gen sind nur dann zu­läs­sig, wenn mit der Gra­fik der Zweck ver­folgt wird, Emo­tio­nen beim Nut­zer aus­zu­lö­sen. 2. Alternativtexte sind mög­lichst knapp zu for­mu­lie­ren (80 Zei­chen die­nen als Ori­en­tie­rung für die ma­xi­ma­le Län­ge). Dies ist da­mit er­klärt, dass ei­ner­seits Braille-Zei­len ma­xi­mal 80 Zei­chen zu ei­nem Zeit­punkt an­zei­gen kön­nen und an­de­rer­seits län­ge­re Tex­te zu­neh­mend HTML-Aus­zeich­nun­gen (Ab­sät­ze, Sprach­kenn­zeich­nung) be­nö­ti­gen, was in ei­nem alt-At­tri­but nicht er­laubt ist.

3. Sti­lis­ti­sche Fra­gen ob­lie­gen der Re­dak­ti­on. Ob „Hund beißt Post­bo­te” oder „Post­bo­te wird von Hund ge­bis­sen” im Al­ter­na­tiv­text steht, spielt für die Bar­rie­re­frei­heit kei­ne Rol­le. Auch die Fra­ge, ob Alternativtexte in voll­stän­di­gen Sät­zen oder stich­wort­ar­tig for­mu­liert wer­den, ist ei­ne re­dak­tio­nel­le Ent­schei­dung. Zu ver­mei­den sind Aus­schmü­ckun­gen oder un­nö­ti­ge In­for­ma­tio­nen wie „Die­ses Bild zeigt”. 4. Vor al­lem bei il­lus­trie­ren­den Bil­dern be­steht die Ab­gren­zungs­pro­ble­ma­tik zu de­ko­ra­ti­ven und in­for­ma­ti­ven Gra­fi­ken. Im Zwei­fel soll­te ein Bild be­schrie­ben (Ab­gren­zung zu in­for­ma­ti­ven Bil­dern) bzw. iden­ti­fi­ziert wer­den (Ab­gren­zung zu il­lus­trie­ren­den Bil­dern).

VIER AR­TEN VON TEXT­AL­TER­NA­TI­VEN

Eben­so wie es für den Zweck ei­ner Gra­fik vier Gr­und­ar­ten gibt, so gibt es auch vier Ty­pen von Text­al­ter­na­ti­ven [goo.gl/ENWBQs]. Be­schrei­ben­de Text­al­ter­na­ti­ven: In­for­ma­ti­ve Bil­der sind für das Ver­ständ­nis der In­hal­te not­wen­dig; sie be­nö­ti­gen ei­nen be­schrei­ben­den Al­ter­na­tiv­text. In­for­ma­tio­nen, die nur in der Gra­fik dar­ge­stellt wer­den, müs­sen in der Text­al­ter­na­ti­ve auf­ge­nom­men wer­den. Für vie­le Fo­tos, In­fo­gra­fi­ken oder Gra­fi­ken, die Text dar­stel­len, sind be­schrei­ben­de Text­al­ter­na­ti­ven ein­zu­set­zen. Die WCAG 2.0 se­hen ex­pli­zit vor, dass be­stimm­te in­for­ma­ti­ve Gra­fi­ken wie Bil­der von Kunst oder Bil­der, die Teil ei­ner Prü­fung sind, le­dig­lich ei­ne iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ve be­nö­ti­gen (auch wenn dann der In­halt nicht bar­rie­re­frei wird). Falls die emp­foh­le­nen 80 Zei­chen für den Al­ter­na­tiv­text nicht aus­rei­chen, um ein Bild zu be­schrei­ben, kom­men fol­gen­de er­gän­zen­de Tech­ni­ken in­fra­ge: 1. Der Kon­text des Bilds wird mit In­for­ma­tio­nen aus dem Bild an­ge­rei­chert. Je mehr In­for­ma­tio­nen im Kon­text ste­hen, des­to eher er­hält das Bild il­lus­trie­ren­den Cha­rak­ter und des­to eher kann ein iden­ti­fi­zie­ren­der Al­ter­na­tiv­text ein­ge­setzt wer­den. 2. Sie ver­knüp­fen ei­ne lan­ge Be­schrei­bung mit der Gra­fik. Die Gra­fik selbst er­hält dann ei­ne iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ve, und die In­for­ma­tio­nen wer­den an an­de­rer Stel­le ge­bo­ten. Iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ven: Il­lus­trie­ren­de Bil­der sind für das Ver­ständ­nis der In­hal­te nicht not­wen­dig, bzw. die In­for­ma­tio­nen im Bild wer­den be­reits im Kon­text des Bilds be­schrie­ben. Sol­che Bil­der be­nö­ti­gen ei­nen iden­ti­fi­zie­ren­den Al­ter­na­tiv­text. Wenn ein Bild al­lei­ne den Zweck ver­folgt, die vi­su­el­le Auf­merk­sam­keit auf den In­halt zu len­ken, dann han­delt es sich um ei­ne de­ko­ra­ti­ve und nicht um ei­ne il­lus­trie­ren­de Gra­fik. Dar­über hin­aus wer­den iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ven nicht für ver­link­te, il­lus­trie­ren­de Bil­der ein­ge­setzt, da es sich bei Links um ak­ti­ve Ele­men­te han­delt (sie­he un­ten). Für al­le Bil­der, die ei­nen ge­rin­gen In­for­ma­ti­ons­ge­halt auf­wei­sen und die des­halb ei­nen iden­ti­fi­zie­ren­den Al­ter­na­tiv­text er­hal­ten, gilt: 1. Der In­halt des Bil­des wird im Al­ter­na­tiv­text be­nannt. 2. Der Al­ter­na­tiv­text über­schrei­tet nicht 80 Zei­chen. 3. Der Al­ter­na­tiv­text ist mög­lichst ob­jek­tiv for­mu­liert. Funk­tio­na­le Text­al­ter­na­ti­ven: Wenn die Gra­fik Teil ei­nes ak­ti­ven Ele­ments ist, dann kommt es dar­auf an, dass der Link, die Schalt­flä­che oder die Kom­po­nen­te ei­nen Na­men hat [goo.gl/ HAIQkp]. Sol­che Gra­fi­ken dür­fen nicht be­schrie­ben wer­den. Viel­mehr kommt es bei Schalt­flä­chen und Kom­po­nen­ten dar­auf an, dass die Be­schrif­tung die Funk­ti­on an­gibt [goo.gl/XGZmbn], und bei Links, dass der Link­zweck aus dem Link­text er­mit­telt wer­den kann [goo.gl/VXt­mmD], zum Bei­spiel: Tech­ni­ken, da­mit Screen­re­a­der Gra­fi­ken igno­rie­ren: Man­che Gra­fi­ken sind de­ko­ra­tiv, wenn sie der Äs­t­he­tik die­nen, red­un­dant zu an­de­ren In­for­ma­tio­nen der Sei­te ein­ge­setzt wer­den oder für Nut­zer nicht als Gra­fik er­kenn­bar sind. Die WCAG 2.0 ge­ben für sol­che Gra­fi­ken vor, dass sie von Screen­re­a­dern igno­riert wer­den müs­sen, was meist mit ei­nem lee­ren Al­ter­na­tiv­text oder durch Ein­bin­dung der Gra­fik per CSS mög­lich ist. Wei­te­re Tech­ni­ken bie­tet ARIA mit aria-hi­d­den="true" oder ro­le="no­ne", die nicht emp­foh­len wer­den – weil be­reits ei­ne HTML-Tech­nik exis­tiert [goo.gl/vxDk4j].

AN­DE­RE TEXT­AL­TER­NA­TI­VEN

So­wohl für die kur­ze Text­al­ter­na­ti­ve als auch für die lan­ge Be­schrei­bung gibt es ver­schie­de­ne Tech­ni­ken. Als kur­ze Text­al­ter­na­ti­ve kommt meist nur der Al­ter­na­tiv­text in­fra­ge, für ei­ne lan­ge Be­schrei­bung ste­hen un­ter­schied­li­che Tech­ni­ken zur Ver­fü­gung. Kur­ze Text­al­ter­na­ti­ven be­ste­hen aus Na­me und Be­schrei­bung: Bis­lang wur­de die kur­ze Text­al­ter­na­ti­ve von der lan­gen Be­schrei­bung un­ter­schie­den. Al­ler­dings be­steht die kur­ze Text­al­ter­na­ti­ve aus zwei Tei­len: Je­de Gra­fik kann ei­nen Na­men und ei­ne Be­schrei­bung ha­ben (wo­bei die Be­schrei­bung nicht mit der lan­gen Be­schrei­bung zu ver­wech­seln ist). Na­me und Be­schrei­bung legt der Brow­ser im Ac­ces­si­bi­li­ty-Tree des Be­triebs­sys­tems als Ei­gen­schaf­ten der Gra­fik ab, wo die In­for­ma­tio­nen von Hilfs­mit­teln wie dem Screen­re­a­der „ab­ge­holt” und ver­ar­bei­tet wer­den. Wie Na­me und Be­schrei­bung vom Brow­ser er­rech­net wer­den, ist in der HTML Ac­ces­si­bi­li­ty API Map­pings 1.0 fest­ge­legt [goo.gl/ OPSr­mN]: 1. Der Na­me wird durch ein aria-la­bel­led­by- bzw. ein aria-la­belb­zw. ein alt- bzw. ein tit­le-At­tri­but be­stimmt. Das alt-At­tri­but ist zu be­vor­zu­gen, weil es von Brow­sern und Screen­re­a­dern zu­ver­läs­sig un­ter­stützt wird. 2. Die Be­schrei­bung wird durch ein aria-de­scri­bed­by- oder – falls

nicht für den Na­men ver­wen­det – tit­le-At­tri­but be­stimmt. Wie Screen­re­a­der Na­me und Be­schrei­bung dem Nut­zer über­mit­teln, kann un­ter­schied­lich sein. Bis­lang kann be­ob­ach­tet wer­den, dass Screen­re­a­der die bei­den Tex­te ein­fach zu ei­nem Text zu­sam­men­fü­gen. Denk­bar ist, dass Screen­re­a­der zu­künf­tig ei­ne Nut­zer­ak­ti­on vor­schal­ten, be­vor die Be­schrei­bung her­an­ge­zo­gen wird.

Ver­schie­de­ne Quel­len ver­mei­den: Bei der Be­stim­mung von Text­al­ter­na­ti­ven soll­ten Sie nur in Not­fäl­len auf die ARIA-At­tri­bu­te zu­rück­grei­fen. Ob­wohl die aria-la­bel­led­by-und aria-la­belAt­tri­bu­te heu­te schon für Gra­fi­ken ein­ge­setzt wer­den kön­nen, gibt es noch Kom­pa­ti­bi­li­täts­pro­ble­me in ein­zel­nen Screen­re­a­dern [goo.gl/s4e­g8z]. Die bei­den At­tri­bu­te sind dann sinn­voll ein­setz­bar, wenn an­de­re Ele­men­te die Rol­le ei­ner Gra­fik er­hal­ten und ein alt-At­tri­but un­zu­läs­sig ist, zum Bei­spiel: Der Al­go­rith­mus für die Er­mitt­lung ei­nes Link­texts ist im Üb­ri­gen fast iden­tisch mit dem Al­go­rith­mus für die kur­ze Text­al­ter­na­ti­ve, nur dass an­statt ei­nes alt-At­tri­buts die Tex­te (ein­schließ­lich der Alternativtexte von Gra­fi­ken) in­ner­halb des Links her­an­ge­zo­gen wer­den. Im fol­gen­den (Ne­ga­tiv-)Bei­spiel wird der Na­me durch Al­ter­na­tiv­text und Text in­ner­halb des <a>-Tags und die Be­schrei­bung an­hand des tit­le-At­tri­buts er­rech­net: Screen­re­a­der er­hal­ten als Link­text „Dru­cken zur Druck­ver­si­on Die­se Sei­te dru­cken”, was of­fen­sicht­lich nicht die op­ti­ma­le Ver­si­on ist – auch wenn der Link­text kon­form zu den WCAG 2.0 ist. Hier soll­te die Gra­fik bes­ser ei­nen lee­ren Al­ter­na­tiv­text er­hal­ten, und auf den Tool­tipp kön­nen Sie we­gen der red­un­dan­ten In­for­ma­tio­nen ei­gent­lich ver­zich­ten. Bild­un­ter­schrif­ten:

Ei­ne wei­te­re Mög­lich­keit, ei­ner Gra­fik ei­ne iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ve zu ge­ben, ist die Bild­un­ter­schrift. Nach der HTML-Spe­zi­fi­ka­ti­on be­nö­ti­gen Gra­fi­ken, die zu­sam­men mit ei­nem <fig­cap­ti­on>-Tag in ei­nem <fi­gu­re>-Tag ste­hen, kei­nen Al­ter­na­tiv­text: Die­ser Co­de-Auf­bau ist kon­form so­wohl zu HTML als auch zu den WCAG 2.0, aber das Kon­strukt weist ei­nen Nach­teil auf: Screen­re­a­der er­fah­ren nicht, dass ei­ne Gra­fik vor­han­den ist. Viel­mehr wird ei­ne Grup­pe se­man­tisch und mit der Bild­un­ter­schrift iden­ti­fi­ziert, zum Bei­spiel: Abb. 3: Meis­ter­werk der Bild­hau­er­kunst der Amar­na-Zeit „Grup­pe Iden­ti­fi­zie­ren­de Text­al­ter­na­ti­ve Grup­pe En­de” Sol­che Gra­fi­ken dür­fen selbst­ver­ständ­lich ei­nen Al­ter­na­tiv­text er­hal­ten. Wenn Sie au­ßer­dem be­rück­sich­ti­gen, dass ei­ne Bild­un­ter­schrift nicht zwin­gend den In­halt der Gra­fik iden­ti­fi­ziert oder be­schreibt, son­dern viel­leicht ei­ne Sug­ges­ti­on oder ei­nen Co­py­right-Hin­weis und den Na­men des Fo­to­gra­fen ent­hält, muss in Er­wä­gung ge­zo­gen wer­den, Al­ter­na­tiv­text und Bild­un­ter­schrift un­ter­schied­lich zu for­mu­lie­ren (Abb. 3): Brow­ser soll­ten nach der HTML Ac­ces­si­bi­li­ty API Map­pings 1.0 die Grup­pe und das Bild im Ac­ces­si­bi­li­ty-Tree ab­le­gen, und Screen­re­a­der soll­ten fol­gen­de In­for­ma­tio­nen aus­ge­ben: „Grup­pe Meis­ter­werk der Bild­hau­er­kunst der Amar­na-Zeit Gra­fik Skulp­tur: Die Büs­te der No­fre­te­te Grup­pe En­de”

Tech­ni­ken für lan­ge Be­schrei­bun­gen: Die lan­ge Be­schrei­bung ist stets mit der Gra­fik ver­knüpft und kann au­ßer­dem ei­ne Nut­zer­ak­ti­on er­for­dern. 1. In dem long­desc-At­tri­but für ein <img>-Tag no­tie­ren Sie ei­ne URI, um da­durch auf ei­ne län­ge­re Be­schrei­bung auf ei­ner an­de­ren Sei­te oder auf ei­ne an­de­re Stel­le der­sel­ben Sei­te zu ver­wei­sen [goo.gl/aKRaQE]. 2. Wenn die Gra­fik mit ei­nem <ob­ject>-Tag statt mit ei­nem <img>-Tag ein­ge­bun­den wird, kann die lan­ge Be­schrei­bung zwi­schen dem öff­nen­den und schlie­ßen­den Tag ein­ge­bet­tet wer­den [goo.gl/N0uKIi]. 3. Steht die Gra­fik in ei­nem <fi­gu­re>-Tag, kön­nen Sie ent­we­der über ei­nen Link in­ner­halb des <fi­gu­re>-Tags auf die lan­ge Be­schrei­bung ver­wei­sen (das ent­spricht im Prin­zip dem long­desc-At­tri­but, nur dass der Link für al­le zu­gäng­lich ist, goo.gl/ gDbQJF) – oder aber Sie nut­zen ein <de­tails>-Tag in­ner­halb des <fi­gu­re>-Tags für die lan­ge Be­schrei­bung (al­ler­dings füt­tern der­zeit nicht al­le Brow­ser den Ac­ces­si­bi­li­ty-Tree kor­rekt, goo.gl/AEs1qH).

AB­GREN­ZUNGS­PRO­BLE­MA­TIK

Es soll­te in­zwi­schen deut­lich sein, dass für ei­ne Gra­fik ver­schie­de­ne Text­al­ter­na­ti­ven in­fra­ge kom­men – ab­hän­gig vom In­halt und Zweck, aber auch vom Kon­text der Gra­fik. Ob­wohl der Kon­text stets bei der For­mu­lie­rung ei­ner Text­al­ter­na­ti­ve ein­be­zo­gen wer­den muss, so gibt es auch HTML-Tech­ni­ken, die ent­schei­dend für die For­mu­lie­rung ei­ner Text­al­ter­na­ti­ve sind. Ein ty­pi­scher Fall ist ei­ne Teaser-Gra­fik. Wenn da­von aus­ge­gan­gen wird, dass die Gra­fik ver­linkt ist, dann muss ein funk­tio­na­ler Al­ter­na­tiv­text ein­ge­setzt wer­den. Wenn wei­ter­hin da­von aus­ge­gan­gen wird, dass die Über­schrift eben­falls ver­linkt ist und zum glei­chen Ziel wie die ver­link­te Gra­fik führt, muss – um die Kon­sis­tenz zu be­wah­ren [goo.gl/bv­tQbJ] – als Al­ter­na­tiv­text der Über­schriften­text ein­ge­setzt wer­den: Dass jetzt zwei Links mit glei­chem Na­men auf­ein­an­der fol­gen, ist zwar kon­form zu den WCAG 2.0, aber ins­be­son­de­re auf Web­sei­ten, auf de­nen vie­le dop­pel­te Links vor­kom­men, ist die Be­die­nung für Tas­ta­tur­nut­zer (ein­schließ­lich Screen­re­a­der­nut­zer) un­nö­tig er­schwert. Um die Zahl der Tab­stopps zu hal­bie­ren, kön­nen Bild und Über­schrift in ei­nem Link aus­ge­spielt wer­den. Es soll­te jetzt ein lee­rer Al­ter­na­tiv­text ein­ge­setzt wer­den, weil der Link be­reits ei­nen Na­men hat, der Aus­kunft über den Link­zweck gibt: Die Gra­fik könn­te aber ge­nau­so gut nicht ver­linkt sein und ei­nen iden­ti­fi­zie­ren­den Al­ter­na­tiv­text er­hal­ten. Ver­link­te Gra­fi­ken mit iden­ti­fi­zie­ren­dem Al­ter­na­tiv­text kön­nen aber (doch) ver­linkt wer­den (und mög­lichst bar­rie­re­frei sein), wenn die Links aus der Fo­kus-Rei­hen­fol­ge ent­fernt wer­den und au­ßer­dem die Se­man­tik der Links vor Screen­re­a­dern ver­bor­gen wird [goo.gl/eWz­k5d]: In der Pra­xis gibt es vie­le wei­te­re Ab­gren­zungs­pro­ble­ma­ti­ken, sei es der Um­gang mit Bild­un­ter­schrif­ten, die Un­ter­scheid­bar­keit von Al­ter­na­tiv­tex­ten in Bil­der­ga­le­ri­en oder die Be­stim­mung der Text­al­ter­na­ti­ve von zu­sam­men­ge­setz­ten Bil­dern. Wich­tig ist zu­nächst die Un­ter­schei­dung zwi­schen funk­tio­na­len Text­al­ter­na­ti­ven und nicht funk­tio­na­len Text­al­ter­na­ti­ven. Dar­über hin­aus soll­ten Sie vor al­lem mit dem Kon­text von Gra­fi­ken ar­bei­ten: Wenn Sie Bil­der aus­schal­ten, fehlt dann ei­ne In­for­ma­ti­on, die für das Ver­ständ­nis der In­hal­te er­for­der­lich ist? Die Ant­wort auf die­se Fra­ge be­stimmt den Zweck und so­mit auch die Text­al­ter­na­ti­ve ei­ner (nicht ver­link­ten) Gra­fik.

Jan Hell­busch ist seit 15 Jah­ren Ac­ces­si­bi­li­ty­Con­sul­tant und er­stellt Gut­ach­ten zur Bar­rie­re­frei­heit von Web­sites und We­b­an­wen­dun­gen. Er teilt sein Wis­sen zum The­ma in Bü­chern wie „Bar­rie­re­frei­heit ver­ste­hen und um­set­zen” und „Bar­rie­re­frei­es Web­de­sign” und be­treibt seit 2001 die Web­site bar­rie­re­frei­es-web­de­sign.de.

Abb. 1: Wel­chen Zweck er­füllt die Gra­fik?

Abb. 2: Ein Bild als de­ko­ra­ti­ves Ele­ment

Abb. 4: Ein ty­pi­scher Teaser mit ver­link­ter Gra­fik und ver­link­ter Über­schrift

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.