U101: Lösningen är skapad med tillgängliga tekniker (exempelvis html, css och JavaScript) Godkänd

Förklaring

Teknikerna som används måste kunna hålla tillgänglig information, exempelvis måste bilder kunna beskrivas med text. De ska också kunna tolkas av hjälpmedel.

Det här kravet matchar inte något enskilt krav i WCAG men är en förutsättning för att kunna möta kraven i WCAG.

U102: Koden följer html-standarden korrekt, eller innehåller åtminstone inga avsteg som direkt bryter mot WCAG Underkänd

Förklaring

Koden bör följa standard till hundra procent men det kan ibland vara nödvändigt med avsteg. Dock får inga avsteg som bryter mot WCAG förekomma.

Från WCAG:

Innehåll som implementeras med kodspråk:

• element ska ha kompletta start- och slut-taggar
• element är nästlade i enlighet med standarden
• element innehåller inte dubblerade attribut (ex inte två alt-texter på samma bild)
• alla ID-värden som används ska vara unika

U201: Alla meningsbärande bilder och andra grafiska element har ett textalternativ som ger en likvärdig beskrivning till användare som inte ser bilden Godkänd

Förklaring

Ett meningsbärande grafiskt objekt är exempelvis foton, illustrationer och ikoner som används för att ge information eller visa något på sidorna. För användare som inte ser är det viktigt att få information om vad bilderna visar. Exakt var gränsen för meningsbärande bilder går är subjektivt, men om du använder bilder för att förstärka informationen bör de nästan alltid vara beskrivna.

Det finns undantag till detta, exempelvis om du har en utskriftsikon och texten "Skriv ut" i direkt anslutning till ikonen. Att då beskriva ikonen också skulle innebära dubbel information vilket kan bli tjatigt.

Använd alt-attributet på img-elementet när det är möjligt.

Du kan använda aria-label om det inte är möjligt att använda alt-attributet, om det exempelvis är en bild som lagts in med svg-elementet eller på något annat alternativt sätt.

Det viktiga är att all information som ges i form av bilder också är inlagd som text och nåbar för användare som inte kan se bilderna.

Motivering till bedömning av punkten

Se resultat från den automatsika verktyget. https://traineesundsvallsregionen.se/ - kartan, kan man lägga till mer information om vart kommunerna ligger? - Figurbilden på framsidan har ingen alt,text - Bilden med texten "Är du i början av din karriär" - Är inte ok. Väldigt många av de gamla nyheterna har inte alt.text

U202: Grafiska element som enbart är dekorativa eller där en alternativtext skulle innebära onödig upprepning för användarna, har en tom alt-text. Godkänd

Förklaring

Exempelvis ska länkade bilder som även har en text i länken inte upprepa det som står i länktexten (exempelvis en länkad ikon av en skrivare med texten "Skriv ut" i länken, ska inte ha en alt-text).

Använd i första hand css för att lägga in dekorativa bilder. Om bilden ligger i html-koden ska den ha alt-attributet, men det ska då vara tomt. Du kan också använda aria-hidden eller role="presentation" på bilden.

U204: Podcasts och andra ljudklipp har en likvärdig textbeskrivning inlagd på, eller länkad från, samma sida som ljudklippet ligger på Inte aktuell

Förklaring

En länk på sidan är ok, men den måste vara tydligt utpekad så att användarna förstår att det är en länk till en textversion av ljudklippet.

U205: All förinspelad video är textad Godkänd med undantag

Förklaring

Språket på textningen ska motsvara vad användarna förväntar sig i den givna situationen.

Textningen ska inte enbart innehålla dialogen utan all viktig ljudinformation.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ansokan/tjanster-2019-2020/ - Björn pratar i början av denna video, det är inte textat, resten är det.

U206: Live-sänd video är textad Inte aktuell

Förklaring

Detta är inte ett krav i Europeisk lagstiftning för tillfället.

U207: All förinspelad video finns också i en syntolkad version Underkänd

Förklaring

En syntolkning förklarar vad som händer visuellt i videon. Detta görs ofta som en separat video, men kan också göras som ett extra ljudspår som användaren kan välja att slå på och stänga av.

Om speakerrösten i videon ger all väsentlig information om vad som sker i bild behövs ingen separat syntolkning.

