1.1 Textové alternatívy

1. 1.1 Textové alternatívy Ing. Marián Pecko, PhD.

2. Úroveň Single-A 1.1.1 Obsah bez textu

3. Postačujúce techniky

4. Situácia A: Ak krátky popis môže poslúžiť rovnakému účelu a uvádza rovnakú informáciu ako obsah bez textu: • G94: Poskytnúť krátku textovú alternatívu pre obsah bez textu, ktorá slúži rovnakému účelu a uvádza rovnakú informáciu ako obsah bez textu použitím techniky krátkej textovej alternatívy Situácia B: Ak krátky popis nemôže poslúžiť rovnakému účelu a uvádza rovnakú informáciu ako obsah bez textu (napr. graf alebo diagram) • G95: Poskytnúť krátku textovú alternatívu, ktorá poskytuje stručný popis obsahu bez textu použitím techniky krátkej textovej alternatívy a jednej z nasledujúcich techník pre dlhý popis:

5. G92: Poskytnúť dlhý popis pre obsah bez textu, ktorý slúži rovnakému účelu a uvádza rovnakú informáciu použitím techniky dlhej textovej alternatívy • G74: Poskytnúť dlhý popis v texte blízko obsahu bez textu, s odkazom na umiestnenie dlhého popisu v krátkom popise K dispozícii je stĺpcový graf na stránke zobrazujúci predaj pre prvých troch top predajcov. Krátka textová alternatíva: „Graf októbrového predaja prvých troch predajcov. Podrobnosti nájdete v texte za grafom.“ Odsek priamo pod grafom: „Tržby za október ukazujú, že Mary vedie so 400 jednotkami...“ • G73: Poskytnúť dlhý popis na inom mieste s odkazom naň, ktorý je bezprostredne pri obsahu bez textu K dispozícii je stĺpcový graf na stránke zobrazujúci predaj pre prvých troch top predajcov. Krátka textová alternatíva: „Graf októbrového predaja prvých troch predajcov.“ Pod grafom je uvedený obrázok, ktorý odkazuje na dlhý popis a jeho alternatívny text je „Dlhý popis grafu“. Ak odkaz vedie na koniec stránky, potom tam bude nadpis „Popis grafov na tejto stránke“ a odkaz vedie na daný popis. Na konci popisu bude [koniec popisu] Ak vedie odkaz na inú stránku s názvom „Graf októbrového predaja prvých troch predajcov“ na konci popisu bude [Koniec popisu.<a>Naspäť na graf predaja</a>]. Ďalšia možnosť je použiť <figcaption>, ktorý je uvedený bezprostredne pod grafom, ako odkaz na dlhý popis. Atribút title zdôrazňuje, že je to odkaz na dlhý popis. Majme audio nahrávku. Odkazy na audio súbor a jeho prepis sú uvedené vedľa seba.

6. Situácia C: Ak obsah bez textu je ovládanie alebo umožňuje používateľský vstup • G82: Poskytnúť textovú alternatívu, ktorá identifikuje účel obsahu bez textu použitím techniky krátkej textovej alternatívy • H44: Použiť prvok label pre priradenie textových popisov ovládacím prvkom formulára Základom je explicitne priradiť popisok k ovládaciemu prvku formulára (použitím atribútu for). Prvok label sa umiestňuje za prvky - input type="checkbox", input type="radio" pri ostatných nezávisí na umiestnení. Možno ho použiť pri prvkoch button, input (okrem type="hidden"), keygen, meter, output, progress, select, textarea • H65: Použiť atribút title pre identifikáciu ovládacích prvkov formulára kde nie je možné použiť prvok label

7. Situácia D: Ak obsah bez textu je časovo založené médium (vrátane len videa naživo a len audia naživo); test alebo úloha, ktorá by nebola platná ak by bol prítomný text; alebo primárne určený na vytvorenie špecifického zmyslového zážitku: • Poskytnúť popisný štítok použitím techniky krátkeho popisu • G68: Poskytnúť popisný štítok, ktorý popisuje účel len audia naživo alebo len videa naživo použitím techniky krátkeho popisu • G100: Poskytnúť povolený názov alebo popisný názov obsahu bez textu použitím techniky krátkeho popisu

