/* * Hostiko — akadálymentesítési réteg: LÁTHATÓ BILLENTYŰZET-FÓKUSZ * =================================================================== * Készült: 2026-08-01 * * A PROBLÉMA * ---------- * Élesben mérve (`https://teamunity.hu/`, CSSOM-bejárás) **33 szabály** * kapcsolja ki a fókuszgyűrűt (`outline: none` / `outline: 0` a `:focus` * állapotban), és ezek közül **14 semmivel nem pótolja** — se box-shadow, * se border, se háttérváltás. `:focus-visible` szabály az egész oldalon: * **0 db**. * * A legsúlyosabb egyetlen sor a téma `assets/css/style.css`-ében: * * a, a:hover, a:focus, a:active { text-decoration: none; outline: none; } * * Ez az oldal ÖSSZES linkjéről leszedi a fókuszjelzést. Aki billentyűzettel * navigál (Tab), az egyszerűen nem látja, hol jár. * * A fő konverziós út is érintett — pont az, amiből a bevétel származik: * * #domain_search_outter #searchtdomain:focus { outline: none } * #domain_search_outter #search_btn:focus, … { outline: none !important } * .hostiko-search-bar button:focus { outline: none } * .htk-cart-btn:focus { outline: none } * .hostiko-testimonial-section … .owl-dot:focus{ outline: none } * .sidebar-menu .sidebar-subscribe button:focus{ outline: 0 } * .main-search button:focus { outline: 0 } * * MIÉRT SZÁMÍT * ------------ * - **WCAG 2.1 / 2.2 – 2.4.7 Focus Visible (AA)**: ez a kritérium bukása. * - **EU akadálymentesítési irányelv (2019/882, „EAA")**: 2025. június 28-tól * az online értékesítő szolgáltatásokra is vonatkozik, a harmonizált * szabvány (EN 301 549) pedig a WCAG 2.1 AA-t írja elő. Egy tárhelyet * online értékesítő cég ebbe a körbe esik. * - Gyakorlatilag: motorikusan korlátozott vagy csak billentyűzetet használó * látogató nem tudja végigvinni a domain-keresést és a kosarat. * * MIÉRT NEM EGYSZERŰEN VISSZAKAPCSOLNI * ------------------------------------ * Az `outline: none`-oknak volt VALÓS indoka: a régi böngészőkben a `:focus` * EGÉRKATTINTÁSRA is bekapcsolt, és a designerek jogosan nem akartak * fókuszgyűrűt minden kattintás után. A `:focus-visible` pontosan ezt oldja * meg — a böngésző heurisztikája dönti el, hogy a fókusz billentyűzetből * jött-e. Ezért ez a fájl `:focus-visible`-t használ, NEM `:focus`-t: * a gyűrű billentyűzetnél megjelenik, kattintásnál nem. Az eredeti * design-szándék sértetlen marad. * * Támogatottság: Chrome 86+, Firefox 85+, Safari 15.4+ (2022 óta mind). * Régebbi böngésző egyszerűen a mai (hibás) viselkedést kapja — nem lesz * regresszió, csak nem lesz javulás. * * A GYŰRŰ FELÉPÍTÉSE * ------------------ * Két rétegű, hogy BÁRMILYEN háttéren látszódjon: * * box-shadow → 2 px fehér sáv közvetlenül az elem körül * outline → 3 px márkakék gyűrű a fehér sávon kívül * * A fehér sáv az `outline-offset` által nyitott résbe esik. Így: * - fehér háttéren → a kék gyűrű látszik (kontraszt #0088e9/#fff = 3.69:1, * a nem-szöveges elemekre előírt 3:1 fölött) * - kék CTA gombon → a fehér sáv adja a határt a kék gomb és a kék gyűrű közt * - sötét lábléc → mindkettő látszik * * MIÉRT `!important` * ------------------ * Nem stílusból, hanem kényszerből: több eredeti szabály maga is * `!important`-tal tiltja az outline-t (pl. `#domain_search_outter * #search_btn:focus`), és a `.btn:focus { box-shadow: none }` specificitása * is magasabb, mint egy elemszelektoré. `!important` nélkül a réteg egy * részén egyszerűen nem érvényesülne. Kizárólag `:focus-visible` állapotra * korlátozódik, tehát semmilyen nyugalmi megjelenést nem ír felül. * * BETÖLTÉS: `functions.php` → `enqueue_theme_styles()`, `header-style` + * `responsive` függőséggel, hogy a kaszkádban BIZTOSAN utánuk legyen — * az `a:focus { outline: none }` ugyanis a `header-style`-ban van. * * KIKAPCSOLÁS: `add_filter( 'hostiko_load_a11y_css', '__return_false' );` * (de gondold meg kétszer — lásd fent, miért nem csak kozmetika.) */ :root { --hostiko-focus-ring: #0088e9; /* márkakék, 3.69:1 fehéren */ --hostiko-focus-halo: #ffffff; /* elválasztó sáv sötét/színes elemekhez */ --hostiko-focus-width: 3px; --hostiko-focus-gap: 2px; } /* * Alapréteg — minden interaktív elem. * * Az `:is()` szándékos: egyetlen szabály, egységes megjelenés. A lista * bővebb a szokásosnál, mert a téma több helyen `
` és * `tabindex` alapú vezérlőt használ (Elementor akkordeon, tab-fejlécek). */ :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="link"]):focus-visible { outline: var(--hostiko-focus-width) solid var(--hostiko-focus-ring) !important; outline-offset: var(--hostiko-focus-gap) !important; box-shadow: 0 0 0 var(--hostiko-focus-gap) var(--hostiko-focus-halo) !important; } /* * Nevesített kivételek — azok az elemek, ahol az eredeti CSS `!important`-tal * vagy magas specificitással tiltotta az outline-t. Szelektoronként * megismételve, hogy a specificitás biztosan felülírja az eredetit. * * Ezek EGYÜTT adják ki a domain-keresés → kosár utat, vagyis pontosan azt a * folyamatot, aminek billentyűzetről is végigjárhatónak kell lennie. */ #domain_search_outter #searchtdomain:focus-visible, #domain_search_outter #search_btn:focus-visible, #domain_search_outter #transfer_btn:focus-visible, .hostiko-search-bar button:focus-visible, .hostiko-newsletterform button:focus-visible, .htk-cart-btn:focus-visible, .hostiko-testimonial-section .owl-carousel .owl-dots .owl-dot:focus-visible, .hostiko-testimonial-section .owl-carousel .owl-dots button:focus-visible, .sidebar-menu .sidebar-subscribe button:focus-visible, .responsive-mobile-menu button:focus-visible, .main-search input:focus-visible, .main-search button:focus-visible, .news_letter_form input:focus-visible, .wp-block-search button[type="submit"]:focus-visible { outline: var(--hostiko-focus-width) solid var(--hostiko-focus-ring) !important; outline-offset: var(--hostiko-focus-gap) !important; box-shadow: 0 0 0 var(--hostiko-focus-gap) var(--hostiko-focus-halo) !important; } /* * A `#primary`/`#site-navigation`/`#colophon` és a `[tabindex="-1"]` * konténerek SZÁNDÉKOSAN maradnak gyűrű nélkül. * * Ezek nem interaktív vezérlők: a „ugrás a tartalomra" link fókuszálja őket * programból, hogy a képernyőolvasó odaugorjon. Egy 3 px-es gyűrű egy egész * tartalomblokk köré vizuális zaj lenne, és nem is segít senkin — a fókusz * ott nem billentyűzet-navigáció eredménye. */ #primary:focus-visible, #site-navigation:focus-visible, #colophon:focus-visible, #content[tabindex="-1"]:focus-visible, [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; } /* * „Ugrás a tartalomra" link — fókuszban legyen ténylegesen látható. * * A WP `.screen-reader-text` mintája a linket a képernyőn kívülre teszi, és * `:focus`-ra hozza vissza. Itt `:focus-visible` helyett SZÁNDÉKOSAN `:focus` * marad: ez a link kizárólag billentyűzettel érhető el (egérrel nem is * látszik), tehát nincs mit szűkíteni — viszont ha `:focus-visible`-re * kötnénk, egy régebbi böngészőben teljesen elérhetetlenné válna. */ .skip-link:focus, .screen-reader-text:focus { background-color: var(--hostiko-focus-halo); color: #111; clip: auto !important; clip-path: none; display: block; font-size: 0.9rem; font-weight: 700; height: auto; left: 6px; line-height: normal; padding: 14px 22px; text-decoration: none; top: 6px; width: auto; z-index: 100000; outline: var(--hostiko-focus-width) solid var(--hostiko-focus-ring); outline-offset: var(--hostiko-focus-gap); } /* * Nagy kontrasztot igénylő felhasználók: a rendszerszintű beállítást * tiszteletben tartjuk, és a gyűrűt a böngésző saját kontrasztszínére * bízzuk (`Highlight`), ami a felhasználó témájához igazodik. */ @media (forced-colors: active) { :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible { outline: var(--hostiko-focus-width) solid Highlight !important; box-shadow: none !important; } }