Exempel på syntolkad video https://www.youtube.com/watch?v=O7j4_aP8dWA

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ https://traineesundsvallsregionen.se/2019/12/17/sju-av-sju-far-jobb-efter-traineeperiod-i-kommunen/ https://traineesundsvallsregionen.se/ansokan/tjanster-2019-2020/ https://traineesundsvallsregionen.se/traineegrupper/tidigare-traineer/traineer-20122013/ - Ingen syntolkning

U208: Informationen i placeholder texter återges även på andra sätt Godkänd

Motivering till bedömning av punkten

Please contact Useit

U209: Alla interaktiva objekt är beskrivna i text för användare på ett sätt som gör det enkelt att förstå syftet med objektet Godkänd

Förklaring

Det här gäller formulärsobjekt, länkar, knappar och andra interaktiva objekt. Alla sådana objekt måste vara möjliga att förstå även för användare som inte kan se. Exempelvis ska länkar har tydliga länktexter som förklarar länkens funktion, knappar ska ha tydliga knapptexter, och formulärsobjekt ska beskrivas i ledtexter som kopplas med label-element. Om det inte är möjligt så kan även attributet aria-label användas för att ge en beskrivning.

Kravet innebär också att status ska vara beskrivet om det är relevant, exempelvis om en kryssruta är vald eller inte, om ett expanderbart område är utfällt eller inte.

Den här punkten angränsar till flera andra punkter i checklistan, syftet här är att fånga upp alla fall som inte tydligt hör in under en annan punkt.

Det är viktigt att du testar att alla objekt är beskrivna med en skärmläsare, både på dator och mobil.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ - Kartan på framsidan är inte ok, den berättar inte för skärmläsaren att det är en karta eller vad den visar i kartan. - Rekommenderar att radera kartan.

U210: Alla iframe-element som presenteras för användarna ska ha en kort beskrivning av innehållet i attributet title Underkänd

Förklaring

Iframe används för att visa innehåll från en annan websida i den aktuella webbsidan. Detta görs ofta när man exempelvis vill lägga in en videospelare, ett Twitterflöde eller någon annan form av applikation eller tredjepartslösning.

Gravt synskadade användare kan välja att låta hjälpmedlet tolka innehållet i ramen eller hoppa över den. För att de ska ha en aning om innehållet krävs det då ett title-attribut som förklarar innehållet.

Motivering till bedömning av punkten

Alla youtubelänkar är iframe och kodade som iframe. Iframe på framsidan, googlekartan: https://traineesundsvallsregionen.se/ Reagerar verktyget på. Har inte rätt kodning. Inte heller denna: https://traineesundsvallsregionen.se/2017/02/05/kommunen-som-arbetsgivare/ och de som det automatiska verktyget signalerar om.

U212: Det finns alternativa sätt att ta del av information som ges i serverbaserade bildkartor Godkänd

Förklaring

Serverbaserade bildkartor är gränssnitt där användaren kan flytta runt i en yta, eventuellt zooma in och ut, och där ytan visar nya vyer beroende på användarens interaktioner. Ett vanligt exempel är förstås Google maps, men det behöver egentligen inte handla om traditionella kartor.

Den här typen av lösningar kan vara utmanande för användare med hjälpmedel, främst användare som är gravt synskadade. Det bör därför finnas alternativ till den här typen av tjänst. Om du exempelvis har en karta som visar adressen för ert kontor bör du också ge adressen i form av text i anslutning till kartan. I mer komplexa lösningar kan du kombinera bildkartan med en sökfunktion där användaren kan söka fram information som både visas i kartan och som text.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ - Bör eventuellt lägga till vart kommunerna ligger eller dyligt.

U301: Rubrikstrukturen på alla sidor inleds med en rubrik kodad med elementet h1 Godkänd

U302: Alla texter som visuellt fungerar som rubriker är också kodade som rubriker med lämplig rubriknivå Godkänd

Förklaring

Använd i första hand html-elementen h1 till h6. Om det inte är möjligt går det att istället använda WAI-ARIA.

U303: Rubrikstrukturen hoppar inte över nivåer Godkänd

Förklaring

H1 ska följas av H1 eller H2. En H2 rubrik ska följas av H1, H2 eller H3 och så vidare. Hoppa exempelvis inte direkt från H1 till H4.

Motivering till bedömning av punkten

Resultatet från det automatiska verktyget är åtgärdat. Hittade därefter inget som hoppar i rubrikstrukturer.

U305: Listor skapas med relevanta list-element i html-koden Godkänd

