Understanding WCAG 2.0

Skip to Content (Press Enter)

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é):

  • ul vagy ol

  • 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.

(jelenleg nincsenek)

Ellenőrzések

Folyamat

Vizsgálja át a tartalmat csoportosított horgony-elemek után.

  1. 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.

Teljesítési feltételek: