Zpřístupněte si svůj web jediným kliknutím – důvěřuje nám více než 60,000 webové stránky po celém světě

Jak přidat přeskakovací navigační odkazy do nabídek WordPress

Přidal

Marlene Fichtnerová

Nahráno v

Ledna 6, 2025

Kontrolní seznam pro bezplatnou přístupnost
Získejte bezplatný kontrolní seznam s nejdůležitějšími kontrolami přístupnosti.
Přeskočit navigační odkazy jsou nezbytné pro zlepšení přístupnosti na vašem webu WordPress. Umožňují uživatelům, zejména těm, kteří používají čtečky obrazovky nebo navigaci pomocí klávesnice, obejít opakující se nabídky a přímo přistupovat k hlavnímu obsahu. Přidání přeskakovacích odkazů zlepšuje použitelnost a zajišťuje soulad se standardy přístupnosti, jako je WCAG.

Proč přeskočit navigační odkazy záleží

Přeskočit navigační odkazy poskytují několik výhod:

  • Vylepšená použitelnost: Uživatelům spoléhajícím na asistenční technologie snižuje úsilí potřebné k procházení nabídek.
  • Vylepšená dostupnost: Zajišťuje soulad s pokyny pro přístupnost, jako jsou WCAG a ADA.
  • Lepší uživatelský dojem: Usnadňuje všem uživatelům navigaci na vašem webu.

Podrobný průvodce přidáním odkazů přeskočení navigace

Krok 1: Přidejte HTML pro přeskakování odkazů

Přidejte kód HTML pro odkaz přeskočení v horní části souboru záhlaví vašeho webu:

Přejít na hlavní obsah

Zajistěte href atribut ukazuje na ID vašeho hlavního kontejneru obsahu.

Krok 2: Přidejte ID do hlavního obsahu

V motivu WordPress najděte hlavní kontejner obsahu a přidejte ID:

    

Krok 3: Upravte styl přeskočeného odkazu

Upravte styl přeskočeného odkazu tak, aby byl viditelný, když je zaostřeno. Přidejte do svého motivu následující CSS:

.přeskočit-odkaz { pozice: absolutní; horní: -40px; vlevo: 0; pozadí: #000; barva: #fff; odsazení: 10px; text-dekorace: žádná; z-index: 100; } .skip-link:focus { top: 0; }

Krok 4: Otestujte přeskakovaný odkaz

Pomocí klávesnice procházejte web a ověřte, zda se odkaz přeskočení zobrazuje a funguje správně. Stiskněte Tab zaměřit se na přeskočený odkaz a Enter k jeho aktivaci.

Doporučené postupy pro přeskočení navigačních odkazů

  • Umístěte na první místo přeskočení odkazů: Zajistěte, aby byl odkaz přeskočení prvním zaměřeným prvkem na stránce.
  • Použít Vymazat štítky: Text odkazu by měl jasně uvádět jeho účel, např. „Přeskočit na hlavní obsah“.
  • Test napříč zařízeními: Ověřte funkčnost na počítačích, tabletech a mobilních zařízeních.

Případové studie: Přeskočit odkazy v akci

Případová studie 1: Vzdělávací webové stránky

Vzdělávací platforma implementovala přeskakované odkazy, což vedlo k lepší navigaci pro studenty používající čtečky obrazovky a 15% zlepšení skóre přístupnosti.

Případová studie 2: E-commerce Store

Internetový prodejce přidal do své navigační nabídky odkazy přeskakování, čímž snížil míru okamžitého opuštění a zlepšil použitelnost pro uživatele klávesnice.

Nejčastější dotazy: Přidání přeskakovacích navigačních odkazů

Co jsou odkazy přeskočit navigaci?

Přeskočit navigační odkazy umožňují uživatelům obejít opakované navigační nabídky a přejít přímo k hlavnímu obsahu stránky.

Jsou přeskakovací odkazy vyžadovány pro zajištění souladu s přístupností?

I když to není výslovně vyžadováno, přeskakované odkazy pomáhají splnit pokyny WCAG tím, že zlepšují navigaci pro uživatele asistenčních technologií.

Mohu přidat přeskočené odkazy bez úpravy kódu?

Ano, některé pluginy pro usnadnění jako Plugin WP One Tap Accessibility Plugin může automaticky přidávat přeskakované odkazy.

Fungují přeskakované odkazy na mobilních zařízeních?

Ano, při správné implementaci fungují přeskakované odkazy na všech zařízeních, včetně mobilních.

Jak otestuji přeskočení navigačních odkazů?

Pomocí klávesnice procházejte své stránky a ujistěte se, že přeskakovaný odkaz je zaostřitelný a funkční.

Tento blog slouží pouze pro informační účely a nepředstavuje právní poradenství. Neposkytujeme žádná prohlášení ani záruky ohledně přesnosti, úplnosti nebo použitelnosti obsahu. Požadavky na přístupnost se mohou lišit v závislosti na jurisdikci a případu použití. V rozsahu povoleném zákonem se zříkáme jakékoli odpovědnosti vyplývající ze spoléhání se na poskytnuté informace. 

Související články

Jak optimalizovat přístupnost pro vícejazyčné weby WordPress

Zajištění přístupnosti na vícejazyčných webech WordPress je klíčové pro vytvoření inkluzivního webového zážitku…

Jak vytvořit přístupné karusely obrázků ve WordPressu

Karusely obrázků jsou vizuálně poutavé prvky, které mohou zvýšit atraktivitu vašeho WordPressu…

Jak opravit problémy s přístupností v tématech WordPress třetích stran

Šablony WordPressu od třetích stran často přicházejí s působivým designem, ale mohou postrádat vestavěné funkce pro usnadnění přístupu…

Jak zajistit přístupnost v příspěvcích na blogu WordPress

Přístupnost v blogových příspěvcích zajišťuje, že váš obsah je inkluzivní a použitelný pro všechny…

Jak navrhovat přístupné formuláře v Elementoru

Vytváření přístupných formulářů v Elementoru zajišťuje, že všichni uživatelé, včetně těch s postižením, mohou…

Krok za krokem: Řešení problémů s přístupností ve WooCommerce

WooCommerce je oblíbená platforma pro vytváření online obchodů, ale zajištění její přístupnosti je…

Jak otestovat přístupnost pomocí čtečky obrazovky na WordPress

Testování vašeho webu WordPress pomocí čteček obrazovky je klíčové pro zajištění jeho přístupnosti…

Jak přidat kompatibilitu hlasového vyhledávání do WordPress

Hlasové vyhledávání se stává stále populárnějším, protože uživatelé se spoléhají na chytrá zařízení a virtuální…

Zpřístupněte svůj web ještě dnes

Důvěřuje mu více než 60,000 1 webových stránek – vyrobeno v Evropě. OneTap je plugin číslo 1 pro přístupnost ve WordPressu. Zlepšete přístupnost za XNUMX minutu – bez nutnosti programování.
1
Vyberte si svůj balíček
2
Stáhnout plugin
3
Instalace jedním kliknutím
Hotový
1
Vyberte balíček
2
Stáhnout plugin
3
instalovat
Hotový
Kontrolní seznam přístupnosti zdarma pro WordPress

Co dělá většina webů WordPressu špatně – a jak to opravit. Získejte praktický kontrolní seznam krok za krokem, který vám pomůže odhalit běžné problémy s přístupností na vašem webu WordPress.