Förklaring

Punktlistor kodas med elementen ul och li.

Numrerade listor kodas med elementen ol och li.

Definitionslistor kodas med elementen dl, dt och dd.

U306: Html-elementet blockquote används för längre citat och q används för kortare Inte aktuell

Förklaring

https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote

https://www.w3.org/TR/WCAG20-TECHS/H49

U308: Rad- och kolumnrubriker i tabeller kodas med elementet th och har ett scope angivet i koden Inte aktuell

Förklaring

<th scope="col">

...eller

<th scope="row">

U309: Uppställningar av information som ser ut som tabeller är också kodade som tabeller med korrekt html-kod Inte aktuell

Förklaring

Använd html-elementen table, thead, tbody, caption, tr, th, td eller om det inte är möjligt, motsvarande WAI-ARIA roller.

U311: Tabellöverskrifter som förklarar tabellens innehåll är inlagda med elementet caption Inte aktuell

Förklaring

Använd <caption> elementet.

U312: Tabeller används till tabelldata och inte för att enbart styra utseendet Godkänd

Förklaring

Använd css för att skapa en layout. Använd enbart tabeller för riktig tabelldata.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/traineegrupper/traineer2018-2019/ Förslag på åtgärd: Ta bort hela sidan, eller ta bort tabellen.

U314: Typ av formulärsobjekt är vald för att underlätta inmatningen av data Inte aktuell

Förklaring

Undvik exempelvis select listor för stora datamängder eller när det är mycket få val.

Använd type="number" när det är tal som ska matas in.

Använd radioknappar när endast ett alternativ ska väljas, och använd kryssrutor när användaren kan komma att välja flera alternativ samtidigt.

Använd lämpliga input types, exempelvis number, password, email, date and time.

U315: Alla fel som uppstår i formulär beskrivs med en text som förklarar vad som gick fel Inte aktuell

Förklaring

Felmeddelandet måste klargöra var felet återfinns.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/ Formuläret blir rött och texten "Ett problem uppstod när ditt fomulär skuller skickas. Fel har markerats nedan. När bara e-posten var fel. Kom en liten ruta fram inget annat. Åtgärd: Utvecklaren måste göra det tydligare vad som blivit fel, liten ruta som syns en stund och sedan försvinner är inte ok.

U316: Felmeddelanden som avser ett specifikt objekt (exempelvis ett inmatningsfält, eller en kryssruta) är associerat med det objektet i koden Godkänd

Förklaring

Detta kan göras genom att lägga felmeddelandet i label-elementet som avser formulärsobjektet, eller med exempelvis aria-describedby.

U317: Grupper med formulärsobjekt (exempelvis grupper med radioknappar eller kryssrutor) är grupperade i koden med elementet fieldset och beskrivs i elementet legend Inte aktuell

Förklaring

Tänk på att elementet legend måste vara det första elementet i det fieldset det avser.

U318: Alla beskrivningar/ledtexter är associerade med det formulärsobjekt de avser i koden Inte aktuell

Förklaring

Detta görs primärt genom att lägga ledtexten i ett label-element och associera det med formulärsobjektet.

Det kan, om nödvändigt, också göras med aria-label om beskrivningen inte ska synas visuellt.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/ Kontakta en trainee formuläret är inte rätt i koden för "namn" fältet. Antingen bör man göra om formuläret så det stämmer, eller ta bort och göra en e-tjänst.

U319: Element i html-koden är placerade i en logisk ordning som matchar den visuella ordningen Godkänd

Förklaring

Detta är viktigt för skärmläsaranvändare eftersom hjälpmedlets läsordning bestäms av ordningen i koden.

En bra utgångspunkt är att innehållet ska vara logiskt och begripligt även när css stängts av i webbläsaren.

U320: Beskrivningen som ges till hjälpmedel, exempelvis skärmläsare, inkluderar även den synliga texten som beskriver det interaktiva objektet Godkänd

Förklaring

Om det finns en synlig text som beskriver ett interaktivt objekt på sidan så ska den texten också inkluderas i den beskrivning som tillgängliggörs för hjälpmedel.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/ - Skärmläsaren läser inte upp hjälptexten "namn" - Men detta är inte ett problem för personen som ska fylla i formuläret, då den får denna information ändå. //Tagit bort fomuläret, därav inget problem längre 11/6 2020 -Erika Olofsson

