C7: A hivatkozás szövegének részleges elrejtése CSS kód segítségével
Alkalmazás
Minden CSS-t támogató technológia.
Ez a technika az alábbiakra vonatkozik:
- 2.4.4 teljesítési feltétel (Hivatkozás célja (kontextusban))
- 2.4.9 teljesítési feltétel (Hivatkozás célja (csak hivatkozásnak))
Leírás
A technika célja a hivatkozás szövegének a hivatkozás egyedi funkcióját ismertető leírással történő kiegészítése. A kiegészítő szöveg azonban úgy kerül megformázásra, hogy a CSS-t támogató felhasználói programok alkalmazása esetén az ne jelenjen meg a képernyőn. Abban az esetben, ha a szövegkörnyezet információtartalma megkívánja a hivatkozás megjelenített szövegének magyarázatát, akkor ezzel a technikával írható le a hivatkozás beviteli funkciója, de csak a szöveg egy része fog megjelenni.
Ez a technika hozza létre a szöveg elrejtésére
szolgáló CSS szelektort, amely egy 1-pixel méretű
dobozban elrejti és a látókörön kívülre helyezi a
feliratot. Ez biztosítja azt, hogy a szöveg nem fog
megjelenni a képernyőn, de hozzáférhető marad a
képernyő-és braille olvasók, valamint a hasonló segítő
technikák számára. Fontos, hogy a technika nem használja
a visibility:hidden vagy
display:none eszközöket, mivel ezek a
képernyőn történő megjelenés megakadályozásán kívül, a
segítő technológiák elől is elrejtik a szöveget.
1. megjegyzés: A hivatkozása szövegének elrejtéséhez kapcsolódó technika támogatókra talált néhány képernyőolvasót alkalmazó felhasználó és webszerkesztői szervezet személyében. Bizonyos weboldalakon ez a technika hatékonynak bizonyult. Más képernyőolvasót alkalmazó felhasználók és akadálymentesítési szakértők azonban nem javasolják a technika általános használatát, mivel ez hátrányosan érintheti a csevegést, és korlátozhatja a tapasztalt képernyőolvasó használókat a bőbeszédűség ellenőrzésében. A Munkacsoport szerint a technika olyan weboldalak esetében hasznos, amelyeknek a rejtett szöveges mezőiben nincs ismétlődő tartalom.
2. megjegyzés: Ez a technika kombinálható olyan stílus átalakító technikával, amely egy nem-megfelelő tartalom megfelelő alternatív verzióját jeleníti meg. 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
Az alábbi példák a lenti CSS szelektort és szabályt alkalmazzák:
a span { height: 1px; width: 1px; position:
absolute; overflow: hidden; top: -10px; }
1. példa
Az alábbi példában egy híroldal szerepel, amelyen a rövid szinopszisok sorozatát a "Teljes cikk" hivatkozás követ. A hivatkozás célját a rejtett szöveg ismerteti.
Példa kód:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
</body>
</html>
2. példa
Az alábbi példában különböző formátumú elektronikus könyveket tartalmazó forrás szerepel. Minden könyvet egy hivatkozás követ, amely a könyv "HTML" vagy "PDF" formátumú változatára mutat. A rejtett szövegek a hivatkozások célját ismerteti.
Példa kód:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>
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
A technikát alkalmazó minden egyes horgony elem esetében:
-
Ellenőrizze, hogy a meghatározott elem egy pixel méretben jelenik-e meg, és a szöveget a kijelzőn kívülre helyezi-e.
-
Ellenőrizze, hogy a horgony tartalmazza-e az adott osztály elemét.
- Ellenőrizze, hogy a horgony kombinált tartalma ismerteti-e a hivatkozás célját.
Elvárható eredmények
-
Az összes fenti ellenőrzés igaz.