2026.11.13.
Weboldal fejlesztés és SEO

Akadálymentes navigáció ellenőrzése v0 demóval.

Temesvári László

A v0 demó célja, hogy bemutassa az akadálymentes navigáció egy apró, de fontos részét: a navigációs sávban lévő linkek szöveges elérhetőségének ellenőrzését. Ez a gyakorlati példa nem helyettesíti a teljes weboldali akadálymentesítési vizsgálatot, de kiváló kiindulópont annak megértéséhez, hogyan lehet egy adott szerkezeti elemet programozottan ellenőrizni.

Kinek hasznos ez a demó?

Elsősorban azoknak a vállalkozóknak, akik saját vagy ügyfeleik weboldalát szeretnék átvilágítani anélkül, hogy drága eszközökbe fektetnének. A demó megmutatja, hogyan működik a linkek kinyerése és felsorolása egy adott DOM-elemből (jelen esetben a nav elemből), ami az akadálymentes navigáció alapja. Segítségével megtanulható, hogyan lehet egyszerű JavaScript-tel validálni egy felhasználói felület szerkezetét.

Konkrét helyzet, ahol hasznos lehet

Képzeljük el, hogy egy ügyvédi iroda weboldalát készítjük, és a megbízó kifejezetten kéri, hogy a menüpontok mindegyike olvasható legyen képernyőolvasóval is. A demó futtatásával gyorsan kideríthetjük, hogy a navigációs sáv összes linkje szövegesen hozzáférhető-e – még mielőtt élesben bevezetnénk a megoldást.

A demó használata lépésről lépésre

  1. Nyissa meg a demót a böngészőjében.
  2. Írjon be egy érvényes webcímet a szövegmezőbe, például https://pelda.hu. Fontos, hogy a cím http(s):// előtaggal kezdődjön.
  3. Kattintson az „Ellenőrzés” gombra.
  4. Az eredmény mezőben megjelenik a navigációs sávban található összes link szövege.
  5. A „Visszaállítás” gombbal törölheti az eredményt és a beírt címet.

Három pontos teszt a működés ellenőrzéséhez

1. teszt: Üres mező esetén hibaüzenet

Ha a szövegmező üres, és rákattint az „Ellenőrzés” gombra, a következő üzenet jelenik meg: „Hiba: adja meg a webcímet.” Az eredmény mező piros keretet kap. Ez jelzi, hogy a validáció működik.

2. teszt: Érvénytelen formátum esetén hibaüzenet