U321: Knappar och länkar som fäller ut/fäller ihop innehåll på sidan kodas med aria-expanded Godkänd

Förklaring

Aria-expanded="true" anger att ytan är utfälld.

Aria-expanded="false" anger att ytan är ihopfälld.

U323: Statusmeddelanden och annat, automatiskt uppdaterat innehåll beskrivs för skärmläsare Godkänd

Förklaring

Detta måste göras på ett sätt så att det inte blir störande för användarna. Viktiga uppdateringar och meddelanden måste förmedlas så fort som möjligt, medan mindre viktiga uppdateringar kanske inte alls ska förmedlas till användaren.

Attributet aria-live kan användas för en del sådana här situationer.

Du kan också överväga att använda WAI-ARIA rollerna "alert" och "alertdialog" för att markera meddelanden som ska avbryta användaren.

U325: Alla relationer som skapas genom hur innehållet är presenterat finns också angivet i koden Godkänd

Förklaring

Ett exempel kan vara en chat.

Du ser att meddelanden som ligger till vänster i ytan är från den andra parten i chatten. Meddelanden till höger är dina.

Den här informationen måste också finnas i koden så att en användare som inte ser presentationen förstår vilka meddelanden som kommer från vilken part i chatten.

U326: Hjälptexter och instruktioner för specifika formulärsobjekt är associerade med dem i koden Inte aktuell

Förklaring

Detta handlar inte om vanliga ledtexter/etiketter utan om hjälptexter och fördjupade beskrivningar. Om användaren ska mata in sitt personnummer och det under fältet framgår på vilket format det ska göras så är det den typen av information som den här punkten avser.

Du kan använda aria-labelledby eller aria-describedby för att koppla samman en hjälptext med ett formulärsobjekt.

Använd aria-labelledby när beskrivningen ger en fullständig beskrivning av syftet med formulärsobjektet.

Använd aria-describedby när hjälptexten ger en utökad beskrivning, och där det redan finns en korrekt kopplad ledtext.

U402: Instruktioner kräver inte att användaren kan se eller höra Inte aktuell

Förklaring

Undvik instruktioner som "klicka på knappen till höger" och liknande.

Du kan använda riktning i dina instruktioner, men du måste ha något mer, exempelvis "Klicka på knappen 'Ja' till höger".

U403: Färg används inte som det enda sättet att förmedla information eller särskilja objekt Godkänd

U404: Länkar skiljer sig från vanlig text med mer än bara färg Underkänd

Förklaring

Du kan använda understrykning, ikoner, fetad text eller andra metoder som du enbart använder på länkar.

Det räcker inte med understrykning när muspekaren hovrar över länken.

Motivering till bedömning av punkten

Alla länkar skiljer sig nästan enbart bara med färg. Utvecklare måste fixa.

U406: Formulärsobjekt använder autocomplete där det finns definierade värden för autocomplete Inte aktuell

Förklaring

Autocomplete används för att underlätta för hjälpmedel och webbläsare att hjälpa användaren att fylla i information. De vanligaste uppgifterna som användare burkar fylla i har fördefinierade autocompletevärden. Genom att använda dem gör man det tydligt för webbläsare och hjälpmedel att det är just den informationen som ska matas in. Information om attributet och möjliga värden finns här: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/- Namn i formuläret har Type=text.

U408: Grafik som används för att visa interaktiva objekt, visa status, eller för att förmedla information (exempelvis diagram) har tillräckliga kontraster mot bakgrunden Underkänd

Förklaring

Kontrasten ska vara minst 3.0:1

https://developer.paciellogroup.com/resources/contrastanalyser/

Motivering till bedömning av punkten

Ramen som markerar vart tabbtangenten är, är delvis ok i Chrome. Den är svart och tjockare på vissa ställen men ändrar färg i vissa vyer tex på kartan. Den är dock inte ok i Firefox eller Edge.

U409: All text har tillräckliga kontraster mot bakgrunden Underkänd

Förklaring

Vanlig text: > 4.5:1

Stor, fet text större än 18.67px: > 3.0:1

Stor text större än 24px: > 3.0:1

Mät kontrasterna på den punkt som har sämst kontrast.

https://developer.paciellogroup.com/resources/contrastanalyser/

Motivering till bedömning av punkten

