CêIT Homeسەرەکی
Glossaryفەرهەنگی زاراوەکان
Web Designدیزاینی وێب

Chapterبەش 2 · Lectureوانە 2.4

Links and Navigation Menusبەستەرەکان و لیستە ڕێنیشاندەرەکان

Links to places inside a page and tables of contents, links that open a new tab, phone, e-mail and download links, link text that makes sense alone, navigation menus with the current page, the same menu on every page, breadcrumbs, skip links and menus on phones.

بۆ شوێنی ناو لاپەڕە و ، ئەو نوێ دەکەنەوە، تەلەفۆن، و ، دەقی کە بە تەنیا واتای هەبێت، بە لاپەڕەی ئێستاوە، هەمان لە هەموو لاپەڕەیەکدا، ، و لەسەر مۆبایل.

17 min read16 خولەک خوێندنەوە · 16 stepsهەنگاو

What you will learnچی فێر دەبیت

  • Link to a place in a page with an id and a fragment, and build a table of contents.
  • Decide when a link may open a new tab, and write tel:, mailto: and download links.
  • Write link text that makes sense on its own.
  • Build a navigation menu with the current page marked, the same on every page.
  • Add breadcrumbs and a skip link, and choose a menu for phones.
  • بە id و بۆ شوێنێک لە لاپەڕەدا دروست بکەیت و بنیات بنێیت.
  • بڕیار بدەیت کەی دەتوانێت نوێ بکاتەوە و tel:، mailto: و download بنووسیت.
  • دەقی بنووسیت کە بە تەنیا واتای هەبێت.
  • بنیات بنێیت بە لاپەڕەی ئێستاوە کە نیشانە کراوە و لە هەموو لاپەڕەیەکدا وەک یەک بێت.
  • و زیاد بکەیت و بۆ مۆبایل هەڵبژێریت.

Links to a place on a pageبەستەر بۆ شوێنێک لەناو لاپەڕەدا

Definitionپێناسە

The last part of a , after #, which points to a place inside the page. The browser jumps there and never sends the fragment to the server.

دوایین بەشی ، دوای #، کە ئاماژە بە شوێنێک لە ناو لاپەڕەکەدا دەکات. بازی بۆ دەدات و هەرگیز پارچەکە نانێرێت بۆ .

Give the target element an id, then link to it with # and that id. The part after # is the address's fragment: the browser scrolls to the element and never sends the fragment to the server.