Írjon be például www.pelda.hu címet (a http(s):// előtag nélkül), majd kattintson az ellenőrzésre. Az eredmény: „Hiba: érvénytelen cím – a http(s):// előtaggal kezdődjön.” Ez biztosítja, hogy csak jól formázott URL-t fogadjon el.

3. teszt: Helyes formátum esetén a linkek listázása

Írjon be egy érvényes címet (például https://pelda.hu), és futtassa az ellenőrzést. A demó a következő eredményt adja: „Ellenőrzés kész: 4 navigációs link található: Kezdőlap, Szolgáltatások, Elérhetőség, Adatvédelem.” A zöld keret jelzi a sikeres ellenőrzést. Ez azt mutatja, hogy a nav elemen belüli összes link szövege hozzáférhető.

A demó korlátai

Mire nem alkalmas ez a megoldás?
  • Nem végez valós internetes ellenőrzést, csak a helyi HTML szerkezetet vizsgálja.
  • Nem teszteli a billentyűzettel történő navigációt, a fókuszkezelést vagy a kontrasztarányaikat.
  • Nem vizsgálja az ARIA-attribútumokat, az alternatív szövegeket vagy a médiaelemek elérhetőségét.
  • Nem méri a weboldal tényleges teljesítményét vagy konverziós képességét.

Mit igényel egy éles weboldal emellett?

Egy valódi, üzleti célra használt weboldal esetén a teljes akadálymentesítési vizsgálat magában foglalja a billentyűzetes navigációt, a képernyőolvasó-kompatibilitást, a megfelelő színkontrasztokat, a szemantikus HTML-struktúrát és a mobil nézet tesztelését is. Emellett fontos a fókuszkezelés, a hibajelzések felolvasása, valamint a hosszú oldalak ugrópontjainak biztosítása.

Hasznos további források

A v0 demó az hivatalos dokumentáció alapján működik. A weboldal-készítés és a WordPress-technológia területén érdemes elmélyedni, ha szeretné megérteni a kapcsolódó lehetőségeket és korlátokat. Az alábbi források segítenek a gyakorlati alkalmazásban:

Próbáld ki a működő példát

A teljes másolható kód

Teljes, másolható index.html

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Akadálymentes navigáció – v0 demó</title>
<style>
  body {
    background: #202632;
    color: #e6eef8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    line-height: 1.5;
  }
  .container {
    max-width: 700px;
    margin: 0 auto;
    background: #2a3240;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  h1 {
    font-size: 1.4rem;
    margin-top: 0;
    color: #ffffff;
  }
  p {
    margin: 0 0 15px 0;
  }
  button {
    background: #39a0ff;
    color: #1a1a1a;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px 5px 5px 0;
    font-size: 0.95rem;
  }
  button:hover {
    opacity: 0.9;
  }
  input {
    background: #202632;
    color: #e6eef8;
    border: 1px solid #39a0ff;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 5px 0;
    width: 90%;
    max-width: 300px;
    font-size: 1rem;
  }
  .result-box {
    background: #202632;
    border: 1px solid #39a0ff;
    border-radius: 6px;
    padding: 12px;
    margin-top: 15px;
    min-height: 40px;
  }
  .ok {
    border-color: #4caf50;
  }
  .hiba {
    border-color: #ff6b6b;
  }
  nav {
    margin: 15px 0;
    padding: 10px;
    background: #1a2029;
    border-radius: 6px;
  }
  nav a {
    color: #39a0ff;
    text-decoration: underline;
    margin-right: 15px;
  }
  small {
    color: #a0b0c8;
  }
</style>
</head>
<body>
<div class="container">
  <h1>Akadálymentes navigáció ellenőrzése (v0 demó)</h1>
  <p>Írjon be egy webcímet, a segéd navigációs sáv linkjeit ellenőrzésnek vetjük alá. <strong>Csak az explicit linkeket</strong> listázzuk ki – nincs valós kérelem, csak demó.</p>

  <nav>
    <a href="#" id="link1">Kezdőlap</a>
    <a href="#" id="link2">Szolgáltatások</a>
    <a href="#" id="link3">Elérhetőség</a>
    <span>Nem link (szöveg)</span>
    <a href="#" id="link4">Adatvédelem</a>
  </nav>

  <input type="text" id="urlInput" placeholder="Pl. https://pelda.hu" aria-label="Webcím">
  <br>
  <button type="button" id="checkBtn">Ellenőrzés</button>
  <button type="button" id="resetBtn">Visszaállítás</button>

  <div class="result-box" id="resultBox" aria-live="polite">
    <strong>Eredmény:</strong> <span id="resultText">Várja az ellenőrzés indítását.</span>
  </div>

  <small>v0.1 – kizárólag helyi demonstráció, valós internetes ellenőrzés nélkül.</small>
</div>

<script>
  const resultBox = document.getElementById('resultBox');
  const resultText = document.getElementById('resultText');
  const urlInput = document.getElementById('urlInput');

  function setResult(message, isError = false) {
    resultText.textContent = message;
    resultBox.classList.remove('ok', 'hiba');
    if (isError) {
      resultBox.classList.add('hiba');
    } else {
      resultBox.classList.add('ok');
    }
  }

  function checkNavigation() {
    const url = urlInput.value.trim();
    if (!url) {
      setResult('Hiba: adja meg a webcímet.', true);
      return;
    }
    // egyszerű URL-ellenőrzés
    if (!/^https?:\/\/.+/i.test(url)) {
      setResult('Hiba: érvénytelen cím – a http(s):// előtaggal kezdődjön.', true);
      return;
    }

    // navigációs linkek gyűjtése
    const links = document.querySelectorAll('nav a');
    const linkList = [];
    for (const link of links) {
      const text = link.textContent.trim();
      if (text) linkList.push(text);
    }

    if (linkList.length === 0) {
      setResult('Nem található link a navigációban.');
    } else {
      const legtobb = linkList.length;
      setResult(`Ellenőrzés kész: ${legtobb} navigációs link található: ${linkList.join(', ')}. Minden link szövegesen hozzáférhető.`);
    }
  }

  function resetAll() {
    urlInput.value = '';
    resultText.textContent = 'Állapot visszaállítva – várja az ellenőrzést.';
    resultBox.classList.remove('ok', 'hiba');
  }

  document.getElementById('checkBtn').addEventListener('click', checkNavigation);
  document.getElementById('resetBtn').addEventListener('click', resetAll);
</script>
</body>
</html>

Ajánlatot kérek

A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.

Kapcsolódó cikkek