Texten i sidfoten är underkänd. - 2,5:1 Även den lilla texten på varje sida som det står "Senast ändrad" - är underkänd. 3,2:1 Den lilla texten till höger "Skriv ut", "Dela på Facebook" "Dela på LinkedIn" - Är underkänd 3,5:1. Startsidan, kartan, den lilla texten "Läs om hur du skapar en.." - Underkänd 3,3:1

U410: Undvik att lägga text mot en bakgrund som skiftar mycket i färg och nyans Godkänd

Förklaring

Det gör texterna svåra att läsa även om kontrasterna i sig är bra nog.

U411: Använd riktig text, inte bilder som föreställer text Godkänd

Förklaring

I komplex grafik, exempelvis diagram, kan viss text vara en del av bilden. Det är även godkänt med exempelvis logotyper.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ - Bilden på första sidan "Är du i början på din karriär.." är underkänd. Sveriges viktigaste jobb: https://traineesundsvallsregionen.se/om-programmet/ - Underkänd. //Tagit bort båda bilderna 6/11 - Erika Olofsson

Individuella problem rapporterade på den här punkten

U412: Undvik innehåll som rör sig, blinkar och skrollar automatiskt som exempelvis karuseller och animationer, om det finns sådana element måste de gå att pausa Inte aktuell

Förklaring

Allt innehåll som rör sig, blinkar eller skrollar och som startar automatiskt, varar mer än fem sekunder och presenteras i närheten av annat innehåll, går att pausa, stoppa eller dölja för alla användare.

U413: Innehåll på sidan och i videor blinkar aldrig mer än 3 gånger per sekund Inte aktuell

U414: Det finns mer än ett sätt att hitta information i gränssnittet Godkänd

Förklaring

Tillhandahåll exempelvis en meny och en sökfunktion.

U415: Rubriker, ledtexter och knappar ger tydlig information om syftet och innehållet Godkänd

U416: Huvudsakligt språk är angivet i koden på alla sidor Godkänd

Förklaring

Använd lang-attributet på html-elementet.

U417: Innehåll på andra språk än sidans huvudsakliga språk markeras i koden Inte aktuell

Förklaring

Använd lang-attributet.

Det kan användas på exempelvis div, span och p-element.

U418: Alla sidor har en beskrivande titel Godkänd

Förklaring

Detta gäller också på "single page applications". Sidans titel måste då dynamiskt uppdateras för att återspegla informationen/vyn på sidan.

U419: Listor med länkar eller funktioner som upprepas på flera sidor presenteras i samma relativa ordning Godkänd

Förklaring

Det kan finnas situationer där det blir förvirrande för användaren och då ska det här kravet ignoreras.

U420: Samma funktionalitet beskrivs konsekvent i gränssnittet Godkänd

Förklaring

Exempelvis ska du använda samma terminologi genom hela gränssnittet. Om ni exempelvis kallar det självservice, byt inte till e-tjänst på andra ställen.

U421: Felmeddelanden är designade så att de är enkla att se och särskilja från annan information Inte aktuell

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/ Formuläret blir rött och texten "Ett problem uppstod när ditt fomulär skuller skickas. Fel har markerats nedan. När bara e-posten var fel. Kom en liten ruta fram inget annat. Åtgärd: Utvecklaren måste göra det tydligare vad som blivit fel, liten ruta som syns en stund och sedan försvinner är inte ok.

U422: Alla objekt som kräver att användaren väljer eller matar in information har en synlig beskrivning Godkänd

U423: Beskrivningar av objekt som kräver att användaren väljer eller matar in information innehåller information om vad som ska göras och vilka format som ska användas Godkänd

Förklaring

Detta inkluderar information om ett fält är obligatoriskt eller inte.

U424: Fel beskrivs med en text som även informerar om hur felet kan korrigeras om det är möjligt Inte aktuell

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/kontakt/tidigare-traineer/ Formuläret blir rött och texten "Ett problem uppstod när ditt fomulär skuller skickas. Fel har markerats nedan. När bara e-posten var fel. Kom en liten ruta fram inget annat. Åtgärd: Utvecklaren måste göra det tydligare vad som blivit fel, liten ruta som syns en stund och sedan försvinner är inte ok.

U425: Viktiga formulär låter användaren se en översikt och ger denne möjlighet att ändra sig innan formuläret skickas Inte aktuell

Förklaring

Detta gäller alla formulär som innebär ett juridiskt kontrakt eller finansiella transaktioner.

U426: Undvik att använda ikoner utan tillhörande, synlig text Godkänd

Förklaring

Även relativt välkända ikoner är svåra att tolka för en del användare.

U427: Använd inte förkortningar om det inte är nödvändigt och skriv ut förkortningar första gången de används på en sida Godkänd

Förklaring

Även välkända förkortningar kan vara besvärliga för en del användare. Dessutom skapar oftast förkortningar en mickro paus när användaren läser. Det finns också risk för att hjälpmedlen läser upp dem på ett felaktigt sätt. Därför bör du bara använda förkortningar när det är nödvändigt, och alltid undvika förkortningar av vanliga ord, så som ex., o.s.v., fr. och m.m..

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/faq/ Rekommenderad åtgärd: Byt namn på menyfliken och ändra alla länkar som bär till den sidan.

U428: Användaren får relevant återkoppling när denne utför något i gränssnittet Godkänd

Förklaring

Exempelvis ett meddelande som anger att informationen sparats när användaren klickat på en spara-knapp.

U429: Ljud som startar automatiskt kan stoppas Inte aktuell

U431: Innehåll som uppdateras automatiskt kan pausas Inte aktuell

U432: Länktexter är beskrivande och begripliga i den kontext där de ligger Godkänd

Förklaring

Länktexter bör vara så beskrivande som möjligt och ge all väsentlig information användaren behöver för att förstå vad som kommer att hända om denne klickar på länken. Det kan vara tillräckligt att länken tillsammans med närmast föregående rubrik är begriplig, men sträva alltid efter så beskrivande länktexter som möjligt.

Motivering till bedömning av punkten

https://traineesundsvallsregionen.se/ansokan/tjanster-2019-2020/- Här skulle vi ha lagt till vilken sida man kommer till. https://traineesundsvallsregionen.se/kontakt/behandling-av-personuppgifter/ - Lägg till vilken sida man kommmer till, på alla länkar.

U501: Layouten anpassar sig efter skärmstorleken Godkänd

Förklaring

Tabeller utgör ett acceptabelt undantag, men bör även de vara responsiva om möjligt.

U502: Gränssnittet fungerar även när användaren ändrar inställningar för avstånd i texter Godkänd

Förklaring

Om användaren ändrar inställningar för avstånd mellan tecken, ord, rader och stycken så ska det inte leda till att text blir oläslig.

Du kan verifiera detta med:

https://codepen.io/stevef/pen/YLMqbo/

U503: Användaren tillåts att zooma minst 200 procent Godkänd

Förklaring

Blockera inte zoom I gränssnittet. Låt användaren zooma minst 200 procent, även i mobilgränssnitt.

U504: Formulär är designade med en vertikal layout som inte tvingar användaren att flytta fokus sidledes mer än nödvändigt Inte aktuell

U505: Tabeller är designade så att de underlättar läsningen Inte aktuell

Förklaring

Använd olika bakgrundsfärg eller linjer för att hjälpa användarna att följa raderna och/eller kolumnerna.

U506: Gränssnittet kan användas oberoende av skärmens orientering (liggande/stående) Godkänd

U601: All interaktion som användaren kan göra med mus eller pekskärm ska också gå att göra med tangentbordet Godkänd

U602: Innehåll som visas vid mouse over kan också visas enkelt för användare som navigerar med pekskärm eller tangentbord Godkänd

Förklaring

Det ska också vara möjligt att dölja innehållet igen, utan att fokus flyttas från det objekt som triggade att innehållet visades.

U603: Modala fönster kan stängas med tangentbordet Inte aktuell

Förklaring

Vi rekommenderar att det modala fönstret förses med en "Stäng"-knapp och att Esc tangenten också kan användas för att stänga fönstret.

U604: Användarna kan tabba genom hela gränssnittet utan att fastna i en specifik yta, exempelvis en videospelare Godkänd

U605: Allt innehåll på sidan bör ligga i något landmärke Inte aktuell

Förklaring

Det blir enklare för användare som inte kan se att uppfatta sidans struktur och hitta allt innehåll om det ligger i landmärken som nav, header, main och footer.

Motivering till bedömning av punkten

I sidfoten är "Facebook" och "Instagram" lagt i en navigation. - Ta bort. Ingen koppling till standarder, åtgärdas inte. 28/12 2020 /Erika Olofsson

U606: Menyn är placerad i ett nav-element Godkänd

Förklaring

Nav-elementet används för att tala om för gravt synskadade användare att de här länkarna är en del av webbplatsens navigation/meny.

U607: Sidans centrala innehåll är placerat i ett main-element Godkänd

Förklaring

<main>-elementet används för att markera det centrala innehållet på sidan. Det gör det enkelt för gravt synskadade användare att snabbt hitta det viktiga på sidan.

U608: Det finns en länk för att hoppa över navigationen för användare som navigerar med tangentbordet Godkänd

Förklaring

Länken bör hållas dold tills att den får fokus och då visas visuellt.

U609: Tabbordningen är logisk Godkänd

Förklaring

Normalt sett innebär det att tabbordningen går radvis från det övre vänstra hörnet ner till det nedre högra hörnet, men i specifika situationer kan undantag vara mer logiska för användarna.

U610: Interaktiva objekt markeras tydligt visuellt när de får fokus vid tangentbordsnavigation Underkänd

Förklaring

Om färg eller ramar används för att visa vilket objekt som har fokus måste deras kontrast mot omgivningen, och skillnaden i kontrast mellan fokus och inte fokus, vara minst 3.0:1.

Motivering till bedömning av punkten

Ramen som markerar vart tabbtangenten är, är delvis ok i Chrome. Den är svart och tjockare på vissa ställen men ändrar färg i vissa vyer tex på kartan. Den är dock inte ok i Firefox eller Edge.

U611: Det finns alternativ till gester som kräver att mer än ett finger rör skärmen samtidigt och för gester som innebär att användaren måste följa ett specifik mönster Godkänd

U612: Händelser aktiveras inte när användaren klickar ner utan när användaren släpper mustangenten igen Godkänd

U613: Om gränssnittet kan påverkas genom rörelsesensorer så finns det även alternativa sätt att uppnå samma effekt i gränssnittet Inte aktuell

Förklaring

Om det exempelvis visas specifik information på en mobil när du skakar den ska den informationen även gå att få fram utan att flytta mobilen, om möjligt.

U614: Undvik om möjligt tidsgränser, om de används måste användaren om möjligt kunna styra tidsgränsen Inte aktuell

Förklaring

Om tidsgränser används ska användarna om möjligt kunna stoppa dem, förlänga tiden eller justera tidsgränserna.

U615: Användare som navigerar med tangentbordet kan navigera genom gränssnittet utan att oväntade förändringar eller avbrott uppstår och utan att fokus flyttas oväntat Godkänd

U616: Ändringar i formulärsobjekt och andra inställningar flyttar inte fokus på ett oväntat sätt Inte aktuell

Förklaring

Exempelvis ska inte ett formulär postas automatiskt bara för att användaren matat in data.

U617: När ett modalt fönster visas hindras användaren från att komma åt innehåll i bakgrunden Inte aktuell

Förklaring

Bakgrunden ska döljas för alla användare, även användare med skärmläsare. Det kan exempelvis göras med aria-hidden, och genom att loopa tabbordningen i det modala fönstret.

U618: Snabbkommandon för tangentbordsanvändare baserar sig inte på att användaren trycker ner en enskild alfanumerisk- eller symbol-tangent Godkänd

Förklaring

Alla snabbkommandon ska kräva någon annan typ av tangent, exempelvis Alt, Shift eller Ctrl.

U619: Objekt som kan aktiveras med mus eller pekskärm är stora nog för att det ska vara rimligt enkelt att komma åt dem Godkänd

Förklaring

Exempelvis gäller detta länkar, knappar och andra formulärsobjekt. Ett bra riktmärke är 48px * 48px, inklusive padding.

Det gäller både objekt som användaren ska klicka på och objekt som visar information när muspekaren hovrar över dem.

U701: Gränssnittet är testat med skärmläsare, både på desktop och mobil för att verifiera att allt innehåll är nåbart och fungerar korrekt Godkänd

Förklaring

Använd åtminstone VoiceOver på iOS och NVDA med Firefox och Chrome i Windows.

Motivering till bedömning av punkten

Gränssnittet är testat med skärmläsare i Firefox. Man skulle kunna utveckla analysen genom att testa i mobilen också.

U702: Gränssnittet är testat med användare, inklusive användare med funktionsnedsättningar Inte aktuell

Motivering till bedömning av punkten

Rekommenderas att göra i framtiden. - Ingen koppling till standarder, lägger därför över denna till Inte aktuell för tillfället. 28/12 2020 /Erika Olofsson