8. Situácia E: Ak obsah bez textu je CAPTCHA • G143: Poskytnúť textovú alternatívu, ktorá popisuje účel CAPTCHyaG144: Uistiť sa, že webová stránka obsahuje ďalšiu CAPTCHu, ktorá slúži na rovnaký účel použitím inej formy Textová alternatíva je „Napíšte slovo v obrázku“, „Napíšte písmeno prehrané v audio“. CHAPTCHA by mala obsahovať viacej foriem – opísať text, napísať text z audio súboru, napísať správny výsledok textu „Koľko je dva plus sedem?“ Situácia F: Ak by mal byť obsah bez textu ignorovaný podpornými technológiami: • Implementovať alebo označiť obsah bez textu tak aby bol ignorovaný podpornými technológiami použitím techniky špecifickej pre danú technológiu • H67: Použitie prázdneho atribútu alt a bez atribútu title na prvkoch img • C9: Použitie CSS pre vkladanie dekoratívnych obrázkov Použitím vlastností background, backgroun-image, content (v kombinácii s :before a :after), list-style-image.

9. Techniky krátkej textovej alternatívy • H36: Použiť atribút alt na obrázkoch použitých ako tlačidlo submit <inputtype="image" name="submit" src="button.gif" alt="Submit"> • H2: Kombinácia priľahlého obrázku a textového odkazu pre rovnaký zdroj <a href="products.html"><imgsrc="icon.gif" alt="">Productspage</a> <a href="foo.htm"><imgsrc="house.gif" alt="homepageicon">Go to thehomepage</a> <a href="products.html"><imgsrc="products.gif" alt="Productspage">Productspage</a> • H37: Použiť atribút alt na prvkoch img <imgsrc="newsletter.gif" alt="Freenewsletter. Get freerecipes, news, and more. Learn more."> • H53: Použiť telo prvku object <objectclassid="http://www.example.com/analogclock.py"> <p>Sem pôjde dáky text, ktorý popisuje objekt.</p> </object>

10. Techniky krátkej textovej alternatívy • H24: Poskytnúť textové alternatívy pre prvky area v obrázkovej mape <imgsrc="welcome.gif" usemap="#map1" alt="Areas in thelibrary. Selectanareafor more information on thatarea."> <map id="map1" name="map1"> <areashape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <areashape="rect" coords="34,34,100,100" href="media.html" alt="Audiovisuallab"> </map> • H86: Poskytnúť textové alternatívy pre ASCII umenie, emotikonov a leetspeak emotikony =8-0 (maškara) <abbr title="maškara">=8-0</abbr> <imgsrc="fright.gif" alt="maškara">

11. Techniky krátkej textovej alternatívy ASCII umenie • obrázky sú poskladané zo znakov leetspeak • spôsob písania slov kde sa nahradzujú písmena číslicami a inými znakmi • špeciálna forma symbolického písma • možno ho považovať za substitučnú šifru <abbrtitle="Austin Rocks">Au5t1N r0xx0rz</abbr>

12. Techniky krátkej textovej alternatívy <abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>

13. Techniky krátkej textovej alternatívy • H30: Poskytnúť text odkazu, ktorý popisuje účel odkazu pre prvky a <a href="routes.html">CurrentroutesatBouldersClimbingGym</a> <a href="routes.html"><imgsrc="topo.gif" alt="CurrentroutesatBouldersClimbingGym"></a> <a href="routes.html"><imgsrc="topo.gif" alt="">CurrentroutesatBouldersClimbingGym</a> <a href="foo.html"><imgsrc="house.gif" alt="icon">Homepage</a> <a href="WMFP.pdf"><imgsrc="pdficon.gif" alt="PDFformat">WoodendMusic Festival Program</a>

