W3C

CSS techniky pro Web Content Accessibility Guidelines 1.0

W3C Note 6 November 2000

Tato verze:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
(čistý text, PostScript, PDF, gzip tar komprimace HTML, zip komprimace HTML)
Poslední verze:
http://www.w3.org/TR/WCAG10-CSS-TECHS/
Předchozí verze:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/
Autoř překladu:
Thomas Ziegler
Datum vydání:
16. února 2007
Editoři:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison;
Ian Jacobs, W3C

Abstrakt

Tento dokument popisuje postupy využívané při vytváření přístupných Kaskádových stylů (CSS). Kaskádové styly jsou definovány W3C doporučením "CSS Level 1" [CSS1] a "CSS Level 2" [CSS2]. Tento dokument je určen na pomoc tvůrcům webových obsahů kteří se chtějí řídit podle "Web Content Accessibility Guidelines 1.0" ([WCAG10]). I když mohou postupy popsané v tomto dokumentu pomoci lidem vytvářet CSS které vyhovují "Web Content Accessibility Guidelines 1.0", nejsou tyto postupy ani zárukou shody s WCAG 1.0 a nejsou ani jediným způsobem jak mohou autoři vyhovující obsah vytvářet.

Tento dokument je částí série dokumentů o postupech vytváření přístupného webového obsahu. Informace o dalších dokumentech této série získáte na "Techniques for Web Content Accessibility Guidelines 1.0" [WCAG10-TECHS].

Poznámka: Tento dokument obsahuje množství příkladů, které ilustrují přístupná řešení v CSS, ale také uvádí příklady postupů, které jsou již překonané a tvůrci obsahů by podle nich neměli postupovat. Tyto příklady jsou zvýrazněné a čtenáři by k nim měli přistupovat s rezervou - jsou určeny pouze pro ilustrativní účely.

Stav tohoto dokumentu

Tato verze byla publikována, aby byly opraveny některé nefungující odkazy z verze předchozí.

Verze tohoto dokumentu z 6. listopadu 2000 spadá do kategorie Poznámek (Notes) vytvořených a schválených skupinou Web Content Accessibility Guidelines Working Group (WCAG WG). Tento dokument dosud nebyl přezkoumán či schválen členy W3C. Tato série dokumentů nahrazuje a překonává dokument 5 May 1999 W3C Note Techniques for Web Content Accessibility Guidelines 1.0.Ten byl rozdělen do menších tematických celků, které se tak mohou nezávisle vyvíjet. Tématicky užší dokumenty umožňují autorům soustředit se na konkrétní technologii.

Zatímco "Web Content Accessibility Guidelines 1.0" doporučení [WCAG10] je stabilní a trvalý dokument, od této skupiny doprovodných dokumentů se očekává, že se bude vyvíjet s tím, jak se bude vyvíjet technologie a s tím, jak budou weboví tvůrci objevovat efektivnější metody vytváření přístupného obsahu.

Historie změn dokumentů je k dispozici, stejně tak jako seznam řešených a uzavřených otázek. Uvítáme komentáře k dokumentu a návrhy řešení současných otázek. Prosím pošlete svoje detailní komentáře k tomuto dokumentu skupině, která na něm pracuje na w3c-wai-gl@w3.org; k dispozici jsou veřejné archívy.

Seznam známých chyb v tomto dokumentu je dostupný na "Errata in Web Content Accessibility Guidelines." Další chyby prosím ohlaste na wai-wcag-editor@w3.org.

Na Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) spadající pod World Wide Web Consortium (W3C) jsou dostupné různé zdroje o přístupnosti na webu. WAI Accessibility Guidelines jsou vytvořeny jak část WAI Technical Activity. Cíle Web Content Accessibility Guidelines Working Group jsou popsány v této listině.

K dispozici je seznam současných W3C doporučení a jiných technických dokumentů.

Obsah


1 Snižte náklady na údržbu a zvyšte konzistenci

Kontrolní body v této sekci: 14.3 Design by měl být jednotný ve všech částech prezentace. [Priority 3] .

2 Potlačení stylu uživatelem

Kontrolní body této sekce: 11.2 Vyhněte se vlastnostem technologií W3C, které jsou již překonané. [Priority 2] .

Aby se zaručilo, že uživatelé mohou mít kontrolu nad styly, je v CSS2 změněn význam operátoru "!important" definovaného v CSS1. V CSS1 měli tvůrci vždy poslední slovo. V CSS2 však v případě, že stylový předpis uživatele obsahuje "!important", má takový předpis přednost před jakýmkoliv příslušným pravidlem ve stylovém předpisu autora. Toto je důležitá vlastnost pro uživatele, kteří vyžadují velká písmena, určité barevné kombinace či kontrast, nebo se naopak musí určitým kombinacím vyhnout, atd. Ku příkladu následující pravidlo určuje velkou velikost písma pro text odstavce a potlačí tak autorovo pravidlo se shodnou prioritou:

Příklad.

  
 P { font-size: 24pt ! important }
 

Hodnota 'inherit' z CSS2 - dostupná pro každou vlastnost - vede ke zhuštění stylového pravidla "!important", kterým se pak řídí třeba i celý dokument. Ku příkladu, následující pravidlo vynutí pro všechna pozadí bílou a všechna popředí černou barvu:

Příklad.

   
 /*   Nastaví barvu textu na černou a barvu pozadí na bílou pro tělo dokumentu.  */
 
 BODY {     
   color: black ! important ;      
   background: white ! important  
 }
 
  /*   Způsobí, že hodnoty barvy a pozadí zesílené pravidlem !important 
  zdědí všechny ostatní elementy. Všimněte si, že tohle může být potlačeno jinými, 
  více specifickými uživatelskými styly.  */
 
 * {   
   color: inherit ! important ;   
   background: inherit ! important  
 }
 

CSS2 také obsahuje tyto vlastnosti pro ovládání prezentace uživatelem:

K nakreslení silné černé čáry kolem elementu když je zaostřený (tj. jsou do něj směřovány události klávesnice či jiného vstupu) a silné červené čáry když je aktivní, může být použito např. následující pravidlo:

Příklad.

   
 :focus  { outline: thick solid black }  
 :active { outline: thick solid red }
 

3 Jednotky míry

Kontrolní body této sekce: 3.4 U hodnot atributů značkovacího jazyka a u hodnot vlastností stylových předpisů používejte spíše relativní jednotky než absolutní. [Priority 2] .

Postupy:

Příklad.

K určení velikosti písma používejte raději em:

    H1 { font-size: 2em }
 

než:

    H1 { font-size: 12pt }
 

Konec příkladu.

Příklad.

Používejte relativní a procentuální jednotky délky.

    BODY { margin-left: 15%; margin-right: 10%}
 

Konec příkladu.

Příklad.

Absolutní jednotky používejte pouze v případě, kdy jsou fyzické vlastnosti výstupního média známy.

    .businesscard { font-size: 8pt }
 

Konec příkladu.

4 Generovaný obsah

Kontrolní body této sekce:

Postupy:

CSS2 obsahuje několik mechanismů, které umožňují generování obsahu pomocí stylových předpisů:

Generovaný obsah může sloužit jako záložka pro lepší navigaci a orientaci uživatelů kteří nemohou využít pomůcek jako jsou posuvníky, rámce s obsahovými tabulkami atd.

Kupříkladu následující uživatelský stylový předpis zapříčiní generování slov "End Example" po každém příkladu označeném speciální třídou:

Příklad.

  
 DIV.example:after {     
   content: End Example  
 }
 

Uživatelé by si také mohli kupříkladu očíslovat odstavce, čímž by při čtení dokázali snáze určit svou pozici v dokumentu:

Příklad.

  
 P:before {     
   content: counter(paragraph) ". " ;
     counter-increment: paragraph  
 }
 

5 Písma

