H50: Hivatkozások csoportosítása szerkezeti elemek segítségével
Alkalmazás
HTML és XHTML
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika azt szemlélteti, hogyan lehet hivatkozásokat logikus halmazba rendezni. A logikus halmazba rendezett hivatkozásokat (például egy minden oldalon megjelenő navigációs oszlopon vagy menün belül) egységként kell megjelölni. A felhasználók általában a navigációs oszlopokkal találkoznak először az oldalakon. A látó felhasználók általában figyelmen kívül hagyják a navigációs elemeket és az oldal tartalmát olvassák el először. A képernyőolvasókat alkalmazóknak viszont először a linkek szövegét kell meghallgatniuk, mielőtt áttérnének az érdekesebb részekre. A tartalmak megjelölésének számos módja létezik, így a képernyőolvasókat alkalmazó felhasználók átugorhatják a navigációs elemet és nem kell áttekinteniük az összes linket.
Rendezze a hivatkozásokat az alábbi technikák alkalmazásával (fontossági sorrendben felülről lefelé):
-
ulvagyol -
térkép
Példák
1. példa: Hivatkozások csoportosítása listák segítségével
Az alábbi példában a hivatkozások az ul
és li elemek segítségével kerültek
csoportosításra.
Példa kód:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><p><a href="kitchen.html">Kitchen</a></p></li>
<li><p><a href="bedbath.html">Bed & Bath</a></p></li>
<li><p><a href="dining.html">Fine Dining</a></p></li>
<li><p><a href="lighting.html">Lighting</a></p></li>
<li><p><a href="storage.html">Storage</a><li><p>
</ul>
A CSS a lista-elemek formázására használható, így ez a technika a vizuális megjelenítés számos formájával alkalmazható.
Az alábbi stílus eltávolítja az egyes lista-elemek vízszintes behúzását és irányát meghatározó kiemelőjeleket és bal kitöltést.
Példa kód:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}
Ez a stílus eltávolítja a lista kiemelőjeleket, illetve a bal kitöltést és lebegő blokkban jeleníti meg az elemeket.
Példa kód:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}
2. példa: Hivatkozások csoportosítása térképek segítségével.
Ebben a példában a térkép elem csoportosítja a hivatkozásokat és a cím attribútum azonosítja őket navigációs oszlopként.
Példa kód:
<map title="Navigation Bar">
<p>
[<a href="home.html">Home</a>]
[<a href="search.html">Search</a>]
[<a href="new.html">New and highlighted</a>]
[<a href="sitemap.html">Site map</a>]
</p>
</map>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
(jelenleg nincsenek)
Ellenőrzések
Folyamat
Vizsgálja át a tartalmat csoportosított horgony-elemek után.
-
Ellenőrizze, hogy a horgony-elemek lista vagy térkép elemek használatával kerültek-e csoportosításra.
Elvárható eredmények
- Az 1. pont igaz.