Download
1 / 31
310 likes | 369 Views
Learn how to create meaningful sequences and maintain sensor characteristics using HTML and CSS techniques to separate information and structure from appearance.
E N D
1.3 Prispôsobivosť Ing. Marián Pecko, PhD. Doc. Ing. Juraj Vaculík, PhD.
1.3.1 informácie a vzťahy • 1.3.2 zmysluplné sekvencie • 1.3.3 charakteristika senzorov (ovládacích prvkov)
Úroveň Single-A 1.3.1 Informácie a vzťahy
Situácia A: Technológia poskytuje sémantickú štruktúru aby vytvárala informácie a vzťahy vyjadrené cez programovo určiteľný výzor: • G115: Použiť sémantické prvky na vyznačenie štruktúry <p>Chceš vyskúšať náš nový nástroj sám? Je dostupná voľná verzia na skúšanie v našej <a href="download.html"> sekcií download</a></p> H49: Použiť sémantické značenie na označenie zdôraznenia alebo špeciálneho textu ...Whatshe <em>really</em> meant to saywas, „Thisisnotok, itis <strong>excellent</strong>“!... • G117: Použiť text pre vyjadrenie informácie, ktorá je vyjadrená zmenami vo formátovaní textu Napr. online dokument, ktorý prechádza viacerými návrhmi; nové vpísania sú podčiarknuté a vymazania sú prečiarknuté; na konci návrhu je „História zmien“ kde je zoznam všetkých zmien • G140: Oddeliť informácie a štruktúru od vzhľadu pre umožnenie rôznych vzhľadov HTML pre štruktúru a CSS pre formátovanie dokumentu Používať tzv. „tagged PDF“, PDF ktoré má v sebe informáciu o štruktúre
Vytvárať informácie a vzťahy vyjadrené cez programovo určiteľný výzor použitím nasledovných techník: • G138: Použiť sémantickú značky vždy keď sú použité farebné nápovede povinné položky formulára – popisky sú červeným a jeho text je zvýraznený prvkom strong • H51: Použiť značkutable na prezentovanie tabuľkovej informácie • H39: Použiť prvokcaption pre prepojenie popiskov tabuľkových dát s tabuľkovými dátami • H73: Použiť atribútsummary prvku table pre podanie prehľadu o dátovej tabuľke • H63: Použiť atribútscope pre prepojenie buniek hlavičky s dátovými bunkami v dátovej tabuľke • H43: Použiť atribútyid a headers prepojenie dátových buniek s bunkami hlavičiek v dátovej tabuľke
H44: Použiť prvoklabel pre prepojenie textového popisu s ovládaním formulára • H65: Použiť atribúttitle pre identifikovanie ovládania formuláru keď nemôže byť použitý prvok label • H71: Poskytnúť popis skupín ovládania formuláru použitím prvkov fieldset a legend • H85: Použiť optgroup pre spájanie prvkov option vo vnútri elementu select • H48: Použiť pre zoznamy ol, ul a dl • H42: Použiť h1-h6 pre identifikovanie hlavičiek • SCR21: Použiť funkcieDOM pre vloženie obsahu na stránku document.write() nefunguje v XHTML a vlastnosť object.innerHTML nie je súčasťou DOM, preto použijeme na vytvorenie prvku createElement(), na vytvorenie textu createTextNode(), pre vkladanie a mazanie prvkov appendChild(), removeChild(), insertBefore() a replaceChild()
Situácia B: Použitá technológia neposkytuje sémantickú štruktúru, aby vytvárala informácie a vzťahy vyjadrené cez programovo určiteľný výzor: • G117: Použiť formátovanietextupre vyjadrenie informácie, ktorá je vyjadrená zmenami vo vzhľade textu • Vytvárať informácie a vzťahy vyjadrené cez programovo určiteľný výzor alebo dostupným v texte použitím nasledovných techník: • T1: Použiť štandardné konvencie formátovania textu pre odseky Dva odseky, každý začína a končí prázdnym riadkom • T2: Použiť štandardné konvencie formátovania textu pre zoznamy - položka netriedeného zoznamu - položka netriedeného zoznamu - položka netriedeného zoznamu • T3: Použiť štandardné konvencie formátovania textu pre hlavičky Za odsekom nasledujú dva prázdne riadky, potom nadpis, potom jeden prázdny riadok a potomďalší odsek.
C22: Použiť CSS pre riadenie vizuálnej prezentácie textu • Pre layout stránky použiť radšej CSS ako tabuľky • G162: Umiestňovanie popiskov pre maximalizovanie predvídateľnosti vzťahov • Poskytnúť popisok pre všetky ovládacie prvky formulára, ktoré nemajú implicitné popisky • G141: Organizovanie stránky použitím nadpisov
F2: Použitie zmien v prezentácii textu pre zachovanie informácie bez použitia príslušných značiek alebo textu použitie CSS aby prvok p vyzeral ako nadpis • F17: Nedostatočné informácie v DOM pre určenie vzťahovv HTML jedna k jednej (napr. medzi popiskami s rovnakým id) • F33: Použitie znakov bielej medzery pre vytvorenie viacerých stĺpcov v obsahu s jednoduchým textom • F34: Použitie znakov bielej medzery pre formátovanie tabuliek v obsahu s jednoduchým textom • F42: Použitie skriptovacích udalostí pre emulovanie odkazov spôsobom, ktorý nie je programovo určiteľný <spanonclick="this.location.href='newpage.html'"> Fakelink </span>
F43: Použitie štrukturálnych značiek spôsobom, ktorý nepredstavuje vzťahy v obsahu použitie nadpisu pre zvýraznenie textu • F46: Použitie prvkov th, caption alebo nie prázdny atribút summary v tabuľkách pre layout • F48: Použitie prvku pre na označenie tabuľkovej informácie • F62: Nedostatočná informácia v DOM pre určenie špecifických vzťahov v XML • F68: Priradenie popiskov k ovládacím prvkom spôsobom, ktorý nie je programovo určiteľný bez prvku label; implicitne definovaný label • F87: Vloženie nedekoratívnehoobsahu použitím pseudoprvkov :before a :after a vlastnosti content v CSS
Úroveň Single-A 1.3.2 Zmysluplná postupnosť
G57: Postupnosť obsahu v zmysluplnej postupnosti pre celý obsah na webovej stránke • Vytvárať postupnosť v obsahu zmysluplne použitím jednej z nasledujúcich techník aG57: Usporiadanie obsahu v zmysluplnej postupnosti pre tie postupnosti
Príklad <h1> Stránka Múzea </ h1> <ul id="nav"> <li> <a href="#"> Link 1 </ a> </ li> ... <li> <a href="#"> Link 10 </ a> </ li> </ Ul> <div id="description"> <h2> Mona Lisa </ h2> <p> <img src="img.png" alt="Mona Lisa"> </ P> <p> ... Podrobný popis obrázku ... </ p> </div>
H34: Použiť Unicode značku right-to-left (RLM) alebo left-to-right (LRM) pre zmiešané smerovanie textu v riadu left-to-rightmark: ‎ alebo ‎ (U+200E) right-to-leftmark: ‏ alebo ‏ (U+200F) • H56: Použiť atribút dir na riadkovom prvku pre vyriešenie problému s vnorenými smerovaniami <p>The title says "<spanlang="he" dir="rtl">פעילותהבינאום, W3C</span>" in Hebrew.</p> • C6: Umiestňovať obsah založený na štrukturálnom značkovaní • C8: Použiť CSS letter-spacing pre ovládanie medzier v rámci slova • C27: DOM usporiadanie, aby zodpovedalo vizuálnemu usporiadaniu
použiť text zarovnaný • doľava pre jazyky, v ktorých sa píše zľava doprava a • text zarovnaný doprava pre jazyky, v ktorých sa píše sprava doľava • poskytnúť odkaz pre linearizované zobrazovanie • poskytnúť prepínačštýlov na prepínanie poradia zobrazovania
F1: Zmena významu obsahu poziciovaním informácie cez CSS <spanclass="menu1">Products</span> <spanclass="menu2">Locations</span> .menu1 { position: absolute; top: 3em; left: 10em; } .menu2 { position: absolute; top: 3em; left: 0; }
F32: Použite znakov bielej medzery pre kontrolovanie medzier v rámci slova • F33: Použitie znakov bielej medzery pre vytvorenie viacerých stĺpcov v obsahu s jednoduchým textom • F34: Použitie znakov bielej medzery pre formátovanie tabuliek v obsahu s jednoduchým textom • F49: Použitie tabuľky pre layout, ktorá nedáva zmysel keď je linearizovaná <table> <tr> <td ><imgsrc="logo.gif" alt="XYZ mountaineering"></td> <tdrowspan="2" valign="bottom">top!</td> </tr> <tr> <td>XYZ getsyou to the</td> </tr> </table>
Úroveň Single-A 1.3.3 Zmyslové vlastnosti
G96: Poskytovať textovú identifikáciu prvkov, ktoré inak závisia na zmyslovej informácii aby boli pochopené tlačidlo na odoslanie formuláru kruhového tvaru a vo vnútri text „go“; textová informácia je „pre odoslanie formulára stlač kruhové tlačidlo označečenégo“
Použiť obrázok s textovou alternatívou pre grafické symboly namiesto Unicode piktogramov s požadovaným grafickým vzhľadom, ale iným významom.
F14: Identifikovanie obsahu len podľa jeho tvaru a umiestnenia • F26: Použitie samotného grafického symbolu pre poskytnutie informácie znak „X“ označuje, že tovar nie je na sklade