idـێک بدە بە ئامانج، پاشان بە # و ئەو idـیە بۆ بکە. ئەو بەشەی دوای # ـی ناونیشانەکەیە: بۆ لای دەچێت و هەرگیز نانێرێت بۆ .

  • <a href="#delivery"> jumps to <h2 id="delivery"> on the same page.
  • <a href="faq.html#delivery"> opens faq.html at its Delivery part.
  • <a href="#top"> (or just #) goes back to the top of the page.
  • <a href="#delivery"> باز دەدات بۆ <h2 id="delivery"> لە هەمان لاپەڕەدا.
  • <a href="faq.html#delivery"> faq.html لە بەشی Deliveryـەکەیەوە دەکاتەوە.
  • <a href="#top"> (یان تەنیا #) دەگەڕێتەوە بۆ سەرەتای لاپەڕەکە.

An id must be unique on the page and must not contain spaces. Fragments are case-sensitive: #Delivery does not find id="delivery".

id دەبێت لە لاپەڕەکەدا تاک بێت و تێدا نەبێت. : #Delivery id="delivery" نادۆزێتەوە.

Animation in four steps. Left, a browser showing faq.html; right, a map of the whole page with a green frame for the part on the screen. 1: the pointer clicks 2. Delivery in the table of contents. 2: the address becomes faq.html#delivery, the Delivery heading is at the top and highlighted, and the green frame has moved down to the Delivery section. 3: the pointer clicks Back to top. 4: the address ends with #top and the page is back at the top.
Animation in four steps. Left, a browser showing faq.html; right, a map of the whole page with a green frame for the part on the screen. 1: the pointer clicks 2. Delivery in the table of contents. 2: the address becomes faq.html#delivery, the Delivery heading is at the top and highlighted, and the green frame has moved down to the Delivery section. 3: the pointer clicks Back to top. 4: the address ends with #top and the page is back at the top.
A fragment link moves the view; the page itself stays the same. شوێنی بینین دەگوازێتەوە؛ خودی لاپەڕەکە وەک خۆی دەمێنێتەوە.CêIT

Links to a place on a pageبەستەر بۆ شوێنێک لەناو لاپەڕەدا

Example: a table of contentsنموونە: پێڕستی ناوەڕۆک

Long pages — rules, questions and answers, lessons — need a table of contents at the top: a <nav> with a list of fragment links, named by its own heading with aria-labelledby. A “Back to top” link after each part saves scrolling on phones.

لاپەڕە درێژەکان — ڕێسا، پرسیار و وەڵام، وانە — لە سەرەوە پێویستیان بە هەیە: <nav>ـێک بە لیستێکی ، کە بە خۆی و بە aria-labelledby ناو دەنرێت. «Back to top» دوای هەر بەشێک لەسەر مۆبایل لە زۆر ڕزگارت دەکات.

A table of contents with fragment linksپێڕستی ناوەڕۆک بە بەستەری پارچەfaq.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Questions – Shilan's Bakery</title>
  <style>
    section { min-height: 70vh; }
  </style>
</head>
<body>
  <main>
    <h1>Questions about our bakery</h1>
    <nav aria-labelledby="toc-title">
      <h2 id="toc-title">On this page</h2>
      <ol>
        <li><a href="#prices">Prices</a></li>
        <li><a href="#delivery">Delivery</a></li>
        <li><a href="#allergies">Allergies</a></li>
      </ol>
    </nav>
    <section id="prices">
      <h2>Prices</h2>
      <p>A samoon costs 250 dinars.</p>
      <p><a href="#top">Back to top</a></p>
    </section>
    <section id="delivery">
      <h2>Delivery</h2>
      <p>We deliver inside Erbil from 8:00 to 12:00.</p>
      <p><a href="#top">Back to top</a></p>
    </section>
    <section id="allergies">
      <h2>Allergies</h2>
      <p>Our bread contains wheat. Ask us about sesame.</p>
      <p><a href="#top">Back to top</a></p>
    </section>
  </main>
</body>
</html>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 14-21

The table of contents: a <nav> named by its heading, with an ordered list of fragment links.

: <nav>ـێک کە بە ناو نراوە، بە لیستێکی ڕیزکراوی .

Lineدێڕی 22

id="prices" is the target of href="#prices".

id="prices" ئامانجی href="#prices"ـە.

Lineدێڕی 25

#top always means the top of the page; no element needs id="top".

#top هەمیشە واتە سەرەتای لاپەڕەکە؛ پێویست ناکات هیچ id="top"ـی هەبێت.

Links to a place on a pageبەستەر بۆ شوێنێک لەناو لاپەڕەدا

When a sticky header hides the targetکاتێک سەرپەڕەیەکی لکاو ئامانجەکە دادەپۆشێت

A header that stays at the top while you scroll (fixed and sticky) can cover the heading you jumped to. Give the targets a scroll margin as tall as the header, and highlight the target with the :target pseudo-class so the reader sees where they landed:

کە لە کاتی لە سەرەوە دەمێنێتەوە (fixed و sticky) دەتوانێت ئەو دابپۆشێت کە بازت بۆ داوە. بە بەرزیی بدە بە ئامانجەکان و ئامانجەکە بە :target ڕووناک بکەرەوە تا خوێنەر ببینێت گەیشتووەتە کوێ:

scroll-margin-top and :target⁦scroll-margin-top⁩ و :targetHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sticky header and fragment links</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { position: sticky; top: 0; padding: 12px 16px; background: #0d6b62; color: #fff; }
    header a { color: #fff; margin-inline-end: 12px; }
    section { min-height: 80vh; padding: 0 16px; }
    h2 { scroll-margin-top: 4rem; }
    h2:target { background: #fdf3e1; }
  </style>
</head>
<body>
  <header>
    <a href="#prices">Prices</a>
    <a href="#delivery">Delivery</a>
  </header>
  <main>
    <h1>Bakery information</h1>
    <section>
      <h2 id="prices">Prices</h2>
      <p>A samoon costs 250 dinars.</p>
    </section>
    <section>
      <h2 id="delivery">Delivery</h2>
      <p>We deliver inside Erbil from 8:00 to 12:00.</p>
    </section>
  </main>
</body>
</html>
Explain the codeڕوونکردنەوەی کۆدەکە
Lineدێڕی 9

The header sticks to the top of the window.

بە سەرەوەی پەنجەرەکەوە دەلکێت.

Lineدێڕی 12

After a jump, the heading stops 4rem below the top: under the header, not behind it.

دوای بازدان، ⁦4rem⁩ لە ژێر سەرەوە دەوەستێت: لە ژێر ، نەک لە پشتییەوە.

Lineدێڕی 13

:target matches the element named in the address after #.

:target ئەو هەڵدەبژێرێت کە لە ناونیشانەکەدا دوای # ناوی هاتووە.

Two browser windows on faq.html#delivery with a green sticky header bar. Left, without scroll-margin-top: the heading Delivery is half hidden behind the bar; a cross. Right, with scroll-margin-top: 4rem: the heading Delivery stops below the bar and is highlighted; a tick.دوو پەنجەرەی تۆڕگەڕ لەسەر faq.html#delivery بە شریتێکی سەوزی لکاو لە سەرەوە. لای چەپ، بەبێ scroll-margin-top: سەردێڕی Delivery نیوەی لە پشت شریتەکەوە شاراوەیە؛ ✗. لای ڕاست، لەگەڵ scroll-margin-top: 4rem: سەردێڕی Delivery لە ژێر شریتەکەوە دەوەستێت و ڕووناک کراوەتەوە؛ ✓.
scroll-margin-top keeps the target below a sticky header.⁦scroll-margin-top⁩ ئامانجەکە لە ژێر لکاوەوە دەهێڵێتەوە.CêIT

Opening a new tab: target="_blank"کردنەوەی تابێکی تۆڕگەڕی نوێ: ⁦target="_blank"⁩

target="_blank" opens the link in a new browser tab. Use it rarely: visitors can open a new tab themselves when they want one, and an unexpected tab breaks the Back button and confuses screen-reader users. A good reason is help or terms that the visitor reads while filling in a form, so the form is not lost. When you use it, say so in the link text:

target="_blank" لە نوێدا دەکاتەوە. بە کەمی بەکاری بهێنە: سەردانیکەران دەتوانن خۆیان تابێکی نوێ بکەنەوە کاتێک بیانەوێت و تابێکی چاوەڕواننەکراو دوگمەی Back تێک دەدات و بەکارهێنەرانی سەرلێشێواو دەکات. هۆیەکی باش یارمەتی یان مەرجێکە کە سەردانیکەر لە کاتی پڕکردنەوەی دەیخوێنێتەوە، تا لەدەست نەچێت. کاتێک بەکاری دەهێنیت، لە دەقی بیڵێ:

Say that a new tab opensبڵێ کە تابێکی نوێ دەکرێتەوەHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<p>Fill in the order form below.
  <a href="delivery-terms.html" target="_blank">Delivery terms (opens in a new tab)</a></p>
Left, the page order.html with the link Delivery terms (opens in a new tab). An arrow leads to a browser with two tabs, Order bread and the new active tab Delivery terms. Notes: target="_blank" opens a new tab; say so in the link text, and use it rarely; browsers add rel="noopener" by themselves, so the new page cannot control yours.لای چەپ، لاپەڕەی order.html بە بەستەری Delivery terms (opens in a new tab). تیرێک دەچێت بۆ تۆڕگەڕێک بە دوو تاب، Order bread و تابە نوێ چالاکەکەی Delivery terms. تێبینییەکان: target="_blank" تابێکی نوێ دەکاتەوە؛ لە دەقی بەستەرەکەدا بیڵێ و بە کەمی بەکاری بهێنە؛ تۆڕگەڕەکان خۆیان rel="noopener" زیاد دەکەن، بۆیە لاپەڕە نوێیەکە ناتوانێت لاپەڕەکەت کۆنترۆڵ بکات.
A new tab, announced in the link text.تابێکی نوێ کە لە دەقی ڕاگەیەندراوە.CêIT

Link text that makes sense aloneدەقی بەستەر کە بە تەنیا واتای هەبێت

Screen-reader users often open a list of all the links on a page (NVDA + F7) and choose from it, and keyboard users move from link to link. So the link text itself must say where the link goes. WCAG 2.2 requires this at level A (success criterion 2.4.4, Link Purpose (In Context)): the purpose must be clear from the link text, or from the link text together with its sentence.

بەکارهێنەرانی زۆرجار لیستی هەموو لاپەڕەیەک دەکەنەوە ⁦(NVDA + F7)⁩ و لێیەوە هەڵدەبژێرن و بەکارهێنەرانی لە بۆ تر دەچن. بۆیە خودی دەقی دەبێت بڵێت بۆ کوێ دەچێت. ⁦2.2⁩ لە ئاستی Aـدا داوای ئەمە دەکات ( ⁦2.4.4⁩، ⁦Link Purpose (In Context)⁩): مەبەستەکە دەبێت لە دەقی ڕوون بێت، یان لە دەقی لەگەڵ ڕستەکەیدا.

Unclear and clear link textدەقی بەستەری ناڕوون و ڕوونHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!-- Unclear: "Click here" means nothing in a list of links -->
<p>Our new price list is ready. <a href="prices.html">Click here</a>.</p>

<!-- Clear: the link text says where it goes -->
<p>Our <a href="prices.html">new price list</a> is ready.</p>
Two links lists as a screen reader shows them with NVDA + F7. Unclear: Click here, Click here, Read more, here — each with a cross: out of context they say nothing. Clear: New price list, Opening hours, Order bread online, Contact the bakery — each with a tick: each link says where it goes.دوو لیستی بەستەر وەک خوێنەرەوەی شاشە بە NVDA + F7 پیشانیان دەدات. ناڕوون: Click here، Click here، Read more، here — هەریەکە بە ✗: بەبێ دەقی دەوروبەر هیچ ناڵێن. ڕوون: New price list، Opening hours، Order bread online، Contact the bakery — هەریەکە بە ✓: هەر بەستەرێک دەڵێت بۆ کوێ دەچێت.
In a list of links, only clear link text helps.لە لیستی تەنیا دەقی ڕوون یارمەتی دەدات.CêIT
  • Put the meaning inside the link: “our [new price list]”, never “[click here]”.
  • Links with the same text should go to the same place.
  • Links in a text must look like links: underline them; colour alone is not enough (The four link states).
  • An image link needs alt text that says where it goes (An image as a link).
  • واتاکە بخە ناو : «[لیستی نوێی نرخەکان]ـمان»، هەرگیز «[کلیک لێرە بکە]».
  • ئەو دەقیان وەک یەکە دەبێت بۆ هەمان شوێن بچن.
  • ناو دەق دەبێت وەک دەربکەون: هێڵیان بە ژێردا بهێنە؛ ڕەنگ بە تەنیا بەس نییە (چوار دۆخەکەی بەستەر).
  • وێنە پێویستە کە بڵێت بۆ کوێ دەچێت (وێنە وەک بەستەر).

Navigation menusلیستە ڕێنیشاندەرەکان

The same menu on every pageهەمان مێنیو لە هەموو لاپەڕەیەکدا

Visitors learn where your menu is and what is in it. Keep it in the same place and in the same order on every page; WCAG 2.2 asks for this at level AA (3.2.3, Consistent Navigation). You may add items, such as a sub-menu in one part of the site, but do not shuffle the order.

سەردانیکەران فێر دەبن لە کوێیە و چی تێدایە. لە هەموو لاپەڕەیەکدا لە هەمان شوێن و بە هەمان ڕیز بیهێڵەوە؛ ⁦2.2⁩ لە ئاستی AAـدا داوای ئەمە دەکات (⁦3.2.3⁩، Consistent Navigation). دەتوانیت شت زیاد بکەیت، وەک لاوەکی لە بەشێکی ، بەڵام ڕیزەکە تێک مەدە.

From page to page, only aria-current moves. Later, PHP can write the menu once and include it in every page (A whole site with a shared header and footer).

لە لاپەڕەیەکەوە بۆ لاپەڕەیەکی تر، تەنیا aria-current دەگوازرێتەوە. دواتر دەتوانێت یەکجار بنووسێت و بیخاتە ناو هەموو لاپەڕەیەکەوە (تۆڕگەیەک بە سەرپەڕە و ژێرپەڕەی هاوبەش).

Everyday analogyنموونەیەک لە ژیانی ڕۆژانەوە

Road signs in a city use the same shapes, colours and order everywhere, so drivers read them at a glance. A site's menu is its road sign.

تابلۆکانی ڕێگا لە شارێکدا لە هەموو شوێنێک هەمان شێوە، ڕەنگ و ڕیزیان هەیە، بۆیە شۆفێران بە یەک نیگا دەیانخوێننەوە. تابلۆی ڕێگاکەیەتی.

Where the analogy stops workingسنووری ئەم نموونەیە

A road sign only points to other places; a menu also tells you where you are now, with the current page.

تابلۆی ڕێگا تەنیا ئاماژە بۆ شوێنی تر دەکات؛ پێشت دەڵێت ئێستا لە کوێیت، بە لاپەڕەی ئێستا.

Menus on phonesمێنیوەکان لەسەر مۆبایل

On a narrow screen a long menu fills the whole first view. If your site has only four or five links, let them wrap onto two lines: in usability tests visible links are found more often and faster than hidden ones (NN/g). For longer menus, hide the list behind a menu button:

لەسەر شاشەیەکی تەسک، درێژ هەموو یەکەم دیمەن پڕ دەکاتەوە. ئەگەر تەنیا چوار یان پێنج هەیە، با بە دوو دێڕ ببنەوە: لە تاقیکردنەوەکانی ئاسانیی بەکارهێناندا دیار زیاتر و خێراتر لە شاراوەکان دەدۆزرێنەوە ⁦(NN/g)⁩. بۆ درێژتر، لیستەکە لە پشت ـەوە بشارەوە:

  • Use a real button that says Menu — a ☰ icon alone is not understood by everyone — and make it big enough to tap (Fingers and mice).
  • Without JavaScript: put the <nav> inside <details> with <summary>Menu</summary>; it opens with a tap or with Enter.
  • With JavaScript: a <button aria-expanded="false"> that shows the menu and switches aria-expanded to true — built in The phone menu button.
  • ڕاستەقینە بەکاربهێنە کە بڵێت Menu یان مێنیو — ☰ بە تەنیا هەموو کەس لێی تێناگات — و ئەوەندە گەورەی بکە کە بە ئاسانی دەستی لێ بدرێت (پەنجە و ماوس).
  • بەبێ : <nav>ـەکە بخە ناو <details> بە <summary>Menu</summary>؛ بە دەستلێدان یان بە Enter دەکرێتەوە.
  • بە : <button aria-expanded="false">ـێک کە پیشان دەدات و aria-expanded دەگۆڕێت بۆ true — لە دوگمەی مێنیوی مۆبایل دروست دەکرێت.
A menu in details and summaryمێنیوێک لەناو details و summaryHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shilan's Bakery</title>
  <style>
    .site { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
    .menu summary { padding: 10px 16px; border: 2px solid #0d6b62; border-radius: 8px; cursor: pointer; }
    .menu ul { list-style: none; padding: 0; }
    .menu a { display: block; padding: 12px 16px; }
  </style>
</head>
<body>
  <header class="site">
    <p>Shilan's Bakery</p>
    <details class="menu">
      <summary>Menu</summary>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="bread.html">Our bread</a></li>
          <li><a href="cakes.html">Cakes</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </details>
  </header>
  <main>
    <h1>Fresh bread in Erbil</h1>
  </main>
</body>
</html>
Two phones. Closed: the header shows the site name and a button with three lines and the word Menu; below it the page content. An arrow says tap Menu. Open: under the header four big links, Home, Our bread, Cakes and Contact, each easy to tap. Under the phones the code details, summary Menu, nav.دوو مۆبایل. داخراو: سەری لاپەڕەکە ناوی تۆڕگەکە و دوگمەیەک بە سێ هێڵ و وشەی Menu پیشان دەدات؛ لە ژێریدا ناوەڕۆکی لاپەڕەکە. تیرێک دەڵێت دەست لە Menu بدە. کراوە: لە ژێر سەری لاپەڕەکەدا چوار بەستەری گەورە، Home، Our bread، Cakes و Contact، کە دەستلێدانیان ئاسانە. لە ژێر مۆبایلەکانەوە کۆدی details، summary Menu، nav.
A menu button with a word, and big links to tap. بە وشەوە و گەورە بۆ دەستلێدان.CêIT

Common mistakesهەڵە باوەکان

MistakeهەڵەDo this insteadلەبری ئەوە ئەمە بکە
“Click here”, “Read more”, “here”«Click here»، «Read more»، «here»Link text that says where the link goes.دەقی کە بڵێت بۆ کوێ دەچێت.
<a href="#"> with a click script, used as a button<a href="#"> کە بە وەک بەکار دەهێنرێتA real <button> for actions; a link only for a real address.<button>ـی ڕاستەقینە بۆ ئەنجامدانی کارێک؛ تەنیا بۆ ناونیشانێکی ڕاستەقینە.
Links in a text that look like plain text ناو دەق کە وەک دەقی ئاسایی دەردەکەونUnderline them and keep a visible focus style.هێڵیان بە ژێردا بهێنە و شێوەیەکی دیاری بهێڵەوە.
target="_blank" on every linktarget="_blank" لەسەر هەموو Only where it helps, and say so in the text.تەنیا لەو شوێنەی یارمەتی دەدات و لە دەقەکەدا بیڵێ.
href="#Prices" but id="prices"href="#Prices" بەڵام id="prices"Fragment and id must match exactly, letter case too. و id دەبێت ڕێک وەک یەک بن، قەبارەی پیتیش.
A skip link hidden with display: none کە بە display: none شاراوەتەوەOff the screen until :focus.لە دەرەوەی شاشە تا :focus.
A different menu order on each pageڕیزێکی جیاوازی لە هەر لاپەڕەیەکداThe same menu in the same order; aria-current on the current page.هەمان بە هەمان ڕیز؛ aria-current لەسەر لاپەڕەی ئێستا.
Two menus in the HTML, one for phones and one for computersدوو لە ، یەکێک بۆ مۆبایل و یەکێک بۆ One menu; CSS changes its layout.یەک ؛ ڕێکخستنەکەی دەگۆڕێت.
Several <nav>s without namesچەند <nav>ـێک بەبێ ناوGive each an aria-label: “Main”, “Breadcrumb”.aria-label بدە بە هەریەکەیان: «Main»، «Breadcrumb».

Exercisesڕاهێنانەکان

ExerciseڕاهێنانA menu with the current pageمێنیوێک بە لاپەڕەی ئێستاوە

A bakery site has four pages: index.html (Home), bread.html (Our bread), cakes.html (Cakes) and contact.html (Contact). Write the menu for cakes.html, with the current page marked for screen readers and for the eye.

نانەواخانەیەک چوار لاپەڕەی هەیە: index.html ⁦(Home)⁩، bread.html ⁦(Our bread)⁩، cakes.html ⁦(Cakes)⁩ و contact.html ⁦(Contact)⁩. بۆ cakes.html بنووسە، بە لاپەڕەی ئێستاوە کە بۆ و بۆ چاو نیشانە کرابێت.

Show answerوەڵامەکە پیشان بدە
The menu of cakes.htmlمێنیوی ⁦cakes.html⁩HTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<nav aria-label="Main">
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="bread.html">Our bread</a></li>
    <li><a href="cakes.html" aria-current="page">Cakes</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
A visible style for the current pageشێوەیەکی دیار بۆ لاپەڕەی ئێستاCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
a[aria-current="page"] {
  border-bottom: 4px solid #0d6b62;
  font-weight: bold;
}

On every other page the same menu appears, in the same order; only the position of aria-current changes.

لە هەموو لاپەڕەکانی تردا هەمان بە هەمان ڕیز دەردەکەوێت؛ تەنیا شوێنی aria-current دەگۆڕێت.

ExerciseڕاهێنانA table of contentsپێڕستی ناوەڕۆک

A long help page has three parts: Opening hours, Payment and Cakes for events. Write a table of contents for it, give each part an id, and add a “Back to top” link at the end.

لاپەڕەیەکی درێژی یارمەتی سێ بەشی هەیە: Opening hours، Payment و Cakes for events. بۆ بنووسە، idـێک بدە بە هەر بەشێک و لە کۆتاییدا «Back to top» زیاد بکە.

Show answerوەڵامەکە پیشان بدە
Table of contents and sectionsپێڕستی ناوەڕۆک و بەشەکانHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<nav aria-labelledby="contents-title">
  <h2 id="contents-title">Contents</h2>
  <ol>
    <li><a href="#opening-hours">Opening hours</a></li>
    <li><a href="#payment">Payment</a></li>
    <li><a href="#cakes-for-events">Cakes for events</a></li>
  </ol>
</nav>
<section>
  <h2 id="opening-hours">Opening hours</h2>
  <p>Every day from 6:00 to 14:00.</p>
</section>
<section>
  <h2 id="payment">Payment</h2>
  <p>Cash or card.</p>
</section>
<section>
  <h2 id="cakes-for-events">Cakes for events</h2>
  <p>Order three days before. <a href="#top">Back to top</a></p>
</section>

The ids use lowercase words joined by hyphens, and every href repeats its id exactly after #.

idـەکان وشەی پیت بچووکن کە بە خەتی ناوەند بەیەکەوە بەستراون و هەموو hrefـێک idـەکەی ڕێک دوای # دووپاتە دەکاتەوە.

ExerciseڕاهێنانA skip linkبەستەری بازدان

Add a skip link to the bakery home page of Semantic HTML. Which two changes do you make in the HTML, and what CSS do you need?

زیاد بکە بۆ نانەواخانەکەی HTMLـی واتایی. کام دوو گۆڕانکاری لە دەکەیت و چ پێویستە؟

Show answerوەڵامەکە پیشان بدە
Two changes in the HTMLدوو گۆڕانکاری لە HTMLـداHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>
    …
  </header>
  <main id="main">
    …
  </main>
</body>
The CSSCSSـەکەCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.skip-link {
  position: absolute;
  inset-inline-start: 8px;
  top: -100px;
  padding: 8px 16px;
  background: #1b1d20;
  color: #fff;
}
.skip-link:focus { top: 8px; }

Test it: reload the page and press Tab once. The link must appear; Enter must take you to the main content.

تاقی بکەرەوە: لاپەڕەکە نوێ بکەرەوە و یەک جار Tab دابگرە. دەبێت دەربکەوێت؛ Enter دەبێت بتبات بۆ ناوەڕۆکی سەرەکی.

Summaryپوختە

  • id plus #: links to places in a page, tables of contents and “Back to top”; scroll-margin-top under a sticky header.
  • target="_blank" rarely, and announced in the link text; browsers add noopener themselves.
  • tel:, mailto: and download links; give the type and size of files.
  • Link text must make sense on its own (WCAG 2.4.4).
  • Menus: nav > ul > li > a, aria-current="page" plus a visible style, the same order on every page (WCAG 3.2.3).
  • Breadcrumbs: a named nav with an <ol>, separators from CSS, the current page last.
  • A skip link first in <body>, visible on focus (WCAG 2.4.1); on phones a visible menu or a real Menu button.
  • id لەگەڵ #: بۆ شوێنی ناو لاپەڕە، و «Back to top»؛ scroll-margin-top لە ژێر لکاودا.
  • target="_blank" بە کەمی و بە ڕاگەیاندن لە دەقی ؛ خۆیان noopener زیاد دەکەن.
  • tel:، mailto: و download؛ جۆر و قەبارەی بنووسە.
  • دەقی دەبێت بە تەنیا واتای هەبێت ( ⁦2.4.4⁩).
  • : nav > ul > li > a، aria-current="page" لەگەڵ شێوەیەکی دیار، هەمان ڕیز لە هەموو لاپەڕەیەکدا ( ⁦3.2.3⁩).
  • : navـێکی ناونراو بە <ol>ـێک، جیاکەرەوە لە ، لاپەڕەی ئێستا لە کۆتاییدا.
  • یەکەم شت لە <body>، دیار کاتێک وەردەگرێت ( ⁦2.4.1⁩)؛ لەسەر مۆبایل دیار یان ڕاستەقینەی Menu.
Review questionsپرسیارەکانی پێداچوونەوە
What is the fragment of a URL, and does the server see it?پارچەی URL چییە و ئایا ڕاژەکار دەیبینێت؟

The part after #. It names a place in the page; the browser scrolls there and never sends the fragment to the server.

ئەو بەشەیە کە دوای # دێت. ناوی شوێنێک لە لاپەڕەکەدا دەبات؛ بۆ ئەوێ دەچێت و هەرگیز نانێرێت بۆ .

Why use aria-current="page" and not only a colour?بۆچی aria-current="page" بەکاربهێنین و نەک تەنیا ڕەنگێک؟

Screen readers announce aria-current, and the same attribute can carry a visible style that does not depend on colour.

aria-current ڕادەگەیەنن و هەمان دەتوانێت شێوەیەکی دیار هەڵبگرێت کە پشت بە ڕەنگ نابەستێت.

Who needs a skip link, and how is it hidden?کێ پێویستی بە بەستەری بازدان هەیە و چۆن دەشاردرێتەوە؟

Keyboard and screen-reader users, to pass the repeated menu. It is moved off the screen and comes back with :focus — never display: none.

بەکارهێنەرانی و ، بۆ تێپەڕین بە دووپاتەکەدا. دەبرێتە دەرەوەی شاشە و بە :focus دەگەڕێتەوە — هەرگیز display: none.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Images for the Web: Formats, Size and Responsive Imagesوێنە بۆ وێب: جۆرەکانی فایل، قەبارە و وێنە ڕێسپۆنسیڤەکان

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

Appearanceڕووکار

Modeدۆخ
Styleشێواز
Coloursڕەنگەکان

Saved on this device only.تەنیا لەسەر ئەم ئامێرە پاشەکەوت دەکرێت.