H69: fejléc-elem megadása a tartalom minden részének kezdeténél
Alkalmazás
HTML és XHTML
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
Mind a JAWS mind a WindowEyes a fejlécen keresztül biztosítja a navigációt és közli a fejléc szintjére vonatkozó információt. Az Opera böngészőben is a fejlécen keresztül lehetséges a navigálás. Más böngészőkben egyéb kiegészítő programok támogatják a fejlécen keresztül történő navigálást.
Leírás
A technika célja a tartalom szerkezetének megjelenítése a részek fejléceinek segítségével. A fejléc jelölés az alábbiakra használható:
-
a fő tartalmi rész kezdetének jelölése
-
a részek fejlécének megjelölése a fő tartalmi tartományon belül
-
az olyan különböző navigációs részek elkülönítése, mint a felső vagy fő navigációs elem, bal oldali vagy másodlagos navigációs elem, és az alsó részen elhelyezkedő navigációs elem.
-
képek megjelölése (szöveget tartalmazó), melynek fejléc megjelenése van.
Bizonyos technológiák esetében a fejlécek a logikus felépítés megjelenítésére szolgálnak. A fejlécek rendszerében történő ugrás azt a benyomást keltheti, hogy a dokumentum szerepét nem gondolták át világosan, vagy az adott fejléc inkább a vizuális megjelenése és nem a jelentése miatt került kiválasztásra. A szerkesztőnek javasolt eljárás a hierarchikusan beágyazott fejlécek használata.
Mivel a fejlécek a tartalom fontos részeinek kezdetét jelölik, a segítő technológiát alkalmazó felhasználók közvetlenül az őket érdeklő fejléchez és tartalomhoz ugorhatnak. Ez a lépés jelentősen meggyorsítja a tartalomra lassabban reagáló felhasználók navigációját.
A Lépcsőzetes Stílus Lapokat (CSS) támogató technológiákban a stílusok segítségével megváltoztathatók a fejlécek kinézete, vagy hangzása. A CSS használatával a fejlécek úgy is kialakíthatók, hogy a segítő technológiák érzékeljék őket, de vizuálisan láthatatlanok maradjanak. Mindazonáltal a fejlécek feltüntetése a felhasználók széles rétegének hasznára lehet, beleértve az értelmi fogyatékosokat is.
Példák
1. példa
Az alábbi példa egy keresőlap részeit rendszerezi a h2 elem használatával, amelyet a részek elejére tesz ki.
Példa kód:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ...
2. példa: A fejléc a tartalom teljes szerkezetét mutatja be.
Az alábbi példában a fejléc jelölése által a navigáció és a tartalom főbb részei válnak láthatóvá.
Példa kód:
<!-- Logo, banner graphic, search form, etc. -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- Text, images, other material making up the main content... -->
3. példa: A fejlécek a tartalom fő részén belül lévő anyagok szerkezetét mutatja
Fontos, hogy a HTML 4.01 és az XHTML 1.x által alkalmazott fejléc-elemek csak jelölik a részek kezdetét és nem tartalmazzák őket, mint tartalmi elemeket.
Példa kód:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</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
Minden részekre osztott tartalom esetében
-
Ellenőrizze, hogy minden rész fejléccel kezdődik-e.
Elvárható eredmények
-
Az 1. pont igaz.