Kontrolní body této sekce: 11.2 Vyhněte se již překonaným vlastnostem technologií W3C. [Priorita 2]

Postupy:

Příklad.

Vždy uvádějte obecnou rodinu písma:

   BODY { font-family: "Gill Sans", sans-serif }
 

Konec příkladu.

Příklad.

<STYLE type="text/css">
 
    P.dulezite { font-weight: bold }
    P.mene-dulezite { font-weight: lighter; font-size: smaller }
    H2.podkapitola { font-family: Helvetica, sans-serif }
 </STYLE>
 

Konec příkladu.

6 Textové efekty

Kontrolní bod v této sekci: 7.2 Dokud prohlížeče nedovolí uživatelům kontrolovat blikání, vyhněte se blikání obsahu (tzn. změně prezentace v pravidelných intervalech). [Priorita 2].

Následující vlastnosti CSS2 mohou být použity ke stylizaci textu:

7 Text místo obrázků

Kontrolní body v této sekci: 3.3 Používejte stylové předpisy pro kontrolu rozvžení a prezentace. [Priorita 2].

Tvůrci obsahu by měli ke stylizaci textu používat spíše stylové předpisy, než obrázky reprezentující text. Použití textu namísto obrázků znamená, že obsažené informace budou k dispozici většímu počtu uživatelů (s hlasovými čtečkami, braillovskými zařízeními, grafickými obrazovkami, atd.). Použití stylových předpisů umožní uživatelům potlačit autorův styl a měnit barvy nebo velikosti písma mnohem snáze.

Pokud je nutné použít bitmapu k vytvoření textového efektu (speciální písmo, transformace, stíny, atd.), pak tato bitmapa musí být přístupná (viz sekce o textových ekvivalentech a alternativních stránkách).

Příklad.

V tomto příkladě představuje vložený obrázek velkými červenými písmeny nápis "Příklad", tento text je pak uveden v atributu "alt".

<P>Tohle je 
    <IMG src="VelkyCervenyPriklad.gif" alt="Příklad"> 
    toho, co máme na mysli.
 </P>
 

Konec příkladu.

8 Formátování a pozicování textu

Kontrolní body v této sekci: 3.3 Používejte stylové předpisy pro kontrolu rozvžení a prezentace. [Priorita 2].

Následující vlastnosti specifikace CCS2 mohou být použity k ovládání pozice a formátu textu:

Následující příklad ukazuje, jak pomocí stylového předpisu vytvořit iniciálu na začátku odstavce.

Příklad.

<HEAD>
 <TITLE>Iniciála</TITLE>
 <STYLE type="text/css">
 
       .iniciala { font-size : 120%; font-family : Helvetica } 
 
 </STYLE>
 
 </HEAD>
 <BODY>
 <P><SPAN class="iniciala">B</SPAN>ylo nebylo...
 </BODY>
 

Poznámka. V době kdy, byl psán tento dokument, nebyl ještě CSS pseudo-element ':first-letter', který umožnuje přístup k prvnímu písmenu úseku textu, příliš podporován.

9 Barvy

9.1 Barevný kontrast

Kontrolní body v této sekci:

Postupy

Příklad.

Používejte pro určování barev čísla (zápis v šesnáctkové souststavě nebo procenta), ne jména:

   H1 {color: #808000}
    H1 {color: rgb(50%,50%,0%)}
 

Konec příkladu.

již překonaný příklad.

 H1 {color: red}
 
 

Konec příkladu.

Pro určování barev používajte CSS vlastnosti

Zajistěte, aby spolu barvy popředí a pozadí dobře kontrastovaly. Když určujete barvu popředí, vždy určete také barvu pozadí (a naopak).

9.2 Informace nesmí být pouze v barvě

Kontrolní body v této sekci:

Zajistěte, aby informace nebyly přenášeny pouze prostřednictvím barvy. Když například žádáte od uživatele nějaký vstup, nepište "Vyberte, prosím, možnost z těch, které jsou označeny zeleně." Místo toho zprostředkujte informaci prostřednictvím jiných stylových efektů (např. efekty fontů), nebo kontextu (např. vyčerpávající textové odkazy).

Ku příkladu v tomto dokumentu jsou příklady stylově upraveny (pomocí tabulek stylů) následovně:

Rychlotest! Abyste si otestovali, jestli váš dokument funguje i bez barev, vyzkoušejte ho na monochromatickém monitoru, nebo v prohlížeči vypněte barvy. Také zkuste v prohlížeči nastavit takové barevné schéma, které používá pouze černou, bílou a čtyři "bezpečné" odstíny šedé a uvidíte jak vaše stránka obstojí.

Rychlotest! K otestování toho, zda-li je barevný kontrast dostatečný k tomu, aby byl obsah stránky čitelný i lidmi z vadami vnímání barev nebo těmi s monitory s nízkým rozlišením, vytiskněte vaše stránky na černobílé tiskárně (barvy se vytisknou v odstínech šedi). Také zkuste vytištěné stránky zkopírovat ve dvou nebo třech generacích, abyste viděli, jak vypadá stránka ve snížené kvalitě. To vám pomůže určit, kam přidat nějaká vodítka (např. odkazy bývají obvykle podtřženy), nebo kde jsou tato vodítka příliš malá nebo nevýrazná a neplní svou funkci.

Pro více informací o barvách a kontrastech navštivte [LIGHTHOUSE].

10 Opatřujte seznamy legendou

Kontrolní body v této sekci:

Autoři jsou vedeni k používání tagu UL pro netříděné seznamy a tagu OL pro tříděné seznamy (tzn. k používání správných značek), které v kombinaci s CSS zajištují legendu těchto seznamů.

Následující stylová tabulka specifikace CSS2 ukazuje, jak opatřit vnořené seznamy vytvořené značkami UL nebo OL číslováním. Položky jsou číslovány takto: "1", "1.1", "1.1.1", atd.

Příklad.

<STYLE type="text/css">
     UL, OL { counter-reset: item }
     LI { display: block }
     LI:before { content: counters(item, "."); counter-increment: item }
 
 </STYLE>
 

Konec příkladu.

Dokud nebude specifikace CSS2 široce podporavaná prohlížeči, nebo dokud prohlížeče neumožní interpretaci seznamů jinými způsoby, tvůrci by měli zvážit opatření vnořených seznamů legendou. Následující mechanismus odpovídající specifikaci CSS1 ukazuje, jak skrýt konec seznamu při aktivovaném stylu a jak jej zobrazit, když je styl vypnut, když uživatelský styl překoná skrývací mechanismus, nebo když tabulky stylů prohlížeč nepodporuje.

Příklad.

  <STYLE type="text/css">
       .konecseznamu { display: none }
   </STYLE>
   <UL>
      <LI>Papír:
         <UL>
 
            <LI>Obálky
            <LI>Dopisní papír
            <LI>Čtvrtka
            <LI>Kartón 
            <span class="konecseznamu">(Konec Papíru)</span>
 
         </UL>
 
      <LI>Pera:
         <UL>
 
            <LI>Propisovací pera
            <LI>Fixy na tabuli 
            <span class="endoflist">(Konec per)</span>
 
         </UL>
 
      <LI>Sponky:
         <UL>
 
            <LI>sponky na papír
            <LI>svorky
            <LI>provázek. 
            <span class="endoflist">(Konec sponek)</span>
 
         </UL> 
      <span class="endoflist">(Konec kancelářských potřeb)</span>
 
   </UL>
 

Konec příkladu.

Poznámka: Tento příklad nepomůže v případě označování jednotlivých položek seznamu. S o něco větším úsilím však může autor opatřit podobným zakončením každou položku seznamu.

11 Rozvžení, pozicování, vrstvení a zarovnání

Kontrolní body v této sekci:

Rozvžení, pozicování, vrstvení a zarovnání by mělo být děláno prostřednictvím stylových tabulek (konkrétně pomocí CSS absolutního pozicování a obtékání prvků):

11.1 Když musíte použít obrázky pro vytvoření volného prostoru

Opatřete všechny obrázky textovými ekvivalenty, včetně neviditelných nebo průhledných.

Jestliže tvůrci obashu neumí nebo nemohou využít tabulkové styly a musí tedy použít neviditelné nebo transparentní obrázky (tzn. značku IMG) k rozvržení obrázků na stránce, měli by u nich použít atribut alt=""

již překonaný příklad.

Autoři by neměli zadávat do hodnoty atributu "alt" mezery ve snaze zabránit spojování slov v případě, když se obrázek nezobrazí:

 
    Moje báseň vyžaduje spoustu místa<IMG src="10pttab.gif" 
    alt="&nbsp;&nbsp;&nbsp;">tady.
 
 

V následujícím příkladě je obrázek použit k tomu, aby se jiný obrázek zobrazil na určeném místě:

    <IMG src="mezera.gif" alt="mezera">
 
    <IMG src="barevnekolo.gif" alt="Kolo štěstí">
 
 

Konec již překonaného příkladu

12 Čáry a rámečky

Kontrolní body v této sekci: 6.1 Sestavujte své dokumenty tak, aby byly čitelné i bez tabulek stylů. Např. když je HTML dokument zpracován bez přiřazeného stylu, stále musí být možné, jej přečíst. [Priorita 1].

Čáry a rámečky mohou naznačovat vizuálně vnímajícímu uživateli ohraničení či předěl, ale takový význam nesmí být odvoditelný pouze z vizuálního kontextu.

Používejte následující CSS vlastnosti k určení stylů rámečků:

K vytváření čar a rámečků by tvůrci stránek měli používat kaskádové styly.

Příklad.

V tomto příkladě bude mít element H1 horní rámeček široký 2px, bude čevený a bude ve vzdálenosti 1em od obsahu:

    <HEAD>
 
    <TITLE>Červená čára pomocí CSS</TITLE>
 
    <STYLE type="text/css">
         H1 { padding-top: 1em; border-top: 2px red }
    </STYLE>
 
    </HEAD>
 
    <BODY>
    <H1>Kapitola 8 - Hlasové a dotykové výstupy</H1>
 
    </BODY>
 

Konec příkladu.

Když je horizontální čára (tj. značka HR) použita k naznačení struktury dokumentu, zajistěte, aby tato struktura byla zřejmá také nevizuálně (tj. použitím strukturálního značkování).

Příklad.

V tomto příkladě je k vytvoření navigační lišty použit element DIV, který obsahuje horizontální oddělovač.

    <DIV class="nav-lista">
 
       <HR>
 
       <A rel="Next" href="next.html">[Další strana]</A>
 
       <A rel="Previous" href="previous.html">[Předcházející strana]</A>
       <A rel="First" href="first.html">[První strana]</A>
 
    </DIV>
 
 

Konec příkladu.

13 Hladká transformovatelnost dokumentů prostřednictvím značkování a pozicování pomocí kaskádových stylů.

Kontrolní body v této sekci:

Díky vlastnostem CSS2 může být obsah zobrazen kdekoliv v zorném poli uživatele. Pořadí, v jakém se jednotlivé položky zobrazují na obrazovce může být odlišné od pořadí, ve kterém jsou tyto položky uvedeny ve zdrojovém dokumentu. Následující příklad popisuje několik zásad:

  1. Text se zobrazuje v prohlížeči v jiném pořadí, než v jakém je uveden ve zdrojovém dokumentu.
  2. CSS pozicování může být použito k vytvoření efektu tabulky, stejně jako element TABLE.

Pamatujte, že každý pozicovaný objekt má definovanou třídu (atribut "class"). V následujících příkladech mohl být místo atributu "class" stejně tak dobře použit atribut "id". Atribut "class" byl použit, protože objekty se opakují a tudíž nejsou jedinečné.

již překonaný příklad.

 <head><style type="text/css">
   .menu1 { position: absolute; top: 3em; left: 0em; 
            margin: 0px; font-family: sans-serif; 
            font-size: 120%; color: red; background-color: white }  
   .menu2 { position: absolute; top: 3em; left: 10em; 
            margin: 0px; font-family: sans-serif; 
            font-size: 120%; color: red; background-color: white }
   .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
   .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
   .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
   .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
   .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
   #box { position: absolute; top: 5em; left: 5em } 
 </style></head>
 
 <body>
 <div class="box">
   <span class="menu1">Products</span> 
   <span class="menu2">Locations</span> 
   <span class="item1">Telephones</span> 
   <span class="item2">Computers</span> 
   <span class="item3">Portable Mp3 players</span> 
   <span class="item5">Wisconsin</span> 
   <span class="item4">Idaho</span>
 
 </div>
 </body>
 

Konec již překonaného příkladu.

Když je aplikován styl, zobrazí se text ve dvou sloupcích. Elementy se třídou "menu1" (Products) resp. "menu2" (Locations) budou tvořit záhlaví sloupců. "Telephones, Computers, and Portable MP3 Players" jsou zobrazeny ve sloupci "Products" a "Wisconsin" a "Idaho" ve sloupci "Locations", tak jak je to vidět na následujícím obrázku:

Screenshot kódu z příkladu po aplikování stylů

Není-li na kód aplikován styl, všechen text se zobrazí na jednom řádku: "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho", tedy v pořadí, v jakém jsou položky zapsány ve zdrojovém dokumentu. Takže termíny, které se se styly zobrazily jako záhlaví sloupců, jsou nyní na začátku "seznamu", protože i ve zdrojovém kódu jsou to první dvě položky. Následující obrázek toto ilustruje:

Screenshot kódu z příkladu bez stylů

Následující příklad ukazuje, jak může být stejného vizuálního efektu dosaženo jak pomocí stylů, tak i bez stylů díky použití smysluplnějšího značkování. Na obsah je aplikován strukturální element definičního seznamu (DL). Všiměte si, že v příkladě jsou okraje nastaveny na 0, protože implicitně prohlížeče určité okraje jednotlivým položkám (značka DD) přiřazují.

Příklad

 <head><style type="text/css">
 
   .menu1 { position: absolute; top: 3em; left: 0em; 
            margin: 0px; font-family: sans-serif; 
            font-size: 120%; color: red; background-color: white }  
   .menu2 { position: absolute; top: 3em; left: 10em; 
            margin: 0px; font-family: sans-serif; 
            font-size: 120%; color: red; background-color: white }
   .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
   .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
   .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
   .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
   .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
   #box { position: absolute; top: 5em; left: 5em } 
 </style></head>
 
 <body>
 <div class="box">
 <dl>
   <dt class="menu1">Products</dt>
 
     <dd class="item1">Telephones</dd>
     <dd class="item2">Computers</dd>
 
     <dd class="item3">Portable MP3 Players</dd>
 
   <dt class="menu2">Locations</dt>
 
    <dd class="item4">Idaho</span>
    <dd class="item5">Wisconsin</span>
 
   </dt>
 </dl>
 </div>
 
 </body>
 

Konec příkladu

Když jsou stylové předpisy aplikovány, je výsledek stejný, jako v předcházejícím příkladě. Ovšem jsou-li styly vypnuty, zobrazí se obsah jako dva definiční seznamy, nikoli jako řetězec slov. Co se se styly zobrazovalo jako záhlaví sloupců, jeví se bez stylů jako definované termíny, což opět demonstrují obrázky.

Kód bez je bez stylu, přesto dává smysl

Poznámka. Vyzkoušejte si ten rozdíl sami: Pokusný soubor s lehce transformovatelným stylem.

14 Vytváření pohybu pomocí kaskádových stylů a skriptů

Kontrolní body v této sekci: 7.3 Dokud prohlížeče nebudou umožňovat zastavení pohyblivého obsahu, vyhněte se na stránkach takovému pohybu.[Priorita 2]

15 Zvukové kaskádové styly

Kontrolní body v této sekci: 11.3 Opatřete dokumenty takovými informacemi, aby je uživatelé mohli přijímat podle svých peferencí (tj. uvádějte jazyk dokumentu, druh obsaho, apod.) [Priorita 3].

Zvukové vlastnosti specifikace CSS2 poskytují nevidomým uživatelům a hlasovým čtečkám informace způsobem ne nepodobným tomu, jakým fonty přenášejí vizuální informaci. Následující příklad ukazuje, jak mohou různé zvukové vlasnosti (včetně 'voice-family', což je něco jako zvukový font) sdělit uživateli, že právě sdělovaný obsah je nadpis:

Příklad.

  
 H1 {     
   voice-family: paul;     
   stress: 20;     
   richness: 90;     
   cue-before: url("ping.au")     
 }
 

Konec příkladu

Následující zvukové vlastnosti jsou součástí specifikace CSS2:

Dále vlastnost 'speak-header' popisuje, jak má být čtena hlavička tabulky.

16 Přístup k alternativnímu vyjádření obsahu

Kontrolní body v této sekci: 11.3 Opatřete dokumenty takovými informacemi, aby je uživatelé mohli přijímat podle svých peferencí (tj. uvádějte jazyk dokumentu, druh obsaho, apod.) [Priorita 3].

CSS2 umožňuje uživatelům alternativní přístup k hodnotám atributů pomocí použítí následujících technik:

V následujícím příkladě se hodnota atributu "alt" zobrazí za obrázkem (vizuálně, zvukově, atd.):

Příklad.

  IMG:after { 
     content: attr(alt) 
  }
 
 

Konec příkladu

Uvědomte si, že hodnota atributu se zobrazí i v případě, že samotný obrázek se nezobrazí (uživatel vypnul zobrazování obrázků v prohlížeči).

17 Typy médií

Kontrolní body v této sekci: 11.3 Opatřete dokumenty takovými informacemi, aby je uživatelé mohli přijímat podle svých peferencí (tj. uvádějte jazyk dokumentu, druh obsaho, apod.) [Priorita 3].

Typy médií podle CSS2 (určené pravidlem @media) umožňují autorům a uživatelům vytvářet stylové předpisy pro jednotlivá cílová zařízení. Tyto tabulky mohou uravit obsah na míru pro prezentaci na braillovských zařízeních, hlasových čtečkách či zařízeních pro sazbu na dálku. Použití pravidla @media může také omezit dobu stahování, jelikož umožňuje prohlížečům vynechat nepoužitelná pravidla.


18 Odkazy

Nejnovější verze jakýchkoliv W3C specifikací hledejte v soupisu W3C Technical Reports na http://www.w3.org/TR.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999. This WCAG 1.0 Recommendation is http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
[WCAG10-TECHS]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. This document explains how to implement the checkpoints defined in "Web Content Accessibility Guidelines 1.0". The latest draft of the techniques is available at http://www.w3.org/TR/WCAG10-TECHS/.

19 Zdroje

Poznámka: W3C neručí za dostupnost či funkčnost kterýchkoliv následujících odkazů. Tyto odkazy chápejte jako přidanou hodnotu. Zmínky o produktech nejsou propagací těchto produktů.

19.1 Další metodiky

[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines sestavili Trace R & D Center na University of Wisconsin za financování National Institute on Disability andRehabilitation Research (NIDRR),  U.S. Dept. of Education.

19.2 Dokumenty o přístupnosti

[LIGHTHOUSE]
The Lighthouse poskytuje informace o přístupnosti z pohledu barev a kontrastu.

20 Poděkování

Web Content Guidelines Working Group Co-Chairs:
Jason White, University of Melbourne
Gregg Vanderheiden, Trace Research and Development
Kontakt na W3C Team:
Wendy Chisholm
Rádi bychom poděkovali následujícím lidem, kteří věnovali svů čas a přispěli cennými komentáři ke zformování těchto metodik:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0