Rapport över tillgänglighetsproblem SEF - Öppna data för Malmö 2026-02-02
Om denna rapport
Tjänstens namn
SEF - Öppna data för Malmö
Analysens omfattning och avgränsningar
Granskningen är genomförd på sex olika sidor på webbplatsen och omfattar lagkrav enligt EN 301 549 och WCAG 2.2.
Protokollet upprättat av
Sandra Eriksson, Useit
Sammanfatta resultatet
Useit har genomfört en tillgänglighetsgranskning av gränssnittet för öppna data för Malmö. Vi har inte sett några kritiska tillgänglighetsbrister i gränssntitet och mycket på webbplatsen fungerar bra.
De allvarligaste bristerna rör bristande semantisk uppmärkning och språkhantering i koden, vilket påverkar användares möjlighet att förstå, orientera sig och navigera effektivt i tjänsten. Det påverkar särskilt användare att uppläsande hjälpmedel som användare med gravt nedsatt syn eller med dyslexi.
En annan brist är att visuellt utformade rubriker inte kodas som rubrikelement och att rubrikstrukturen ibland saknar rubriknivåer eller hoppar i rubrikhierarkin. Framför allt påverkas skärmläsaranvändare, som ofta använder rubriker för att få en snabb överblick och hoppa mellan avsnitt, men även användare med kognitiva svårigheter som behöver en tydlig och konsekvent struktur för att förstå innehållets sammanhang.
Granskningen visar också att visuella listor inte alltid kodas som listor, att det ibland saknas korrekt uppmärkning för statusmeddelanden samt att bilder på kartor inte beskrivs med text,
Om de brister som beskrivs i denna granskning åtgärdas skyndsamt, bedömer vi att webbplatsen inom en snar framtid kan efterleva lagkraven på digital tillgänglighet.
Sortering
Innehåll
Prioritet: Hög
Detta är problem som har en stor påverkan på användarnas förmåga att använda och förstå gränssnittet.
Visuellt utformade rubriker kodas inte med rubrikelement
ID:
Ally-14619
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
På vissa sidor på webbplatsen finns flera texter som visuellt fungerar som rubriker men som inte är kodade med rubrikelement. När visuella rubriker saknar korrekt rubrikkodning bryts sidans informationsstruktur för hjälpmedelsanvändare. Det blir svårt för användare att snabbt få en överblick över innehållet, snabbt navigera mellan avsnitt och att förstå hur informationen hänger ihop.
I bilden nedan från sidan "Vägmarkeringar" pekar röda pilar på visuellt utformade avsnittsrubriker som ”Ladda ner vägmarkeringar i DWG format” och ”Attribut i GeoJSON-filen”.
Vi ser samma problem på sidan "Kollektivtrafik i Malmö stad" från vilken bilden nedan är från.
Lösningsförslag
-
Koda alla visuella rubriker som semantiska rubrikelement med korrekt rubriknivå, så att rubrikstrukturen speglar sidans visuella och logiska innehållsstruktur. Se exempel nedan.
<h1>Vägmarkeringar</h1> <h2>Ladda ner vägmarkeringar i DWG format</h2> <h2>Attribut i GeoJSON-filen</h2>
Aceit:
U302
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.3.1 Information och relationer,
10.1.3.1 Information och relationer,
11.1.3.1.1 Information och relationer (öppen funktionalitet),
11.1.3.1.2 Information och relationer (stängd funktionalitet) - WCAG 2.1
- 1.3.1 Information och relationer (A)
- WCAG 2.2
- 1.3.1 Information och relationer (A)
Innehåll på engelska är inte uppmärkt på ett korrekt sätt i koden
ID:
Ally-14620
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
Texter på webbplatsen förekommer på svenska och engelska, men språkkoder och översättningar hanteras inte konsekvent.
I vissa delar av innehållet, som begrepp i datamängder, används engelska ord i annars svenskspråkiga texter utan att dessa är markerade med korrekt språkkod. Det gör att uppläsande hjälpmedel försöker läsa engelska ord med svenskt uttal, vilket leder till otydlig uppläsning och blir svårt för användare att begripa.
När webbplatsen visas på smal skärm används en menyknapp utan en synlig etikett. Attributet aria-label används för att beskriva knappen men värdet "Toggle navigation menu". Eftersom etiketten läses upp på engelska även i den svenska versionen av webbplatsen blir uppläsningen felaktig.
I bilden nedan pekar en röd pil på menyknappen och koden visas i utvecklingsverktyget.
I den engelska versionen av webbplatsen finns dessutom flera texter på svenska, exempelvis rubriken “Vägmarkeringar” och hela den inledande texten på sidan. Det gör att språkinställningen på sidan inte överensstämmer med innehållet, vilket påverkar både förståelse och tillgänglighet för hjälpmedelsanvändare.
I bilden nedan visas gränssnittet på engelska men flera texter är inte översatta från svenska.
Lösningsförslag
- Säkerställ hanteringen av språk i både innehåll och kod:
- Ange korrekta språkkoder med attributet
langpå alla element eller textstycken där språket skiljer sig från sidans huvudspråk, - Säkerställ att
aria-label-attribut och andra osynliga etiketter översätts till rätt språk för respektive version.
- Ange korrekta språkkoder med attributet
Aceit:
U417
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.3.1.2 Språk för del av sida,
10.3.1.2 Språk för del av sida - WCAG 2.1
- 3.1.2 Språk för del av sida (AA)
- WCAG 2.2
- 3.1.2 Språk för del av sida (AA)
Rubrikstrukturer saknar rubriknivåer
ID:
Ally-14718
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
Rubrikstrukturen på webbplatsen är ibland ofullständig och följer inte en logisk hierarki. På flera sidor används flera rubriker på rubriknivå 1 utan att underordnade nivåer finns representerade. Det saknas ibland rubriker helt mellan nivåerna, vilket leder till hopp i strukturen och bruten semantisk ordning.
För användare som navigerar med hjälpmedel som skärmläsare blir det svårt att förstå hur innehållet är organiserat. Rubriker är viktiga orienteringspunkter som används för att snabbt skapa en mental bild av sidans struktur och för att hoppa mellan olika avsnitt. När rubriknivåerna saknas eller används inkonsekvent försämras den möjligheten. Även personer med kognitiva svårigheter påverkas negativt eftersom sidans logiska uppdelning blir otydlig och svårare att läsa med uppläsande hjälpmedel.
I den första bilden nedan visas en kategorisida där rubriker framhävs visuellt med verktyget Accessibility Insights. Här saknas h2-rubriker helt på sidan. Sidans h2-rubrik kan göras om till en h2-rubrik för att lösa problem till viss del eftersom rubriken inte behöver vara på h1-nivå och sidan redan inleds med en h1-rubrik.
I nästa bild från en innehållssida saknas också h2-rubriker i rubrikstrukturen, då verktyget Accessibility Insights inte hittar några rubriker på h2-nivå.
I den tredje bilden visas hierarkin för kategorisidan med verktyget Web Developer. Även detta verktyg visar tydligt att rubriker på h2-nivå saknas helt på sidan.
Lösningsförslag
- Se över hela rubrikstrukturen och säkerställ att den följer en logisk och konsekvent hierarki.
- Underordna sektioner under
<h2>,<h3>, och så vidare i en korrekt hierarkisk ordning. - Undvik att hoppa över rubriknivåer, exempelvis från
<h1>direkt till<h3>.
- Underordna sektioner under
Aceit:
U303
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.3.1 Information och relationer,
10.1.3.1 Information och relationer,
11.1.3.1.1 Information och relationer (öppen funktionalitet),
11.1.3.1.2 Information och relationer (stängd funktionalitet) - WCAG 2.1
- 1.3.1 Information och relationer (A)
- WCAG 2.2
- 1.3.1 Information och relationer (A)
Visuella listor saknar korrekt semantisk kodning
ID:
Ally-14719
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
Innehåll som presenteras visuellt som listor är inte alltid kodat med korrekt liststruktur. För skärmläsaranvändare eller användare av andra typer av hjälpmedel framstår dessa objekt inte som listor, utan som osammanhängande textblock. Det gör det svårare att förstå hur många objekt som finns, var en lista börjar och slutar, och hur objekten relaterar till varandra. Skärmläsare kan annonsera exempelvis “Lista med 5 objekt” och låta användaren navigera effektivt mellan objekten, men den möjligheten försvinner när semantiken saknas.
I den första bilden nedan är två sektioner, dels listan över filer och datamängder och dels listan över metadata, uppbyggda med vanliga <div>-element istället för HTML-element som <ul>, <ol> eller <dl>. Metadata innehåller dessutom termer och värden som behöver en semantisk struktur för att uppfattas korrekt.
Även på kategorisidor ser vi samma avsteg där flertalet objekt radas upp men inte struktureras på ett korrekt sätt som en onumrerad lista. På bilden nedan är den inramad med en röd ram.
Lösningsförslag
- Använd semantiska HTML-element som representerar den visuella strukturen med elementet
<ul>för onumrerade listor och<ol>för numrerade listor. - Använd elementet
<dl>för listor av termer eller begrepp med tillhörande värden eller beskrivningar.
Aceit:
U305
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.3.1 Information och relationer,
10.1.3.1 Information och relationer,
11.1.3.1.1 Information och relationer (öppen funktionalitet),
11.1.3.1.2 Information och relationer (stängd funktionalitet) - WCAG 2.1
- 1.3.1 Information och relationer (A)
- WCAG 2.2
- 1.3.1 Information och relationer (A)
Information om sökresultat är inte uppmärkt som ett statusmeddelande
ID:
Ally-14720
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
När användaren gör en sökning visas information om resultatet, exempelvis med antalet datamängder eller att inga datamängder hittades. Ett problem med dessa meddelanden är att de inte är uppmärkta som statusmeddelanden i koden. De saknar attribut som gör att hjälpmedel, till exempel skärmläsare, automatiskt meddelar användaren när nytt innehåll har laddats eller när sökresultatet förändras.
För användare med skärmläsare och gravt nedsatt syn innebär det att förändringen i innehållet inte uppmärksammas. De får ingen indikation på att sökningen är klar eller när inga resultat hittades. Användaren måste manuellt leta efter informationen, vilket kan vara något tidsödande och försvårar interaktionen.
I den första bilden nedan pekar en röd pil på en rubrik som återger texten "5 datamängder hittades". Rubriken är inte uppmärkt som ett dynamiskt statusmeddelande och återger inte resultatet till användaren direkt.
I nästa bild nedan pekar en röd pil på ett negativt sökresultat vid en sökning på ordet "test" då sökningen inte har gett något resultat. Inte heller denna information är uppmärkt som ett statusmeddelande.
Lösningsförslag
- Märk upp sökinformationen som en "live region" genom att använda attributet
role="status"för meddelanden som inte kräver omedelbar återkoppling. Det innebär att skärmläsaren inte avbryter den uppläsning som den för närvarande utför utan läser upp informationen när den får möjlighet.
Aceit:
U323
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.4.1.3 Statusmeddelanden,
10.4.1.3 Statusmeddelanden,
11.4.1.3.1 Statusmeddelanden (öppen funktionalitet) - WCAG 2.1
- 4.1.3 Statusmeddelanden (AA)
- WCAG 2.2
- 4.1.3 Statusmeddelanden (AA)
Bilder av kartor beskrivs inte med alt-texter
ID:
Ally-14575
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
På en sida med information om diken finns en karta som en bildbaserad förhandsvisning av en datafil. Kartbilden saknar ett textalternativ som beskriver vad kartan visar.
För användare som inte kan se bilden, exempelvis användare med gravt nedsatt syn som använder skärmläsare, blir kartinnehållet otillgängligt. Hela kartbilden består av flera delar där varje del utgörs av en bild. Samtliga bilder är uppmärkta som dekorativa. Hjälpmedel ignorerar dem och kan därför inte återge vilken information som varje delbild innehåller eller vilket syfte den har i sammanhanget. Detta innebär i praktiken att en del av informationen på sidan endast är tillgänglig visuellt, vilket skapar ett informationsbortfall för vissa användare.
I bilden nedan pekar en röd pil på kartan på den aktuella sidan.
Nedan visar vi hur kartbilderna ser ut i koden och att samtliga bilder är uppmärkta som dekorativa med tomma alt-attribut.
<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);">
<img alt="" src="https://c.tile.openstreetmap.org/12/2196/1283.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(509px, 112px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2196/1284.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(509px, 368px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2195/1283.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(253px, 112px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2197/1283.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(765px, 112px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2195/1284.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(253px, 368px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2197/1284.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(765px, 368px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2196/1282.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(509px, -144px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2196/1285.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(509px, 624px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2195/1282.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(253px, -144px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2197/1282.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(765px, -144px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2195/1285.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(253px, 624px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2197/1285.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(765px, 624px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2194/1283.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(-3px, 112px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2198/1283.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(1021px, 112px, 0px); opacity: 1;">
<img alt="" src="https://b.tile.openstreetmap.org/12/2194/1284.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(-3px, 368px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2198/1284.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(1021px, 368px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2194/1282.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(-3px, -144px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2198/1282.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(1021px, -144px, 0px); opacity: 1;">
<img alt="" src="https://c.tile.openstreetmap.org/12/2194/1285.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(-3px, 624px, 0px); opacity: 1;">
<img alt="" src="https://a.tile.openstreetmap.org/12/2198/1285.png" class="leaflet-tile leaflet-tile-loaded"
style="width: 256px; height: 256px; transform: translate3d(1021px, 624px, 0px); opacity: 1;">
</div>Lösningsförslag
-
Säkerställ att kartbilden alltid har ett textalternativ som beskriver dess syfte och innehåll. Texten ska ge en övergripande förståelse av vad kartan visar, till exempel vilken typ av objekt som presenteras och vilket geografiskt område som omfattas.
Aceit:
U201
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.1.1 Innehåll som inte är text,
10.1.1.1 Innehåll som inte är text,
11.1.1.1.1 Innehåll som inte är text (öppen funktionalitet),
11.1.1.1.2 Innehåll som inte är text (sluten funktionalitet) - WCAG 2.1
- 1.1.1 Innehåll som inte är text (A)
- WCAG 2.2
- 1.1.1 Innehåll som inte är text (A)
Dekorativ vektorgrafik döljs inte för hjälpmedel
ID:
Ally-14581
Prioritet:
Hög
Status:
Öppen
Beskrivning och lösningsförslag:
På flera ställen i gränssnittet används dekorativa ikoner som ett visuellt stöd för att markera interaktiva objekt. Ikonerna tillför ingen egen information utan fungerar enbart som grafiska förstärkningar av designen.
I nuläget är vissa vektorbaserade ikoner inte korrekt dolda för hjälpmedel. Det gör att skärmläsare riskerar att uppfatta och annonsera dem som innehåll, trots att de saknar meningsbärande innehåll. Användaren kan då få extra, irrelevant information uppläst, exempelvis genom att skärmläsaren stannar vid en ikon utan att det finns något innehåll att tolka. Alternativt, att skärmläsaren läser upp innehåll som är svårbegripligt eller irrelevant. Det skapar onödigt brus i uppläsningen och gör innehållet generellt mer tidskrävande att ta sig igenom för användare som navigerar med skärmläsare.
I bilden nedan pekar röda pilar på några ikoner i gränssnittet som vi har sett saknar attributet aria-hidden för att dölja vektorbaserade ikoner.
Lösningsförslag
-
Säkerställ att dekorativa ikoner döljs för hjälpmedel med attributet
aria-hidden. För vektorbaserade ikoner innebär det att de inte ska exponeras i dokumentstrukturen överhuvudtaget om det är dekorativa. Se exempel nedan för ikonen i menyknappen i bilden ovan.<button class="flex items-center justify-center cursor-pointer" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="navigation-menu"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"> <line x1="4" x2="20" y1="12" y2="12"></line> <line x1="4" x2="20" y1="6" y2="6"></line> <line x1="4" x2="20" y1="18" y2="18"></line> </svg> </button>
Aceit:
U202
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.1.1 Innehåll som inte är text,
10.1.1.1 Innehåll som inte är text,
11.1.1.1.1 Innehåll som inte är text (öppen funktionalitet),
11.1.1.1.2 Innehåll som inte är text (sluten funktionalitet) - WCAG 2.1
- 1.1.1 Innehåll som inte är text (A)
- WCAG 2.2
- 1.1.1 Innehåll som inte är text (A)
Prioritet: Medium
Detta är problem som påverkar en del användares förmåga att förstå och använda gränssnittet.
Vissa texter mot bakgrund har för låg kontrast
ID:
Ally-14715
Prioritet:
Medium
Status:
Öppen
Beskrivning och lösningsförslag:
Text som visas ovanpå grafiska bakgrundselement har för låg kontrast mot bakgrunden. Det gör texten svår att läsa för många användare, särskilt för personer med nedsatt syn eller färgseende.
I bilden nedan är den aktuella texten inramad med en röd ram.
När text placeras på bilder, mönster eller färggranna bakgrunder varierar kontrasten kraftigt mellan olika delar av texten. Det räcker inte att delar av texten är tydliga utan all text måste ha tillräcklig kontrast. Förutom att försämra läsbarheten, skapar det vissa problem med kognitiv belastning eftersom användaren måste anstränga sig för att urskilja bokstäver och ord.
Lösningsförslag
- Säkerställ att text alltid har tillräcklig kontrast mot bakgrunden genom att öka kontrasten mellan text och bakgrund så att den når minst 4,5:1 för normal text.
- Undvik att placera text direkt ovanpå bilder eller grafiska element. Placera i stället texten i en separat yta med enfärgad bakgrund.
- Om text behöver placeras ovanpå grafiska element, lägg ett halvtransparent färgfält eller en gradient bakom texten för att stabilisera kontrasten även när bakgrunden är ojämn.
Aceit:
U409
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.1.4.3 Kontrast (minimum),
10.1.4.3 Kontrast (minimum),
11.1.4.3 Kontrast (minimum) - WCAG 2.1
- 1.4.3 Kontrast (minimum) (AA)
- WCAG 2.2
- 1.4.3 Kontrast (minimum) (AA)
Meddelanden om uteblivna sökresultat hjälper inte användare att korrigera sin sökning
ID:
Ally-14722
Prioritet:
Medium
Status:
Öppen
Beskrivning och lösningsförslag:
När en sökning inte ger några träffar visas endast meddelandet ”Inga datamängder hittades” följt av texten ”Sökresultat för ’test’” där "test" är den sökterm som användaren sökt på. Meddelandet ger ingen vägledning om vad användaren kan göra för att förbättra sökresultatet.
I bilden nedan pekar en röd pil på meddelandet som visas vid en misslyckad sökning.
För användare som inte får det resultat de förväntar sig blir detta något av en återvändsgränd. Det framgår inte om sökningen kan ha stavats fel, om filtrering påverkar resultatet eller om det finns alternativa sätt att hitta informationen. När ett gränssnitt inte ger några sökträffar behöver användaren få hjälp att förstå varför och hur denne kan gå vidare.
Lösningsförslag
-
Komplettera meddelandet med konkret och handlingsinriktad vägledning. Det kan till exempel handla om att föreslå att användaren kontrollerar stavningen eller att tipsa om att prova färre eller mer generella sökord. Det är också bra att erbjuda en länk till alla datamängder eller till en översiktssida.
Aceit:
U424
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.3.3.3 Förslag vid felhantering,
10.3.3.3 Förslag vid felhantering,
11.3.3.3 Förslag vid felhantering - WCAG 2.1
- 3.3.3 Förslag vid felhantering (AA)
- WCAG 2.2
- 3.3.3 Förslag vid felhantering (AA)
Filtrering ändrar innehållet på ett oväntat sätt och döljer andra filter
ID:
Ally-14562
Prioritet:
Medium
Status:
Öppen
Beskrivning och lösningsförslag:
När användaren markerar ett tema i filtreringen i den vänstra delen av sidan uppdateras resultatet direkt och en stor del av sidans innehåll förändras. Samtidigt döljs övriga teman i filterlistan, vilket gör dem otillgängliga tills det aktiva filtret avmarkeras.
I bilden nedan markerar en röd ram samtliga filter för teman innan användaren har valt ett filter.
Detta beteende sker utan förvarning och utan att användaren uttryckligen bekräftar att filtreringen ska genomföras. Förändringen av både innehåll och tillgängliga kontroller bryter det förväntade sammanhanget på sidan och gör det svårt att förstå vad som har hänt.
I bilden nedan markerar en röd pil det aktiva filtreringsalternativet efter att användaren har valt ett filter.
För användare med kognitiva svårigheter, skärmläsare eller begränsad överblick kan det upplevas som att funktioner plötsligt försvinner. Det ökar risken för att användaren tror att alternativen inte längre finns eller att något har gått fel.
Lösningsförslag
- Val av ett filter bör inte dölja övriga filteralternativ eller på annat sätt förändra gränssnittet på ett oväntat sätt. Gör därför filtreringen mer förutsägbar för användaren.
- Alternativt kan filtreringen kräva en tydlig bekräftelse, till exempel med en knapp, så att användaren själv initierar förändringen.
Aceit:
U616
Associerade riktlinjer:
- EN 301 549 version 3.2.1
- 9.3.2.2 Vid inmatning,
10.3.2.2 Vid inmatning,
11.3.2.2 Vid inmatning - WCAG 2.1
- 3.2.2 Vid inmatning (A)
- WCAG 2.2
- 3.2.2 Vid inmatning (A)