14. Techniky krátkej textovej alternatívy • G196: Použiť textovú alternatívu na jednu položku v rámci skupiny obrázkov, ktorý popisuje všetky položky v skupine <p>Rating: <img src="star1" alt="3 outof 5 stars"> <img src="star1" alt=""> <img src="star1" alt=""> <img src="star2" alt=""> <img src="star2" alt=""> </p> <p>ConformanceLevel:</p> <buttonname="A"><imgsrc="a.png" alt="A"></button><br> <buttonname="AA"><imgsrc="a.png" alt="AA"><imgsrc="a.png" alt=""></button><br> <buttonname="AAA"><imgsrc="a.png" alt="AAA"><imgsrc="a.png" alt=""><imgsrc="a.png" alt=""></button>

15. Techniky dlhej textovej alternatívy • H53: Použiť telo prvku object

16. Poradenské techniky

17. Všeobecné techniky pre informatívny netextový obsah • identifikovať informatívny netextový obsah • zachovať krátke popisy krátke • popísať obrázky, ktoré obsahujú text • poskytnúť dlhší popis na netextovom obsahu kde sa požaduje len popisný štítok použitím techniky pre dlhý popis • poskytnúť rôzne veľkosti pre netextový obsah ak nemôže mať ako ekvivalent prístupnú alternatívu • na zmenu veľkosti obrázku použiť skripty na strane servera • Všeobecné techniky pre živý netextový obsah • poskytnúť odkaz na textovú informáciu, ktorá poskytuje porovnateľné informácie • Všeobecné techniky pre minimalizovanie bariéry CAPTCHy • poskytovať viac ako dva druhy CAPTCHy • poskytovať prístup k ľudskému zástupcovi oddelenia služieb zákazníkom, ktorý môže obísť CAPTCHu • nevyžadovať CAPTCHupre oprávnených používateľov

18. HTML techniky • H46: Používať noembed s embed <embedsrc="moviename.swf" width="100" height="80" pluginspage="http://example.com/shockwave/download/"> <noembed> <imgalt="StillfromMovie" src="moviename.gif" width="100" height="80"> </noembed> • písať pre prehliadače, ktoré nepodporujú rámy • poskytovať alternatívny obsah pre iframe • H27: Poskytovať textové a netextové alternatívy pre object <objectclassid="java:Press.class" width="500" height="500"> Astemperatureincreases, themolecules in theballoon... </object> • nepoužívať dlhé popisy pre iframe • poskytovať dodatočné textové odkazy pre obrázkové mapy na strane klienta

19. CSS techniky • C18: Používať v layoutoch CSS margin a padding namiesto prázdnych obrázkov dizajnéri používajú dakedy obrázok 1x1 px, priesvitné GIF aby mali lepšiu kontrolu nad layoutom • používať CSS background, :before alebo :after pre dekoratívne obrázky namiesto prvku img • zobrazovať prázdne bunky tabuľky • Metadáta techniky • použiť metadáta pre prepojenie textových prepisov s video • použiť metadáta pre prepojenie textových prepisov s audio obsahom

20. Zlyhania pre kritérium úspechu

21. F30: Použitie textových alternatív, ktoré nie sú alternatívy spacer, Picture, Picture 1, 001, intro#1, oct.jpg, chart.jpg • F20: Neaktualizovanie textových alternatív pri zmene netextového obsahu • F3: Použitie CSS na vkladanie obrázkov, ktoré nesú dôležitú informáciu • F39: Poskytnutie textových alternatív, ktoré nie sú nulové; pri obrázkoch, ktoré majú byť ignorované podpornými technológiami alt="spacer", alt="image", alt=" " • F38: Vynechanie atribútu alt pri netextovom obsahu, ktorý je použitý pre dekoratívne účely • F71: Použitie textu, ktorý vyzerá inak ako má význam, pre reprezentovanie textu bez poskytnutia textovej alternatívy U+0063 a U+03F2 vyzerajú ako písmeno „c“ ale prvé je z východnej abecedy a druhé je z gréckej abecedy U+0033 a U+04E0 vyzerajú ako písmeno „3“ ale druhé je z cyriliky • F72: Použitie ASCII umenia bez poskytnutia textovej alternatívy • F65: Vynechanie atribútu alt na prvkoch img, area a input (typ image) • F67: Poskytnutie dlhého popisu pre netextový obsah, ktorý neslúži rovnakému účelu alebo nepredstavuje rovnakú informáciu

22. Ďakujem za pozornosť