{"id":368,"date":"2026-05-13T13:18:59","date_gmt":"2026-05-13T13:18:59","guid":{"rendered":"https:\/\/selma.se\/?p=368"},"modified":"2026-06-05T20:45:44","modified_gmt":"2026-06-05T20:45:44","slug":"wcag","status":"publish","type":"post","link":"https:\/\/selma.se\/en\/artiklar\/wcag\/","title":{"rendered":"WCAG: vad det \u00e4r, vilka niv\u00e5er som finns och hur du jobbar praktiskt med webbtillg\u00e4nglighet"},"content":{"rendered":"<h2 class=\"wp-block-heading\">WCAG: vad det \u00e4r, vilka niv\u00e5er som finns och hur du jobbar praktiskt<\/h2>\n\n\n\n<p>WCAG (Web Content Accessibility Guidelines) \u00e4r den internationella standarden f\u00f6r att g\u00f6ra webbinneh\u00e5ll mer tillg\u00e4ngligt f\u00f6r personer med funktionsneds\u00e4ttningar. Den tas fram av W3C:s Web Accessibility Initiative (WAI) och finns i versionerna WCAG 2.0, 2.1 och 2.2<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WCAG 2.0, 2.1 och 2.2 \u2013 vad \u00e4r skillnaden?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WCAG 2.1<\/strong>&nbsp;\u00e4r en W3C-rekommendation sedan 5 juni 2018 och bygger vidare p\u00e5 2.0, med extra st\u00f6d f\u00f6r bland annat mobil, low vision och kognitiva behov.<\/li>\n\n\n\n<li><strong>WCAG 2.2<\/strong>&nbsp;blev W3C-rekommendation 5 oktober 2023 och l\u00e4gger till&nbsp;<strong>9 nya<\/strong>&nbsp;framg\u00e5ngskriterier j\u00e4mf\u00f6rt med WCAG 2.1.<\/li>\n<\/ul>\n\n\n\n<p>Exempel p\u00e5 nyheter i WCAG 2.2 (urval):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Focus Not Obscured (Minimum)<\/strong>&nbsp;(AA)<\/li>\n\n\n\n<li><strong>Dragging Movements<\/strong>&nbsp;(AA)<\/li>\n\n\n\n<li><strong>Target Size (Minimum)<\/strong>&nbsp;(AA)<\/li>\n\n\n\n<li><strong>Accessible Authentication (Minimum)<\/strong>&nbsp;(AA)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">WCAG bygger p\u00e5 fyra principer (POUR)<\/h3>\n\n\n\n<p>WCAG \u00e4r uppbyggt kring fyra grundprinciper som beskriver hur en webbplats ska fungera f\u00f6r att vara tillg\u00e4nglig:&nbsp;<strong>Perceivable, Operable, Understandable, Robust<\/strong>&nbsp;(ofta f\u00f6rkortat POUR).<\/p>\n\n\n\n<p>I praktiken betyder det att inneh\u00e5ll ska:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>g\u00e5 att&nbsp;<strong>uppfatta<\/strong>&nbsp;(t.ex. kontrast, textalternativ)<\/li>\n\n\n\n<li>g\u00e5 att&nbsp;<strong>hantera<\/strong>&nbsp;(t.ex. tangentbord, fokus)<\/li>\n\n\n\n<li>vara&nbsp;<strong>begripligt<\/strong>&nbsp;(t.ex. tydliga texter, f\u00f6ruts\u00e4gbara fl\u00f6den)<\/li>\n\n\n\n<li>vara&nbsp;<strong>robust<\/strong>&nbsp;(t.ex. semantisk HTML s\u00e5 hj\u00e4lpmedel kan tolka)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Niv\u00e5er: A, AA och AAA<\/h3>\n\n\n\n<p>WCAG har tre niv\u00e5er av \u00f6verensst\u00e4mmelse:&nbsp;<strong>A<\/strong>,&nbsp;<strong>AA<\/strong>&nbsp;och&nbsp;<strong>AAA<\/strong>. De flesta organisationer siktar p\u00e5&nbsp;<strong>AA<\/strong>, eftersom den niv\u00e5n ger ett bra skydd mot vanliga hinder utan att bli orimligt omfattande i praktiken. (Niv\u00e5erna beskrivs i WCAG-materialet och sammanfattas i m\u00e5nga tekniska genomg\u00e5ngar.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WCAG och europeiska krav: EN 301 549<\/h3>\n\n\n\n<p>I EU-sammanhang dyker ocks\u00e5 standarden&nbsp;<strong>EN 301 549<\/strong>&nbsp;upp. Den \u00e4r en europeisk standard f\u00f6r tillg\u00e4nglighet i IKT-produkter och tj\u00e4nster och kan anv\u00e4ndas f\u00f6r att visa efterlevnad i vissa regelverk.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">S\u00e5 jobbar du med WCAG i praktiken (enkelt uppl\u00e4gg)<\/h3>\n\n\n\n<p>Ett h\u00e5llbart WCAG-arbete brukar best\u00e5 av fem steg:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1) Kartl\u00e4gg nul\u00e4get<\/h4>\n\n\n\n<p>Inventera viktigaste sidtyperna och fl\u00f6dena (t.ex. startsida, kontaktformul\u00e4r, s\u00f6k, k\u00f6pfl\u00f6de) och g\u00f6r en f\u00f6rsta granskning.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2) Kombinera automatiska och manuella tester<\/h4>\n\n\n\n<p>Automatiska tester hittar mycket snabbt, men manuella kontroller beh\u00f6vs f\u00f6r s\u00e5dant som begriplighet, logik i fl\u00f6den, korrekt l\u00e4sordning och sk\u00e4rml\u00e4sarupplevelse.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3) Prioritera det som blockerar<\/h4>\n\n\n\n<p>B\u00f6rja med s\u00e5dant som stoppar anv\u00e4ndaren helt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>tangentbordsnavigering och fokus<\/li>\n\n\n\n<li>formul\u00e4r (labels, felmeddelanden)<\/li>\n\n\n\n<li>kontrast och l\u00e4sbarhet<\/li>\n\n\n\n<li>rubrikstruktur och semantik<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">4) \u00c5tg\u00e4rda i komponenter (inte sida f\u00f6r sida)<\/h4>\n\n\n\n<p>Fixa i mallar\/komponenter f\u00f6rst s\u00e5 att problemet f\u00f6rsvinner \u00f6verallt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5) F\u00f6lj upp efter releaser<\/h4>\n\n\n\n<p>Tillg\u00e4nglighet \u00e4r en f\u00e4rskvara. L\u00e4gg in enkla kontroller i er releaseprocess s\u00e5 att brister inte kommer tillbaka.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Varf\u00f6r WCAG \u00e4r v\u00e4rt tiden<\/h3>\n\n\n\n<p>WCAG handlar om att fler ska kunna anv\u00e4nda tj\u00e4nsten \u2013 men det ger ofta ocks\u00e5 b\u00e4ttre struktur, tydligare fl\u00f6den och f\u00e4rre \u201cfriktionspunkter\u201d f\u00f6r alla anv\u00e4ndare.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/blog\/2018\/wcag21-rec\/\" target=\"_blank\" rel=\"noopener\">K\u00e4lla: W3C<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>WCAG: vad det \u00e4r, vilka niv\u00e5er som finns och hur du jobbar praktiskt WCAG (Web Content Accessibility Guidelines) \u00e4r den internationella standarden f\u00f6r att g\u00f6ra webbinneh\u00e5ll mer tillg\u00e4ngligt f\u00f6r personer med funktionsneds\u00e4ttningar. Den tas fram av W3C:s Web Accessibility Initiative (WAI) och finns i versionerna WCAG 2.0, 2.1 och 2.2 WCAG 2.0, 2.1 och 2.2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-wcag-lagkrav"],"acf":[],"_links":{"self":[{"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":5,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/posts\/368\/revisions\/705"}],"wp:attachment":[{"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/categories?post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selma.se\/en\/wp-json\/wp\/v2\/tags?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}