[{"data":1,"prerenderedAt":857},["ShallowReactive",2],{"blog-vue-accessible-components-hu":3},{"slug":4,"published":5,"minutes":6,"category":7,"tags":8,"keywords":14,"about":25,"sources":35,"cover":72,"og":73,"expertise":74,"locales":75,"lang":78,"title":79,"description":80,"coverAlt":81,"metaTitle":82,"takeaways":83,"faq":89,"toc":105,"blocks":133,"others":584},"vue-accessible-components","2026-10-02",12,"web",[9,10,11,12,13],"Vue accessibility","WCAG 2.2","Focus management","Live regions","Component testing",[15,16,17,18,19,20,21,22,23,24],"accessible vue components","vue accessibility wcag 2.2","vue focus management modal","aria-live vue async","reka ui accessibility","eslint-plugin-vuejs-accessibility","axe-core playwright vue","vue combobox accessibility","wcag target size 24px","spa route change announcement accessibility",[26,29,32],{"name":27,"url":28},"Web Content Accessibility Guidelines","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_Content_Accessibility_Guidelines",{"name":30,"url":31},"Screen reader","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FScreen_reader",{"name":33,"url":34},"Single-page application","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSingle-page_application",[36,39,42,45,48,51,54,57,60,63,66,69],{"title":37,"url":38},"W3C: Web Content Accessibility Guidelines (WCAG) 2.2","https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F",{"title":40,"url":41},"axe-core README (Deque)","https:\u002F\u002Fgithub.com\u002Fdequelabs\u002Faxe-core",{"title":43,"url":44},"axe-core rule descriptions","https:\u002F\u002Fgithub.com\u002Fdequelabs\u002Faxe-core\u002Fblob\u002Fdevelop\u002Fdoc\u002Frule-descriptions.md",{"title":46,"url":47},"WebAIM: The WebAIM Million 2026","https:\u002F\u002Fwebaim.org\u002Fprojects\u002Fmillion\u002F",{"title":49,"url":50},"WebAIM: Screen Reader User Survey #11","https:\u002F\u002Fwebaim.org\u002Fprojects\u002Fscreenreadersurvey11\u002F",{"title":52,"url":53},"Vue: accessibility guide","https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbest-practices\u002Faccessibility.html",{"title":55,"url":56},"WAI-ARIA Authoring Practices Guide","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpractices\u002F",{"title":58,"url":59},"MDN: ARIA live regions","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FGuides\u002FLive_regions",{"title":61,"url":62},"Playwright: accessibility testing","https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Faccessibility-testing",{"title":64,"url":65},"Playwright: locator assertions (toMatchAriaSnapshot)","https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Fapi\u002Fclass-locatorassertions",{"title":67,"url":68},"nuxt\u002Fa11y on GitHub","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fa11y",{"title":70,"url":71},"Reka UI: introduction","https:\u002F\u002Freka-ui.com\u002Fdocs\u002Foverview\u002Fintroduction","\u002Fimages\u002Fblog\u002Fvue-accessible-components\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fvue-accessible-components\u002Fog.jpg","vue-nuxt-developer",[76,77,78],"en","de","hu","Akadálymentes Vue-komponensek: a WCAG 2.2 minták, amelyeket a tesztek nem látnak","WCAG 2.2 minták komponens szinten Vue-hoz és Nuxthoz: fókusz modálisokban és Teleportnál, élő régiók, kombinált mezők, az axe-core hiányai és egy tesztlétra.","Párbeszédablak fókuszkerettel az egyik gombon, mellette Tab billentyű és hangszóró.","Akadálymentes Vue-komponensek: WCAG 2.2 · Balázs Csorba",[84,85,86,87,88],"A WCAG 2.2 által újként jelölt kilenc kritérium közül öt közvetlenül a komponenskódot érinti: a fókusz nincs eltakarva, a húzómozdulatok, a célterület mérete, a redundáns adatbevitel és az akadálymentes hitelesítés.","Az axe-core átlagosan a WCAG-problémák 57%-át találja meg automatikusan, a WCAG 2.2-es szabálya pedig alapból ki van kapcsolva, ezért a zöld scan nem bizonyíték a billentyűzetes vagy a képernyőolvasós minőségre.","A fókuszkezelés a komponensbe tartozik: a natív dialógus inert háttérrel az olcsóbb alap, az egyoldalas útvonalváltásokhoz pedig kifejezett fókuszáthelyezés kell.","Az élő régióknak létezniük kell, mielőtt változnak, és csak egyszerű szöveget tartalmazhatnak; a streamelt MI-kimenetet mondatnyi részekben érdemes bejelenteni, nem tokenenként.","Lépcsőzetesen teszteljen: lintből és komponens-scanekből ARIA-pillanatképekig és kézi képernyőolvasós ellenőrzésig, a kész-definíciót pedig írja le, hogy a review érvényesíthesse.",[90,93,96,99,102],{"q":91,"a":92},"Az axe-core akadálymentessé teszi a Vue-alkalmazást?","Nem. Az axe-core saját megadása szerint átlagosan a WCAG-problémák 57%-át találja meg automatikusan, a WCAG 2.2-es szabálya pedig alapból ki van kapcsolva. A billentyűzetes, a fókusz- és a képernyőolvasós viselkedést továbbra is kézzel kell tesztelni.",{"q":94,"a":95},"Mely WCAG 2.2 kritériumok érintik leginkább a Vue-komponenseket?","A fókusz nincs eltakarva, a húzómozdulatok, a célterület mérete (minimum), a redundáns adatbevitel és az akadálymentes hitelesítés (minimum) közvetlenül a komponenskódot érintik. A fókusz látható és a kontraszt-kritériumok régebbiek, de egyedi stílusozásnál ugyanolyan gyakran buknak.",{"q":97,"a":98},"Hogyan kezeljem a fókuszt a Teleportot használó modálisban?","Használjon natív dialógust, amelyet showModal() nyit meg, a hátteret szükség esetén tegye inertté, és teszteljen fókuszvisszaadást bezáráskor. Az eredeti szülőjén belül kereső egyedi csapda nem találja meg a teleportált dialógust.",{"q":100,"a":101},"Miért nem olvassa fel a képernyőolvasó az üzeneteimet?","Gyakran az élő régiót ugyanabban a frissítésben hozták létre, mint az üzenetet. Először a régiót rendelje az oldallal együtt, legyen jelen, de üres, az üzenetet pedig utána írja bele.",{"q":103,"a":104},"Egyedi kombinált mezőt vagy natív select-et használjak?","Natív select-et, hacsak a termék olyan viselkedést nem igényel, amelyet az nem tud nyújtani. Az egyedi kombinált mező azt jelenti, hogy ön birtokolja az APG billentyűzetes szerződést, és minden frissítésnél karban kell tartania.",[106,109,112,115,118,121,124,127,130],{"id":107,"title":108},"wcag-criteria-in-component-code","Mely WCAG 2.2 kritériumok érintik a komponenskódot?",{"id":110,"title":111},"what-axe-actually-covers","Mit fed le valójában az axe-core?",{"id":113,"title":114},"focus-management-modals-teleport-and-route-changes","Hogyan kell viselkednie a fókusznak modálisban, Teleportnál és útvonalváltásnál?",{"id":116,"title":117},"async-ui-and-live-regions","Hogyan viselkednek az aszinkron frissítések és az élő régiók?",{"id":119,"title":120},"custom-selects-comboboxes-and-when-not-to-build-one","Érdemes-e egyedi legördülőt vagy kombinált mezőt építeni?",{"id":122,"title":123},"headless-libraries-what-they-still-dont-own","Mit hagynak továbbra is önre a headless könyvtárak?",{"id":125,"title":126},"the-testing-ladder","Hogyan teszteli mindezt?",{"id":128,"title":129},"component-definition-of-done-checklist","Mi tartozik egy komponens kész-definíciójába?",{"id":131,"title":132},"sources","Források",[134,142,151,154,161,164,167,247,248,251,262,269,276,277,280,283,295,301,304,322,324,327,328,331,337,340,348,349,356,359,366,369,370,377,380,413,414,417,421,424,427,429,448,450,457,473,474,477,533,545,546],{"type":135,"content":136},"paragraph",[137,141],{"tag":138,"children":139},"strong",[140],"A Vue-alkalmazások akadálymentességi hibáinak többsége komponenshiba."," Egy dialógus, amely nem adja vissza a fókuszt, egy üzenet, amelyet a képernyőolvasó sosem olvas fel, egy kombinált mező, amely nem reagál a nyílbillentyűkre, egy 16 pixel széles ikongomb: mindegyiket egyszer írják meg egy közös komponensben, aztán minden oldalon kiszállítják, ahol használják. Ezért a komponens a megfelelő egység az akadálymentesség munkájához, és ide érdemes leírni a szabályokat.",{"type":135,"content":143},[144,145,150],"Ez a cikk a WCAG 2.2 mérnöki felét adja Vue-hoz és Nuxthoz. Megmutatja, mely sikerkritériumok érintik a komponenskódot, elmagyarázza, mit lát és mit nem lát az axe-core, végigvezet a fókuszkezelésen, az aszinkron élő régiókon és az egyedi kombinált mezőkön, végül egy tesztlétrát és egy kész-definíciós ellenőrzőlistát ad, amelyet beilleszthet egy pull request sablonba. Azt nem dönti el, hogy egy oldal megfelel-e; a jogi keretet lásd ",{"tag":146,"to":147,"children":148},"link","\u002Fblog\u002Feuropean-accessibility-act-b2b-shop",[149],"az európai akadálymentességi törvényről B2B webshopoknak"," szóló cikkben.",{"type":152,"level":153,"id":107,"text":108},"heading",2,{"type":135,"content":155},[156,157,160],"A kilenc kritérium közül, amelyet a ",{"tag":158,"href":38,"children":159},"a",[10]," újként jelöl, öt közvetlenül komponenskódot érint: 2.4.11 Fókusz nincs eltakarva, 2.5.7 Húzómozdulatok, 2.5.8 Célterület mérete (minimum), 3.3.7 Redundáns adatbevitel és 3.3.8 Akadálymentes hitelesítés (minimum). A régebbi kritériumok, amelyek a legtöbbször buknak, továbbra is a 2.4.7 Fókusz látható, valamint az 1.4.3 és 1.4.11 kontraszt-kritériumok. Ezek a 2.2-ben nem változtak, de minden egyedi felületben ott vannak.",{"type":135,"content":162},[163],"Mindegyik kritérium egy konkrét Vue-elemre vonatkozik. A fókusz nincs eltakarva jellemzően azt jelenti, hogy egy rögzített fejléc, egy sütijelző vagy egy lebegő csevegőablak eltakarja a fókuszált sort vagy gombot. A célterület mérete a csak ikonos bezáró gombokra és eszköztárakra vonatkozik, ha a kattintható felület kisebb 24 × 24 CSS-pixelnél. A húzómozdulatok a rendezhető listákat és csúszkákat érintik, amelyekhez egy mutatóval használható alternatíva, például gombok kellenek. A redundáns adatbevitel a többlépcsős űrlapokat érinti, amelyek újra kérdeznek egy címet, amelyet a felhasználó két lépéssel korábban már megadott. Az akadálymentes hitelesítés a bejelentkező képernyőket és az egyszer használatos kódos mezőket érinti, amelyek tiltják a beillesztést vagy a jelszókezelőket.",{"type":135,"content":165},[166],"A táblázat a munkatérkép: soronként egy kritérium, az a Vue-elem, ahol megjelenik, hogy az axe-core-nak van-e rá szabálya, és a legolcsóbb javítás.",{"type":168,"head":169,"rows":178},"table",[170,172,174,176],[171],"Kritérium",[173],"Vue-elem",[175],"axe-szabály most",[177],"Legolcsóbb javítás",[179,188,196,204,213,221,229,238],[180,182,184,186],[181],"2.4.7 Fókusz látható (AA)",[183],"egyedi vezérlők fókuszstílusai",[185],"nincs",[187],"a natív keretet meg kell tartani; cserélni, nem egyszerűen elvenni",[189,191,193,194],[190],"2.4.11 Fókusz nincs eltakarva (AA)",[192],"rögzített fejléc, sütijelző, csevegőablak",[185],[195],"scroll-margin a fókuszcélokon",[197,199,201,202],[198],"2.5.7 Húzómozdulatok (AA)",[200],"rendezhető listák, csúszkák",[185],[203],"elemeket mozgató gombok",[205,207,209,211],[206],"2.5.8 Célterület mérete (AA)",[208],"csak ikonos bezáró és eszköztár-gombok",[210],"target-size, alapból kikapcsolva",[212],"24 × 24 px-es kattintható felület",[214,216,218,219],[215],"3.3.7 Redundáns adatbevitel (A)",[217],"többlépcsős pénztár- és címűrlapok",[185],[220],"előző lépésekből előtöltés",[222,224,226,227],[223],"3.3.8 Akadálymentes hitelesítés (AA)",[225],"bejelentkezési, kódos és jelszómezők",[185],[228],"beillesztés és jelszókezelők engedélyezése",[230,232,234,236],[231],"1.4.3 és 1.4.11 kontraszt",[233],"design tokenek, keretek, fókuszkeretek",[235],"csak szöveg (color-contrast)",[237],"minden tokenpárt minden állapotban ellenőrizni",[239,241,243,245],[240],"4.1.2 Név, szerep, érték",[242],"egyedi kombinált mezők, ikongombok",[244],"részben",[246],"először a natív elemet használni",{"type":152,"level":153,"id":110,"text":111},{"type":135,"content":249},[250],"Az automatikus scannerek a WCAG-problémák hasznos részét megtalálják, de ritkán azokat, amelyek a billentyűzetet vagy a képernyőolvasót használó felhasználót leginkább akadályozzák. Az axe-core szerint átlagosan a WCAG-problémák 57%-át találja meg automatikusan. A WCAG 2.2-es részében egyetlen szabály van, a target-size, és ez alapból ki van kapcsolva.",{"type":135,"content":252},[253,254,257,258,261],"Az ",{"tag":158,"href":41,"children":255},[256],"axe-core README"," egyértelműen megnevezi a határt: „With axe-core, you can find on average 57% of WCAG issues automatically.” A ",{"tag":158,"href":44,"children":259},[260],"szabályleírások"," megerősítik a WCAG 2.2 rést: az egyetlen 2.2-es szabály a target-size, és az ki van kapcsolva, amíg a WCAG 2.2 el nem terjed. Egyetlen szabály sem ellenőrzi a fókusz nincs eltakarva, a redundáns adatbevitel vagy az akadálymentes hitelesítés kritériumát.",{"type":135,"content":263},[264,265,268],"A népességi adatok szerint a rés mérhető. A ",{"tag":158,"href":47,"children":266},[267],"WebAIM Million 2026"," felmérése egymillió főoldalt vizsgált, és átlagosan 56,1 észlelt hibát talált oldalanként, ami 10,1%-os emelkedés az 51-es 2025-ös értékhez képest. A Vue.js-szel készült főoldalakon átlagosan 64,6, a Nuxt.js-oldalakon 54,7 észlelt hiba volt. A WebAIM kimondja, hogy nem minden megfelelési hiba észlelhető automatikusan, ezért ezeket a számokat az eszközök által látottként olvassa, nem pedig egy oldal ítéleteként.",{"type":270,"variant":271,"title":272,"body":273},"callout","warn","A zöld scan nem jelent megfelelést",[274],[275],"Az automatikus scant az általa megnevezhető hibák riasztójaként kezelje. A billentyűzetes sorrendet, a fókuszviselkedést és a képernyőolvasós bejelentéseket embernek kell ellenőriznie; a cikk alábbi tesztlétrája minden hibatípust ahhoz a fokhoz rendel, amely megtalálhatja.",{"type":152,"level":153,"id":113,"text":114},{"type":135,"content":278},[279],"A modálisnak megnyitáskor a fókuszt be kell vinnie, a Tab és a Shift+Tab billentyűt benne kell tartania, Escape-re be kell záródnia, és vissza kell adnia a fókuszt annak az elemnek, amely megnyitotta. Egy kézzel írt fókuszcsapda mind a négy feladatot elláthatja, de a natív dialógus-elem, amelynek a többi oldala inert, kevesebb kóddal elvégzi a munka nagyobb részét.",{"type":135,"content":281},[282],"A kézzel írt csapdák jellemzően három helyen buknak el. Csak a csatoláskor gyűjtik össze a fókuszálható elemeket, ezért a később renderelt mezőt kihagyják. Arra a konténerre szűkítenek, amelyben a komponenst írták, de a Teleport a dialógus DOM-csomópontját a dokumentum egy másik részébe mozgatja, így a csapda nem találja meg. Olyan gombra állítják vissza a fókuszt, amelyet egy újrarenderelés már eltávolított, így a fókusz a body-ra esik vissza.",{"type":135,"content":284},[285,286,290,291,294],"A olcsóbb alap a natív dialógus. A ",{"tag":287,"children":288},"code",[289],"showModal()"," hívás a elemet a felső rétegbe helyezi, a dokumentum többi részét inertté teszi, és Escape-re bezárul. A mai motorok a bezáráskor a fókuszt is visszaadják a megnyitó elemnek, de a visszaadás részletei eltérnek a megvalósítások között, ezért írjon hozzá tesztet minden szállított böngészőben. Ahol a natív dialógus nem illik, az ",{"tag":287,"children":292},[293],"inert"," attribútum ugyanezt a hatást adja a saját overlay mögötti oldalon.",{"type":296,"src":297,"alt":298,"wide":299,"caption":300},"image","\u002Fimages\u002Fblog\u002Fvue-accessible-components\u002Fdiagram-16.webp","Egy teleportált dialógus fókuszciklusa Öt lépés balról jobbra: az indítógomb megnyitja a dialógust, a fókusz az első vezérlőre kerül; a Tab és a Shift+Tab a dialóguson belül marad; az Escape vagy a bezáró gomb bezárja; ezután a fókusz visszatér ahhoz az elemhez, amely megnyitotta.",true,"Egy teleportált dialógus fókuszciklusa: nyitás az indítógombról, fókusz be, a Tab bent marad, bezárás Escape-pel vagy a bezáró gombbal, a fókusz vissza az indítóra.",{"type":152,"level":302,"text":303},3,"Útvonalváltások a Vue Routerben és a Nuxtban",{"type":135,"content":305},[306,307,310,311,314,315,318,319,321],"Az egyoldalas navigáció nem tölti újra a dokumentumot, ezért a böngésző sem helyezi át a fókuszt, és nem jelenti be az új oldalt. A ",{"tag":158,"href":53,"children":308},[309],"Vue akadálymentességi útmutatója"," ezt egy átugró hivatkozással kezeli, amely az első fókuszálható elem, és egy ",{"tag":287,"children":312},[313],"route.path","-ra figyelő watcherrel, amely minden útvonalváltás után áthelyezi a fókuszt. Az itt használt őrszem-minta egy fókuszálható címsort helyez a fő terület elejére, amelyet az elrendezés navigáció után fókuszál. Egy címsor vagy őrszem fókuszálása jobb, mint a ",{"tag":287,"children":316},[317],"body"," fókuszálása, mert a ",{"tag":287,"children":320},[317]," nem alkalmas arra, hogy a képernyőolvasó onnan kezdjen olvasni.",{"type":287,"code":323},"\u003C!-- Layout sketch: move focus to the page heading after each route change -->\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst sentinel = ref\u003CHTMLElement | null>(null)\n\nwatch(() => route.path, async () => {\n  await nextTick() \u002F\u002F let the new page render first\n  sentinel.value?.focus()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003Ch1 ref=\"sentinel\" tabindex=\"-1\">\u003Cslot name=\"title\" \u002F>\u003C\u002Fh1>\n    \u003Cslot \u002F>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>",{"type":135,"content":325},[326],"A fókuszáthelyezést csak akkor kösse bejelentéshez, ha a fókuszált címsor nem mutatja már meg a felhasználónak, hol jár. Hogy egy megváltozott dokumentumcím önmagában bejelentésre kerül-e, a képernyőolvasótól és a böngészőtől függ, ezért ezt a kombinációt tesztelje, ne feltételezze.",{"type":152,"level":153,"id":116,"text":117},{"type":135,"content":329},[330],"Az élő régió csak akkor jelent be változást, ha a régió a változás előtt már létezett. A konténert az oldallal együtt renderelje, és utána frissítse a szövegét. Alapértelmezésben használjon polite szintet, assertive-et csak olyan hibákra, amelyek blokkolják a felhasználót, és soha ne tegyen vezérlőt a régióba, mert az élő régiók egyszerű szövegként kerülnek bejelentésre.",{"type":135,"content":332},[253,333,336],{"tag":158,"href":59,"children":334},[335],"MDN útmutatója az élő régiókról"," ugyanezekre a szabályokra épül: a régiót előbb létre kell hozni, az első tartalmi frissítést egy későbbi feladatra kell halasztani, és az assertive szintet a sürgős üzenetekre kell tartogatni. Figyelmeztet is, hogy az élő régiók általában egyszerű szövegként kerülnek bejelentésre, így a frissített tartalom linkjei, gombjai és egyéb szemantikája elveszhet.",{"type":135,"content":338},[339],"Ezen múlnak a hibaüzenetes toastok. Ha egy komponens a toastot az élő régiójával együtt csatolja, a régió és az üzenet ugyanabban a DOM-frissítésben jelenik meg, és sok képernyőolvasó nem jelenti be az üzenetet. A megoldás egy az oldallal együtt renderelt régió, amely jelen van, de üres, és ebbe írja a komponens a toast szövegét. Ugyanez igaz a beviteli ellenőrzés összesítőire és az útvonalváltás utáni mentési visszaigazolásokra.",{"type":135,"content":341},[342,343,347],"A streamelt kimenet a legnehezebb eset. Ha az LLM-válasz minden darabja egy udvarias régióba kerül, a képernyőolvasó szavanként olvassa fel a választ, és folyton megszakítja magát. A látható szöveg frissüljön a streamelés közben, az összefoglalót vagy a kész választ pedig mondatoknál vagy a befejezésnél jelentse be. A ",{"tag":146,"to":344,"children":345},"\u002Fblog\u002Fvue-ai-chat-ui-streaming-accessibility",[346],"streamelt csevegők akadálymentességéről szóló cikk"," a csevegőspecifikus részleteket tárgyalja.",{"type":152,"level":153,"id":119,"text":120},{"type":135,"content":350},[351,352,355],"Ha a design engedi, mindig natív select-et használjon. Egyedi kombinált mezőt csak akkor építsen, ha a termék olyasmit igényel, amire egy natív vezérlő nem képes, és akkor vállalja a teljes billentyűzetes szerződést a ",{"tag":158,"href":56,"children":353},[354],"WAI-ARIA Authoring Practices Guide (APG)"," alapján.",{"type":135,"content":357},[358],"Az APG egyértelműen megnevezi az árat: „Unlike native HTML form elements, browsers do not provide keyboard support for graphical user interface (GUI) components that are made accessible with ARIA; authors have to provide the keyboard support in their code.” Egy kombinált mezőnél ez azt jelenti: a nyílbillentyűk végigviszik az opciókat, az Enter kiválaszt, az Escape bezár, a gépelés szűri a listát, és a fókusz ott marad, ahol a minta előírja. Az APG a kombinált mezőt, a listboxot, a dialógust, a rácsot, a körhintát és a harmonikát külön mintaként kezeli, külön szerződéssel, és a csapatok gyakran összekeverik őket.",{"type":135,"content":360},[361,362,365],"Két megvalósítási döntés számít. Az ",{"tag":287,"children":363},[364],"aria-activedescendant"," a DOM-fókuszt a szöveges mezőn tartja, és azonosítóval mutat a kiemelt opcióra; ez a szűrhető kombinált mezőknek felel meg. A roving tabindex valódi fókuszt mozgat az elemek között; ez az eszköztáraknak, menüknek és rácsoknak való. Azt nézze, hová gépel a felhasználó: a szöveges mező az activedescendantot indokolja, a vezérlősor a roving tabindexet.",{"type":135,"content":367},[368],"Az egyedi vezérlő állandó karbantartást jelent. Minden keretrendszer-frissítés, minden új opciótípus és minden designváltozás megtörheti a szerződést, a komponenstesztnek pedig a billentyűzetet is le kell fednie, nem csak a kirenderelt jelölést. Ha egy stílusozott burkolóval ellátott natív select teljesíti a követelményt, az szinte mindig olcsóbb komponens.",{"type":152,"level":153,"id":122,"text":123},{"type":135,"content":371},[372,373,376],"A headless komponenskönyvtárak egy minta ARIA-bekötését, billentyűzetkiosztását és fókuszhatókörét adják. Nem adják meg az akadálymentes neveket, a színkontrasztot, a hibaüzeneteket vagy az ikongombjaik célterületének méretét. A ",{"tag":158,"href":71,"children":374},[375],"Reka UI"," 2026 októberében az egyik Vue-os lehetőség, és a dokumentációja egyértelműen leírja, mit fed le.",{"type":135,"content":378},[379],"A Reka UI a Radix Vue v2-es továbbfejlesztéseként mutatkozik be, és azt állítja, hogy komponensei a WAI-ARIA tervezési mintákhoz igazodnak, és kezelik az olyan részleteket, mint az aria-attribútumok, a billentyűzetes navigáció és a fókuszkezelés. A szerződés többi része a terméket birtokló csapatnál marad. Az alábbi lista azt mutatja, mi marad az ön feladata bármilyen headless megoldásnál:",{"type":381,"ordered":382,"items":383},"list",false,[384,389,394,403,408],[385,388],{"tag":138,"children":386},[387],"Akadálymentes nevek:"," a kosarat bezáró ikongombnak olyan név kell, mint „Kosár bezárása”; egy könyvtár nem tudja kitalálni, mit jelent egy puszta ikon.",[390,393],{"tag":138,"children":391},[392],"Kontraszt a saját designban:"," a könyvtár nem szállít színeket, ezért minden tokenpárt ellenőrizni kell világos és sötét módban, minden állapotban.",[395,398,399,402],{"tag":138,"children":396},[397],"Hibaüzenetek:"," a hibaszövegnek az ",{"tag":287,"children":400},[401],"aria-describedby"," révén kell kapcsolódnia a mezőhöz, és meg kell mondania, mit tegyen a felhasználó.",[404,407],{"tag":138,"children":405},[406],"Útvonalváltási bejelentések:"," az egyoldalas alkalmazás oldalváltásai az ön feladatai, ahogy fentebb leírtuk.",[409,412],{"tag":138,"children":410},[411],"Célterület mérete:"," egy headless gomb akkora, amekkorát a CSS ad neki.",{"type":152,"level":153,"id":125,"text":126},{"type":135,"content":415},[416],"Rétegekben teszteljen, a legolcsóbbtól: linteljük a sablonokat, minden komponenst egységtesztben vizsgáljunk, a valós folyamatokat végig scanneljük, az akadálymentességi fát ARIA-pillanatképekkel ellenőrizzük, és kézi ellenőrzéssel zárjuk billentyűzettel és képernyőolvasóval. Minden fok olyan hibatípusokat talál meg, amelyeket az előtte lévők nem, a legfelsőhöz pedig továbbra is ember kell.",{"type":296,"src":418,"alt":419,"wide":299,"caption":420},"\u002Fimages\u002Fblog\u002Fvue-accessible-components\u002Fdiagram-37.webp","A tesztlétra Öt fok balról jobbra: sablon-lint szabályok, komponens szintű axe-scan egységtesztekben, axe-scan valós folyamatokon végig, ARIA-pillanatkép, amely az akadálymentességi fát ellenőrzi, és kézi ellenőrzés billentyűzettel és képernyőolvasóval.","A tesztlétra, a legolcsóbbtól: minden fok olyan hibatípusokat talál meg, amelyeket az előtte lévők nem, a legfelső fokhoz pedig továbbra is kell egy ember képernyőolvasóval.",{"type":135,"content":422},[423],"A lint azért jön először, mert a legolcsóbb hibák azok, amelyeket a sablon láthatóvá tesz. Az eslint-plugin-vuejs-accessibility a szokásos sablonhibákat jelöli meg, például a hiányzó alternatív szöveget és a hibás ARIA-attribútumokat. Azt nem tudja eldönteni, hogy egy alternatív szöveg értelmes-e, ezért szűrőként működik, nem ítéletként.",{"type":135,"content":425},[426],"Az egységtesztek minden komponensre külön futtatják az axe-core-t, így a hiba egyetlen komponensre mutat.",{"type":287,"code":428},"\u002F\u002F Vitest: scan the rendered dialog, not the whole page\nimport axe from 'axe-core'\n\nit('confirm dialog has no detectable violations', async () => {\n  const { container } = render(ConfirmDialog, { props: { open: true } })\n  const results = await axe.run(container)\n  expect(results.violations).toEqual([])\n})",{"type":135,"content":430},[431,432,435,436,439,440,443,444,447],"A végponttól végpontig tartó fok a ",{"tag":287,"children":433},[434],"@axe-core\u002Fplaywright"," csomagot futtatja valós folyamatokon: megnyitja a dialógust, hibával elküldi az űrlapot, majd a felhasználó által ténylegesen elért állapotot scanneli. A ",{"tag":158,"href":62,"children":437},[438],"Playwright akadálymentességi útmutatója"," ezt a kombinációt javasolja, és egyértelműen kimondja, hogy sok probléma csak kézi teszteléssel derül ki. A Playwrightban van ",{"tag":287,"children":441},[442],"toMatchAriaSnapshot"," is, a 1.49-es verziótól, amely ",{"tag":158,"href":65,"children":445},[446],"az akadálymentességi fát ellenőrzi",", így a csendben nevét vesztő gombot egy olyan teszt is megbukik, amelyet egy vizuális pillanatkép elnézne.",{"type":287,"code":449},"\u002F\u002F Playwright: scan the state a user reaches, not the empty page\nimport AxeBuilder from '@axe-core\u002Fplaywright'\n\nawait page.getByRole('button', { name: 'Delete order' }).click()\nconst results = await new AxeBuilder({ page }).include('[role=\"dialog\"]').analyze()\nexpect(results.violations).toEqual([])",{"type":135,"content":451},[452,453,456],"A legfelső fok egy ember képernyőolvasóval. A ",{"tag":158,"href":50,"children":454},[455],"WebAIM Screen Reader User Survey #11",", amelyet 2026 júliusában és augusztusában 1780 válasszal készítettek, a JAWS-t nevezi meg elsődleges asztali képernyőolvasóként a válaszadók 55,0%-ánál, az NVDA-t 32,9%-nál, a VoiceOver-t 6,5%-nál. Alapként az NVDA-t teszteljen Windowson, a VoiceOver-t macOS-en és iOS-en, és vegye hozzá a JAWS-t, ha a felhasználók használják. Először csak billentyűzettel járja végig a teljes folyamatot, mert a legtöbb fókuszhiba még azelőtt látszik, hogy bármilyen képernyőolvasó futna. A második kört egy ügynöki munkamenetből futtatom a Playwright MCP szerverrel, így az ügynök megnyitja a dialógust, végigtabolja és lefuttatja a scant, de a bejelentéseket továbbra is ember hallgatja meg.",{"type":135,"content":458},[459,460,463,464,467,468,472],"A fejlesztéshez a ",{"tag":158,"href":68,"children":461},[462],"@nuxt\u002Fa11y"," a Nuxt DevToolsban futtatja az axe-core-t útvonalfüggő vizsgálattal, és a ",{"tag":287,"children":465},[466],"nuxt generate"," során jelentéseket készíthet. A legújabb kiadása még az 1.0.0-alpha.1, ezért fejlesztési segédeszközként használja, a CI-kaput pedig a fenti fokokon tartsa. Ugyanaz a fegyelem érvényes, mint a ",{"tag":146,"to":469,"children":470},"\u002Fblog\u002Fnuxt-core-web-vitals-performance",[471],"Nuxt Core Web Vitals és teljesítménykeretek"," esetében: a CI-ben ellenőrzött szám igaz marad, az egyszer ellenőrzött nem.",{"type":152,"level":153,"id":128,"text":129},{"type":135,"content":475},[476],"Egy komponens akkor kész, ha a neve, szerepe, billentyűzetes viselkedése, fókuszkezelése, kontrasztja, célterületének mérete és élő régiójának viselkedése külön-külön ellenőrizve és a review-ban rögzítve van. Az alábbi lista úgy készült, hogy beleférjen egy pull request sablonba vagy egy review-skillbe, és minden pontja a tesztlétra egy fokának felel meg.",{"type":381,"ordered":382,"items":478},[479,484,489,494,499,504,509,514,519,528],[480,483],{"tag":138,"children":481},[482],"Név és szerep:"," minden vezérlőnek van akadálymentes neve, és a szerepe egy natív elemnek vagy az általa megvalósított APG-mintának felel meg.",[485,488],{"tag":138,"children":486},[487],"Billentyűzet:"," minden művelet a minta által előírt billentyűkkel működik, és a dialógusokon kívül nincs fókuszcsapda.",[490,493],{"tag":138,"children":491},[492],"Fókusz:"," a fókuszjelzés világos és sötét témában is látszik, görgetéskor nem takarja el rögzített elem, és bezárás vagy navigáció után visszatér az indítóhoz.",[495,498],{"tag":138,"children":496},[497],"Kontraszt:"," a szöveg eléri a 4,5:1-et, a szükséges vizuális állapotok a 3:1-et, világos és sötét témában.",[500,503],{"tag":138,"children":501},[502],"Célterület:"," a mutatóval kattintható célok legalább 24 × 24 CSS-pixelesek, vagy olyan távolságra vannak, hogy a kivétel érvényesüljön.",[505,508],{"tag":138,"children":506},[507],"Élő régiók:"," a régió a frissítés előtt már létezik, udvarias, hacsak az üzenet nem blokkolja a felhasználót, és csak egyszerű szöveget tartalmaz.",[510,513],{"tag":138,"children":511},[512],"Űrlapok:"," a hibák a mezőikhez kapcsolódnak, és nem csak színnel jelzik őket; az ismétlődő adatok előre ki vannak töltve; a bejelentkező mezők engedik a beillesztést és a jelszókezelőket.",[515,518],{"tag":138,"children":516},[517],"Húzás:"," minden húzási műveletnek van egy mutatóval használható alternatívája.",[520,523,524,527],{"tag":138,"children":521},[522],"Mozgás:"," a jelentéssel bíró átmenetek tiszteletben tartják a ",{"tag":287,"children":525},[526],"prefers-reduced-motion"," beállítást.",[529,532],{"tag":138,"children":530},[531],"Jobbról balra:"," a fókuszjelzés és az ikonok iránya jobbról balra elrendezésben is működik.",{"type":135,"content":534},[535,536,539,540,544],"Ha a lista le van írva, egy review-ügynök az emberi diff-olvasás előtt ellenőrizheti velük az új komponenseket, a képernyőolvasós ellenőrzés pedig marad embernél. Körülbelül húsz ügynök-skillem van a ",{"tag":287,"children":537},[538],"~\u002F.agents\u002Fskills"," mappában, és ez az ellenőrzőlista természetes jelölt egyhez. Ha Vue- vagy Nuxt-komponenskönyvtárat épít vagy vizsgál, és ezt a CI-be szeretné kötni, nézze meg a ",{"tag":146,"to":541,"children":542},"\u002Fexpertise\u002Fvue-nuxt-developer",[543],"Vue- és Nuxt-munkámat",".",{"type":152,"level":153,"id":131,"text":132},{"type":381,"ordered":299,"items":547},[548,551,554,557,560,563,566,569,572,575,578,581],[549],{"tag":158,"href":38,"children":550},[37],[552],{"tag":158,"href":41,"children":553},[40],[555],{"tag":158,"href":44,"children":556},[43],[558],{"tag":158,"href":47,"children":559},[46],[561],{"tag":158,"href":50,"children":562},[49],[564],{"tag":158,"href":53,"children":565},[52],[567],{"tag":158,"href":56,"children":568},[55],[570],{"tag":158,"href":59,"children":571},[58],[573],{"tag":158,"href":62,"children":574},[61],[576],{"tag":158,"href":65,"children":577},[64],[579],{"tag":158,"href":68,"children":580},[67],[582],{"tag":158,"href":71,"children":583},[70],[585,660,716,789],{"slug":586,"published":587,"minutes":588,"category":7,"tags":589,"keywords":595,"about":607,"sources":616,"cover":653,"og":654,"expertise":655,"locales":656,"lang":78,"title":657,"description":658,"coverAlt":659},"schema-org-structured-data-b2b-shop","2026-10-17",10,[590,591,592,593,594],"Schema.org","Structured data","B2B e-commerce","Technical SEO","Nuxt",[596,597,598,599,600,601,602,603,604,605,606],"schema.org b2b shop","product structured data b2b","merchant listing structured data","product snippet vs merchant listing","unitpricespecification referencequantity","productgroup variants structured data","organization schema vatid","b2b prices behind login seo","json-ld nuxt schema org","merchant return policy structured data","mpn gtin structured data",[608,610,613],{"name":590,"url":609},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSchema.org",{"name":611,"url":612},"JSON-LD","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FJSON-LD",{"name":614,"url":615},"Business-to-business","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBusiness-to-business",[617,620,623,626,629,632,635,638,641,644,647,650],{"title":618,"url":619},"Google Search Central: Introduction to Product structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct",{"title":621,"url":622},"Google Search Central: Merchant listing (Product, Offer) structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fmerchant-listing",{"title":624,"url":625},"Google Search Central: Product snippet structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct-snippet",{"title":627,"url":628},"Google Search Central: Product variant structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct-variants",{"title":630,"url":631},"Google Search Central: Organization structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Forganization",{"title":633,"url":634},"Google Search Central: Merchant return policy structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Freturn-policy",{"title":636,"url":637},"Google Search Central: General structured data guidelines","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fsd-policies",{"title":639,"url":640},"Google Search Central: Generate structured data with JavaScript","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fgenerate-structured-data-with-javascript",{"title":642,"url":643},"Schema.org: Offer","https:\u002F\u002Fschema.org\u002FOffer",{"title":645,"url":646},"Schema.org: UnitPriceSpecification","https:\u002F\u002Fschema.org\u002FUnitPriceSpecification",{"title":648,"url":649},"Unhead: Product schema (defineProduct)","https:\u002F\u002Funhead.unjs.io\u002Fdocs\u002Fschema-org\u002Fapi\u002Fschema\u002Fproduct",{"title":651,"url":652},"Nuxt SEO: Schema.org identity setup","https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fschema-org\u002Fguides\u002Fsetup-identity","\u002Fimages\u002Fblog\u002Fschema-org-structured-data-b2b-shop\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fschema-org-structured-data-b2b-shop\u002Fog.jpg","b2b-ecommerce-developer",[76,77,78],"Schema.org strukturált adatok B2B webshopokhoz: bejelentkezés mögötti árak, egységek és változatok","Termék-markup B2B shopokhoz: snippet vagy kereskedői lista, melyik ár, cikkszámok, egységárak, változatok, Organization és SSR Nuxtban.","Terméktéglalap vékony kerettel, alsó kis mezőjét alacsony fal takarja el.",{"slug":661,"published":587,"minutes":662,"category":7,"tags":663,"keywords":668,"about":680,"sources":688,"cover":710,"og":711,"expertise":655,"locales":712,"lang":78,"title":713,"description":714,"coverAlt":715},"ai-assistant-b2b-shop-customer-support",9,[592,664,665,666,667],"AI assistant","Customer support","LLM agents","EU AI Act",[669,670,671,672,673,674,675,676,677,678,679],"ai assistant b2b shop","ai customer support b2b ecommerce","llm chatbot order status","ai agent customer service tools","chatbot liability air canada","klarna ai assistant results","human handoff chatbot design","eu ai act chatbot disclosure","owasp excessive agency","ai support resolution rate","b2b customer portal chatbot",[681,684,687],{"name":682,"url":683},"Customer service","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCustomer_service",{"name":685,"url":686},"Chatbot","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FChatbot",{"name":614,"url":615},[689,692,695,698,701,704,707],{"title":690,"url":691},"Klarna: AI assistant handles two-thirds of customer service chats in its first month (press release, 2024)","https:\u002F\u002Fwww.klarna.com\u002Finternational\u002Fpress\u002Fklarna-ai-assistant-handles-two-thirds-of-customer-service-chats-in-its-first-month\u002F",{"title":693,"url":694},"Entrepreneur: Klarna is hiring customer service agents again, according to its CEO (May 2025)","https:\u002F\u002Fwww.entrepreneur.com\u002Fbusiness-news\u002Fklarna-ceo-reverses-course-by-hiring-more-humans-not-ai\u002F491396",{"title":696,"url":697},"ABA Business Law Today: BC tribunal confirms companies remain liable for information provided by AI chatbot","https:\u002F\u002Fwww.americanbar.org\u002Fgroups\u002Fbusiness_law\u002Fresources\u002Fbusiness-law-today\u002F2024-february\u002Fbc-tribunal-confirms-companies-remain-liable-information-provided-ai-chatbot\u002F",{"title":699,"url":700},"OWASP GenAI Security Project: LLM06:2025 Excessive Agency","https:\u002F\u002Fgenai.owasp.org\u002Fllmrisk\u002Fllm062025-excessive-agency\u002F",{"title":702,"url":703},"OWASP GenAI Security Project: LLM05:2025 Improper Output Handling","https:\u002F\u002Fgenai.owasp.org\u002Fllmrisk\u002Fllm052025-improper-output-handling\u002F",{"title":705,"url":706},"EU AI Act, Article 50: Transparency obligations","https:\u002F\u002Fartificialintelligenceact.eu\u002Farticle\u002F50\u002F",{"title":708,"url":709},"Intercom: Fin pricing and billable outcomes","https:\u002F\u002Ffin.ai\u002Fpricing","\u002Fimages\u002Fblog\u002Fai-assistant-b2b-shop-customer-support\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fai-assistant-b2b-shop-customer-support\u002Fog.jpg",[76,77,78],"AI-asszisztens a B2B webshop ügyfélszolgálatához: eszközök, jogosultságok és átadás embernek","Hogyan építs AI ügyfélszolgálati asszisztenst B2B shophoz: mit automatizálj, eszközök ügyfélkontextusban, átadás embernek, AI Act és mérőszámok.","Magas fal keskeny réssel: nyíl halad át rajta a három négyzetből álló bekerített mezőbe, egy másik lefelé, egy tálca felé mutat.",{"slug":717,"published":587,"minutes":718,"category":7,"tags":719,"keywords":724,"about":736,"sources":746,"cover":783,"og":784,"expertise":74,"locales":785,"lang":78,"title":786,"description":787,"coverAlt":788},"vue-ai-chat-ui-streaming-accessibility",11,[720,594,721,722,723],"Vue","Accessibility","Streaming","AI chat",[725,726,727,728,729,730,731,732,733,734,735],"vue ai chat ui","nuxt llm streaming","sse vs fetch streaming","aria-live streaming text","accessible chat interface","abort fetch stream vue","dompurify markdown llm","role log chat","reduced motion chat ui","wcag 2.2 chat","screen reader streaming",[737,740,743],{"name":738,"url":739},"Web accessibility","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_accessibility",{"name":741,"url":742},"Server-sent events","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FServer-sent_events",{"name":744,"url":745},"Vue.js","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FVue.js",[747,750,753,756,759,762,765,768,771,774,777,780],{"title":748,"url":749},"MDN: Using server-sent events","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FServer-sent_events\u002FUsing_server-sent_events",{"title":751,"url":752},"MDN: AbortController","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FAbortController",{"title":754,"url":755},"MDN: ReadableStream","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FReadableStream",{"title":757,"url":758},"MDN: TextDecoderStream","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FTextDecoderStream",{"title":760,"url":761},"MDN: ARIA log role","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles\u002Flog_role",{"title":763,"url":764},"W3C: Understanding SC 4.1.3 Status Messages","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fstatus-messages.html",{"title":766,"url":767},"W3C WAI: What's new in WCAG 2.2","https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fstandards-guidelines\u002Fwcag\u002Fnew-in-22\u002F",{"title":769,"url":770},"MDN: prefers-reduced-motion","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",{"title":772,"url":773},"DOMPurify README","https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify",{"title":775,"url":776},"markdown-it README","https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it",{"title":778,"url":779},"AI SDK docs: useChat","https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Fai-sdk-ui\u002Fchatbot",{"title":781,"url":782},"Vue docs: nextTick","https:\u002F\u002Fvuejs.org\u002Fapi\u002Fgeneral.html#nexttick","\u002Fimages\u002Fblog\u002Fvue-ai-chat-ui-streaming-accessibility\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fvue-ai-chat-ui-streaming-accessibility\u002Fog.jpg",[76,77,78],"AI-csevegő UI Vue-ban és Nuxtban: akadálymentes streaming","AI-csevegő Vue-ban vagy Nuxtban: fetch-stream, megszakítás és újrapróbálás, biztonságos markdown, aria-live bejelentések, billentyűzet és reduced motion.","Üzenetkártya villogó kurzorral, pontozott vonal hullámokká nyílik, mellette pipa.",{"slug":790,"published":587,"minutes":662,"category":7,"tags":791,"keywords":796,"about":808,"sources":818,"cover":851,"og":852,"expertise":74,"locales":853,"lang":78,"title":854,"description":855,"coverAlt":856},"llm-translation-pipeline-i18n",[792,793,794,720,795],"Translation","i18n","LLM","Localization",[797,798,799,800,801,802,803,804,805,806,807],"llm translation pipeline","icu messageformat placeholders","vue i18n llm translation","translation memory llm","glossary enforcement translation","german informal sie du","hungarian translation quality llm","structured output json translation","machine translation post-editing","locale file validation","cldr plural categories",[809,812,815],{"name":810,"url":811},"Internationalization and localization","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FInternationalization_and_localization",{"name":813,"url":814},"ICU MessageFormat","https:\u002F\u002Funicode-org.github.io\u002Ficu\u002Fuserguide\u002Fformat_parse\u002Fmessages\u002F",{"name":816,"url":817},"Vue I18n","https:\u002F\u002Fvue-i18n.intlify.dev\u002F",[819,821,824,827,830,833,836,839,842,845,848],{"title":820,"url":814},"Unicode ICU User Guide: Formatting Messages",{"title":822,"url":823},"Vue I18n: Message Format Syntax","https:\u002F\u002Fvue-i18n.intlify.dev\u002Fguide\u002Fessentials\u002Fsyntax",{"title":825,"url":826},"Nuxt i18n: Getting started","https:\u002F\u002Fi18n.nuxtjs.org\u002Fdocs\u002Fgetting-started",{"title":828,"url":829},"Unicode CLDR: Plural rules","https:\u002F\u002Fcldr.unicode.org\u002Findex\u002Fcldr-spec\u002Fplural-rules",{"title":831,"url":832},"OpenAI: Structured outputs","https:\u002F\u002Fplatform.openai.com\u002Fdocs\u002Fguides\u002Fstructured-outputs",{"title":834,"url":835},"DeepL API: Glossaries","https:\u002F\u002Fdevelopers.deepl.com\u002Fdocs\u002Fapi-reference\u002Fglossaries",{"title":837,"url":838},"W3C: Localization vs. internationalization","https:\u002F\u002Fwww.w3.org\u002FInternational\u002Fquestions\u002Fqa-i18n",{"title":840,"url":841},"GNU gettext manual","https:\u002F\u002Fwww.gnu.org\u002Fsoftware\u002Fgettext\u002Fmanual\u002Fgettext.html",{"title":843,"url":844},"RFC 5646: Tags for Identifying Languages","https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc5646",{"title":846,"url":847},"Rat für deutsche Rechtschreibung","https:\u002F\u002Fwww.rechtschreibrat.com\u002F",{"title":849,"url":850},"Microsoft Writing Style Guide","https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fstyle-guide\u002Fwelcome\u002F","\u002Fimages\u002Fblog\u002Fllm-translation-pipeline-i18n\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fllm-translation-pipeline-i18n\u002Fog.jpg",[76,77,78],"LLM-fordítási pipeline i18n-hez: glosszárium, helyőrzők és review","Termék- és weboldalszövegek fordítása LLM-mel úgy, hogy a helyőrzők, a többes szám és a hangnem épen maradjon: glosszárium, ICU üzenetek, QA-ellenőrzések.","Három forráskártya, egy lefordított kártya glosszárium-szalaggal, majd ellenőrzött tábla.",1792337025738]