ნავიგაციის ელემენტი nav

რას ისწავლი

• რომელი ბმულები ეკუთვნის <nav>-ს და რომელი არა
• როგორ განასხვავო ერთ გვერდზე რამდენიმე <nav>
• რა არის „შინაარსზე გადახტომის“ ბმული და ვის ეხმარება

რა არის nav

<nav> სიების მოდულში უკვე გაიცანი: ის საიტის მენიუს გარსია. ახლა უფრო ზუსტად: <nav> არის ბლოკი მნიშვნელოვანი ნავიგაციის ბმულებით: ისეთის, რომლითაც ადამიანი საიტზე ან გვერდზე „მოგზაურობს“. მაგალითები:

• საიტის მთავარი მენიუ თავში;
• გრძელი სტატიის სარჩევი;
• „წინა გვერდი / შემდეგი გვერდი“ ბმულები სტატიების სიაში;
• „სადაც ხარ“ ბილიკი: „მთავარი › სკოლა › HTML › სიები“.

ყველა ბმული <nav> არ არის. ტექსტის შიგნით მოხსენიებული ბმული, მაგალითად „მეტი ინფორმაცია ვიკიპედიაში“, ჩვეულებრივი <a>-ა. ძირში ერთი-ორი ბმული წესებზე <footer>-ში საკმარისია <nav>-ის გარეშე. თუ ყველაფერს <nav>-ში ჩასვამ, ის ფასს კარგავს: ეკრანის წამკითხველის მომხმარებელი ათ „ნავიგაციის“ ბლოკს შორის ვეღარ იპოვის მთავარს.

რამდენიმე nav ერთ გვერდზე

ერთ გვერდზე შეიძლება იყოს მთავარი მენიუც და სარჩევიც. ეკრანის წამკითხველი ორივეს „ნავიგაციად“ აცხადებს, და მომხმარებელს არ ეცოდინება, რომელია რომელი. ამის გამოსასწორებლად ყოველ <nav>-ს aria-label-ით მიეცი სახელი:

<nav aria-label="მთავარი მენიუ">
  <ul>
    <li><a href="/">მთავარი</a></li>
    <li><a href="/learn/">სკოლა</a></li>
  </ul>
</nav>

<nav aria-label="სარჩევი">
  <ol>
    <li><a href="#intro">შესავალი</a></li>
    <li><a href="#examples">მაგალითები</a></li>
  </ol>
</nav>

ახლა წამკითხველი აცხადებს: „მთავარი მენიუ, ნავიგაცია“ და „სარჩევი, ნავიგაცია“. aria-label ეკრანზე არ ჩანს.

„გადახტომის“ ბმული

წარმოიდგინე, რომ კლავიატურით მართავ ბრაუზერს, Tab ღილაკით გადადიხარ ბმულიდან ბმულზე. ყოველ ახალ გვერდზე ჯერ მენიუს ათი ბმულის გავლა მოგიწევს, სანამ ტექსტამდე მიხვალ. ამიტომ ბევრ საიტს გვერდის პირველ ელემენტად აქვს უხილავი ბმული „გადადი შინაარსზე“, რომელიც Tab-ზე ჩნდება:

<a href="#content">გადადი მთავარ შინაარსზე</a>
<header>…მენიუ…</header>
<main id="content">…</main>

ეს ჩვეულებრივი ღუზაა, რომელიც ბმულების მოდულში ისწავლე. მის დასამალად და Tab-ზე გამოსაჩენად CSS დაგჭირდება, მაგრამ HTML-ის ნაწილი სულ ერთი ხაზია. <main>-ს შემდეგ თავში გაიცნობ.

nav-ის შიგნით

<nav>-ში ჩვეულებრივ სია დგას: <ul> მენიუსთვის, <ol> სარჩევისთვის ან ნაბიჯებისთვის. მაგრამ ეს სავალდებულო არ არის: „წინა / შემდეგი“ ორი ბმული შეიძლება უბრალოდ ერთმანეთის გვერდით იყოს.

სცადე თავად

გაუშვი. გვერდს ორი <nav> აქვს. დააჭირე სარჩევის ბმულებს: ისინი ამ რედაქტორშიც მუშაობს. მერე Tab ღილაკით გაიარე ბმულები შედეგის ფანჯარაში.

ხშირი შეცდომები

• ყველა ბმული <nav>-ში. მხოლოდ მთავარი ნავიგაციის ბლოკები.
• რამდენიმე <nav> სახელის გარეშე. მიეცი თითოეულს aria-label.
• მენიუ div-ებით. <div class="menu"> ეკრანის წამკითხველისთვის არაფერს ამბობს. გამოიყენე <nav>.

<nav aria-label="მთავარი მენიუ">
  <ul>
    <li><a href="index.html">მთავარი</a></li>
    <li><a href="posts.html">სტატიები</a></li>
    <li><a href="about.html">ჩემ შესახებ</a></li>
  </ul>
</nav>
<h1>როგორ ავაწყე ჩემი პირველი საიტი</h1>
<p>ყველაფერი ერთი HTML ფაილით დაიწყო.</p>
<nav aria-label="სტატიები">
  <a href="post-1.html">← წინა სტატია</a>
  <a href="post-3.html">შემდეგი სტატია →</a>
</nav>

მინი-ქვიზი

შეჯამება

• <nav> მნიშვნელოვანი ნავიგაციის ბლოკია: მენიუ, სარჩევი, „წინა/შემდეგი“.
• ტექსტში მოხსენიებულ ბმულებს <nav> არ სჭირდება.
• რამდენიმე <nav>-ს aria-label-ით მიეცი სახელები.
• „გადადი შინაარსზე“ ბმული კლავიატურით მომუშავეებს ეხმარება.