C30: Szöveg helyettesítése a képként reprezentált szöveggel és felhasználói interfész vezérlő biztosítása az átváltáshoz CSS segítségével
Alkalmazás
Minden CSS-t támogató technológia
Ez a technika az alábbiakra vonatkozik:
- 1.4.5 teljesítési feltétel (Képként reprezentált szöveg)
- 1.4.9 teljesítési feltétel (Képként reprezentált szöveg megjelenítése (kivétel nélkül))
Leírás
A technika célja annak szemléltetése, hogyan lehet CSS segítségével egy struktúrált HTML szöveget helyettesíteni képként reprezentált szöveggel olyan módon, hogy a felhasználó a beállításainak megfelelően tekinthesse meg a tartalmat. A technika alkalmazásakor a szerkesztő először egy szemantikus elemekkel megjelölt struktúrájú HTML lapot hoz létre. Ezután két vagy három stíluslap kerül megtervezésre ugyanahhoz a laphoz. Ezek közül az egyik a HTML szöveget szöveg formátumban tartalmazza, míg a második CSS tulajdonságok segítségével helyettesíti a HTML szöveget a képként reprezentált szöveggel. Végezetül a szerkesztő szerver- vagy kliens- oldali szkriptekkel biztosít egy vezérlőt, amely az elérhető nézetek közötti átváltást teszi lehetővé.
Ez a technika az 1.4.5-ös és az 1.4.9-es teljesítési feltételeknek tesz eleget, abban az esetben, ha a hozzáférhető megjelenítés nem tartalmazza a képként reprezentált szöveget és a tartalmak közötti átváltásra szolgáló felhasználói interfész vezérlő megfelel a vonatkozó feltételnek. Lehetőség szerint az alapértelmezett megjelenítésnek nem a képként reprezentált szöveget kell tartalmaznia. Ezen kívül a vezérlőnek az oldal elején kell elhelyezkednie.
A felhasználói programok és a segítő technológiák közötti kompatibilitási és konfigurációs problémák kezelésére számos "képes helyettesítési" technika került kifejlesztésre (további információkért lásd a forrásokat). Míg számos olyan megoldás létezik, amelynek segítségével a szerkesztők helyettesíthetik a szövegeket, a technika működését mindenképpen ellenőrizni javallott a segítő technológiákkal való kompatibilitás, valamint a szkriptek, CSS és képek (vagy ezek kombinációjának) hiányzó támogatásának a szempontjából. Mivel meglehetősen nehéz olyan megoldást találni, amely minden esetben működik, ajánlott egy olyan vezérlő biztosítása, amely lehetővé teszi a kép helyettesítő technikát nem alkalmazó megjelenítés megtekintését.
Megjegyzés: A nem megfelelő tartalom megfelelő alternatív verziójának megjelenítése érdekében ez a technika együttesen alkalmazható egy stílusváltó módszerrel. További információkért tekintse meg a C29: Megfelelő alternatív verzió biztosítása stílusváltó segítségével és Understanding Conforming Alternate Versions című részeket.
Példák
1. példa
Egy dizájn stúdió honlapjának két megjelenítése között egy stílusváltó segítségével lehet átkapcsolni. Az alapértelmezett verzióban a fejléc szövegét képként reprezentált szöveg helyettesíti. A lapon egy kapcsoló áll rendelkezésre a szöveges fejlécet tartalmazó verzióra történő átváltáshoz.
A CSS komponens:
Példa kód:
...
<div id="Header">
<h1><span>Pufferfish Design Studio</span></h1>
<h2><span>Surprising Identity and Design Solutions</span></h2>
</div>
...
Az alábbiakban egy olyan CSS szerepel, amely képként reprezentált szöveget tartalmaz. Fontos, hogy a CSS a képernyőn kívülre pozícionálja a fejléc elem tartalmát és így a szöveg hozzáférhető marad a képernyő olvasót alkalmazó felhasználóknak.
Példa kód:
...
#Header h1 {
background-image: url(pufferfish-logo.png);
height: 195px;
width: 290px;
background-repeat: no-repeat;
margin-top: 0;
position: absolute;
}
#Header h1 span {
position: absolute;
left: -999em;
}
#Header h2 {
background-image: url(beauty.png);
background-repeat: no-repeat;
height: 234px;
width: 33px;
margin-left: 8px;
position: absolute;
margin-top: 250px;
}
#Header h2 span {
position: absolute;
left: -999em;
}
Az alábbi kód egy olyan CSS-é, amely nem tartalmaz képként reprezentált szöveget.
Példa kód:
...
#Header h1 {
font: normal 200%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #000099;
background: #ffffff;
}
#Header h2 {
font: normal 160%/100% Garamond, "Times New Roman", serif;
margin-bottom: 0;
color: #336600;
background: #ffffff;
}
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Ellenőrizze, hogy a weboldal tartalmaz-e egy vezérlőt, amely alkalmas az alternatív megjelenítésre történő átváltásra.
-
Ellenőrizze, hogy a vezérlő aktiválásakor a megjelenített lap szöveget tartalmaz (algoritmikusan meghatározott módon) azokon a helyeken, ahol eredetileg képként reprezentált szövegek kerültek alkalmazásra.
Elvárható eredmények
-
Az összes fenti ellenőrzés igaz.