Granskning av digital tillgänglighet för webbplatsen www.luchtmeetnet.nl

Issue nr. 1 - Knappar utan tangentbordsstyrning

I webbplatsens sidhuvud kan följande knappar inte styras med tangentbordet: knappen med delningsikonen med aria-label="Deel", knappen med flaggikonen med aria-label="Kies taal" och knapparna i språkundermenyn, till exempel knappen med aria-label="en".

Knapparna kan inte nås via tangentbordet. Därför hoppas knapparna över när besökare navigerar med tangentbordet. Interaktiva element måste kunna styras helt med tangentbordet.

Lösning:

Se till att knapparna kan styras med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 2 - Undermenyer utan tangentbordsstyrning

I webbplatsens sidhuvud visar länkarna "Meetpunten" och "Data" undermenyer vid hovring. Dessa undermenyer visas inte vid tangentbordsstyrning.

Lösning:

Se till att det extra innehållet också kan öppnas med tangentbordet.

Issue nr. 3 - Hovringsinnehåll kan inte stängas

När musen förs över länkarna "Meetpunten" och "Data" i huvudmenyn visas extra innehåll som överlappar det befintliga sidinnehållet.

Lösning:

Se till att detta extra innehåll kan stängas utan att använda musen och utan att tangentbordsfokus behöver flyttas. Stöd till exempel stängning med Escape-tangenten.

Issue nr. 4 - 'aria-expanded' saknas vid undermeny

I webbplatsens sidhuvud har länkarna "Meetpunten" och "Data" undermenyer. När en skärmläsaranvändare öppnar menyn förmedlas inte om undermenyn är öppen eller stängd.

När en undermeny finns måste elementet som öppnar undermenyn ange om undermenyn är synlig eller dold.

Lösning:

Använd attributet aria-expanded på knappen eller länken som öppnar undermenyn.

Issue nr. 5 - Gruppering av länkar saknas i HTML

I webbplatsens sidhuvud har länkarna "Meetpunten" och "Data" undermenyer. I dessa undermenyer presenteras länkar visuellt som en grupp, men denna gruppering är inte fastställd i HTML-strukturen.

När det för seende besökare är tydligt att länkar hör ihop, måste denna struktur också finnas i HTML-koden.

Lösning:

Placera de grupperade länkarna i ett ul-element.

Issue nr. 6 - Aktuell sida inte markerad i koden

I huvudmenyn har den aktiva länken ett avvikande visuellt utseende. Denna distinktion är inte fastställd i koden. Därför är det inte tydligt för skärmläsaranvändare vilken sida som är aktiv.

Lösning:

Se till att det i koden fastställs vilken sida som är aktiv. Lägg till exempel till aria-current="true" på den aktiva länken. Andra alternativ är en h1-rubrik med samma text som menyposten eller användning av sidtiteln (title).

Issue nr. 7 - Ologisk fokusordning

I sidhuvudet visas det tillhörande innehållet när länkarna i huvudmenyn aktiveras. Tangentbordsfokus flyttas därefter inte till detta nyöppnade innehåll, utan till nästa interaktiva element i sidhuvudet. Därmed uppstår en ologisk fokusordning.

Lösning:

Se till att tangentbordsfokus vid öppning av innehåll flyttas till det nyvisade innehållet och att fokusordningen överensstämmer med sidans visuella ordning.

Issue nr. 8 - title-elementet uppdateras inte dynamiskt

På denna webbplats ändras sidornas innehåll dynamiskt, men texten i <title>-elementet ändras inte med. Därför stämmer sidtiteln inte överens med sidans aktuella innehåll. Dessutom är titeln "Luchtmeetnet.nl" inte en bra beskrivning av sidans innehåll.

Skärmläsaranvändare använder ofta sidtiteln för att förstå vad sidan handlar om. När titeln inte stämmer överens med sidans aktuella innehåll kan detta vara förvirrande.

Detta problem förekommer bland annat på:

• https://www.luchtmeetnet.nl/
• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/stations.

Ett liknande problem förekommer också på sidorna:

• https://www.luchtmeetnet.nl/informatie/download-data/tijdnotatie
• https://www.luchtmeetnet.nl/informatie/download-data/download-statistieken
• https://www.luchtmeetnet.nl/informatie/metingen/keuze-meetlocaties

Lösning:

Se till att texten i <title>-elementet uppdateras automatiskt när sidans innehåll ändras dynamiskt.

Se dessutom till att <title>-elementet på varje sida är unikt och noggrant beskriver den aktuella sidans innehåll, gärna kompletterat med organisationens namn.

Issue nr. 9 - Rubrik inte markerad i koden

När denna webbplats sidor visas på en liten skärm finns det texter som inte är markerade som rubrik, bland annat:

• https://www.luchtmeetnet.nl/ - texten "Luchtmeetnet"
• https://www.luchtmeetnet.nl/meetpunten - texten "Meetpunten"
• https://www.luchtmeetnet.nl/nieuws - texten "Publicaties"

För besökare som använder hjälpmedel är text som visuellt är utformad som rubrik men inte är markerad som rubrik i koden inte användbar. De navigerar via rubriker för att skanna innehållet eller snabbt komma till en specifik sektion. Detta är bara möjligt när rubriker också är fastställda som rubriker i koden.

När rubriker enbart är visuellt utformade, till exempel genom fetstil, avviker informationsstrukturen i koden från sidans visuella struktur.

På denna sida finns en instruktion för att testa rubrikstrukturen på en webbsida: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Lösning:

Markera rubriker med rätt HTML-element och använd rätt rubriknivå (h1 till och med h6).

Issue nr. 10 - Knappfunktion saknas

Överst på webbplatsen finns, när den visas på en liten skärm, en klickbar ikon med tre horisontella linjer. Detta element fungerar som en knapp men har inte rätt tillgänglighetsroll. Ikonen har heller inget textalternativ.

När en knapp enbart består av en bild måste bildens textalternativ beskriva knappens funktion. Detta problem förekommer även vid flaggbilderna i denna meny, som fungerar som knappar för att byta sidans språk.

Lösning:

Se till att knappen har rätt tillgänglighetsroll. Använd <button>-elementet för detta. Lägg till ett textalternativ som beskriver knappens funktion. Detta kan göras genom ett textalternativ vid ikonen eller genom att lägga till ett aria-label på knappen. När ikonen aktiveras ändras den till ett kryss och knappens funktion ändras till att stänga menyn. Se till att textalternativet ändras i takt med denna funktion.

Issue nr. 11 - Menyknappens status saknas

På en liten skärm finns en menyknapp med tre horisontella linjer för att öppna den mobila navigeringsmenyn. Knappen ger ingen information om menyns tillstånd (öppen eller stängd) till besökare som inte kan se detta, som skärmläsaranvändare.

Lösning:

Se till att menyns status också finns tillgänglig i koden. Använd till exempel attributet aria-expanded på menyknappen. Sätt detta attribut till "true" när menyn är öppnad och till "false" när menyn är stängd.

Issue nr. 12 - Menyknapp utan tangentbordsstyrning

På en liten skärm finns en menyknapp med tre horisontella linjer för att öppna den mobila navigeringsmenyn. Denna knapp kan inte styras med tangentbordet.

Knappen kan inte nås via tangentbordet. Därför hoppas knappen över när besökare navigerar med tangentbordet. Interaktiva element måste kunna styras helt med tangentbordet.

Detta problem gäller även knapparna i denna meny som används för att byta sidornas språk.

Lösning:

Se till att en knapp kan styras med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 13 - Fokus flyttas inte till mobilmenyn

På en liten skärm finns en menyknapp med tre horisontella linjer för att öppna den mobila navigeringsmenyn. När menyn öppnas flyttas inte tangentbordsfokus till den mobila menyn.

Dessutom kan interaktiva element på den underliggande sidan fortfarande få tangentbordsfokus medan menyn är öppen. Dessa element är vid det tillfället inte synliga, eftersom menyn ligger ovanpå dem.

Lösning:

Se till att tangentbordsfokus vid öppning av menyn flyttas till den mobila menyn. Så länge menyn är öppen ska fokus stanna i menyn och inte hamna på den underliggande sidan.

På denna sida finns en instruktion för att själv testa fokusordningen: https://properaccess.nl/hoe-test-ik-focusvolgorde/.

Issue nr. 14 - Fokusindikator saknas

På denna sida får elementet med role="application" och aria-label="Kaart" tangentbordsfokus. Det finns ingen synlig fokusindikator när detta element har fokus.

Lösning:

Se till att tangentbordsfokus är synlig på fokuserbara element, så att besökare vet när de kan trycka på en knapp.

Issue nr. 15 - Felaktig roll för dragspelsknappar

På denna sida saknar elementen som öppnar och stänger dolt innehåll i komponenterna "Legenda" och "Selecteer component" rollen knapp.

Texterna som öppnar och stänger dessa dragspelskomponenter fungerar som knappar men är inte markerade som sådana. Dessutom fungerar dessa texter som rubriker för det tillhörande innehållet men är inte fastställda som rubriker i koden.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI.

Lösning:

Använd ett rubrikelement med ett button-element inuti, till exempel: <h2><button>Sektionens titel</button></h2>.

Issue nr. 16 - Status för dragspel saknas i koden

På denna sida är det öppna eller stängda tillståndet för dragspelskomponenterna "Legenda" och "Selecteer component" visuellt synligt men inte fastställt i koden. Pilikonen som indikerar att dolt innehåll finns har inget textalternativ.

Därför är det inte tydligt för skärmläsaranvändare om en sektion är öppen eller stängd.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI.

Lösning:

Tillämpa attributet aria-expanded på knapparna som öppnar och stänger sektionerna, eller lägg till visuellt dold text som beskriver sektionens tillstånd.

Issue nr. 17 - Dragspel utan tangentbordshantering

På denna sida kan dragspelskomponenterna "Legenda" och "Selecteer component" inte hanteras med tangentbordet.

Besökare som enbart navigerar med tangentbordet måste kunna använda alla klickbara komponenter på webbplatsen. Dessa inkluderar: länkar, knappar, formulär, valllistor, flikar, skjutreglage och dragspelskomponenter.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Lösning:

Se till att alla klickbara komponenter kan hanteras med tangentbordet.

På denna sida finns en instruktion för att bygga tillgängliga dragspelskomponenter: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Issue nr. 18 - Vallista utan tillgängligt namn

På denna sida finns i den dolda komponenten som öppnas med "Selecteer component" en vallista (<select>-element) med etiketten "Selecteer component". Det tillgängliga namnet för detta element saknas.

Därför är vallistan inte tillgänglig för skärmläsaranvändare. Även besökare som använder röststyrningsprogram kan inte hantera elementet, eftersom den synliga texten inte finns med i det tillgängliga namnet.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten - i komponenten som öppnas med "Selecteer component" en vallista med etiketten "Selecteer component".
• https://www.luchtmeetnet.nl/meetpunten - <select>-elementen med etiketterna "Selecteer waarde" och "Selecteer periode" i panelen som öppnas genom att aktivera de runda markeringarna på kartan.
• https://www.luchtmeetnet.nl/verwacht - <select>-elementen med etiketterna "Selecteer provincie", "Selecteer dag" och "Selecteer tijd" i den dolda komponenten som öppnas med "Filter".

Lösning:

Ge <select>-elementet ett tillgängligt namn.

Se till att det tillgängliga namnet innehåller den synliga texten, helst i början. Det tillgängliga namnet kan också vara identiskt med den synliga texten.

Issue nr. 19 - Enbart färg används på kartan

På kartan förmedlas information enbart genom färg. Markeringarna på kartan särskiljs uteslutande baserat på färg, såsom de gula och blå cirklarna.

När besökare inte kan se färgerna eller inte kan skilja dem åt är det inte tydligt vilken färg som hör till vilken kategori.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI - På kartorna förmedlas information enbart genom färg, till exempel med de gula och blå delarna i fliken "Luchtkwaliteit".

Lösning:

Använd förutom färg även en annan visuell markering, såsom skuggning eller textetiketter.

Issue nr. 20 - Otillräcklig färgkontrast på kartan

På kartan finns runda markeringar i olika färger, till exempel gul och blå. Dessa färger har otillräckligt kontrastförhållande gentemot bakgrunden. Den gula (#FFF855) markeringen på kartans ljusgrå (#DCDCDC) bakgrund har till exempel ett kontrastförhållande på 1,2:1. Den blå (#4AB7E9) färgen på kartans vita bakgrund har ett kontrastförhållande på 2,3:1.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Dessutom förekommer samma problem i teckenförklaringen. Den blå (#96C8FF) markeringen på en vit bakgrund har till exempel ett kontrastförhållande på 1,8:1. Även de gula och orange färgerna har otillräcklig färgkontrast.

Teckenförklaringen med detta problem finns på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Ett liknande problem med teckenförklaringen i diagram förekommer på sidorna:

• https://www.luchtmeetnet.nl/meetpunten - diagrammen finns i panelen som öppnas genom att aktivera de runda markeringarna på kartan.
• https://www.luchtmeetnet.nl/componenten - teckenförklaringen finns i diagrammen när filter har tillämpats.

Lösning:

Se till att kontrasten mellan de informativa elementen på kartan och i teckenförklaringen gentemot bakgrunden är minst 3,0:1. Kontrollera att alla markeringar på kartan och i teckenförklaringen har tillräcklig kontrast gentemot sin bakgrund.

Issue nr. 21 - Otillräcklig färgkontrast vid text

På kartan finns grå (#B4B4B4) texter, som "Noordzee" och "Markermeer", på en ljusgrå (#F3F3F3) bakgrund. Kontrastförhållandet är 1,9:1 och därmed för lågt.

Ett liknande problem förekommer vid texter som "Aalsmeer", "Amstelveen", "Nes aan de Amstel" på en grå eller vit bakgrund. Den grå (#969696) texten på en ljusgrå (#EBEBEB) bakgrund har till exempel ett kontrastförhållande på 2,5:1.

Lösning:

Eftersom denna text är mindre än 24px och inte fetstilad måste kontrasten vara minst 4,5:1. På denna sida finns en instruktion för att testa färgkontrast: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 22 - Färgmarkeringarna i teckenförklaringen har inget textalternativ

På denna sida innehåller teckenförklaringen färgade fyrkantiga markeringar som representerar färgerna på kartan. Dessa färgmarkeringar används för att förmedla information men har inget textalternativ som benämner själva färgerna. Därför kan besökare som använder hjälpmedel, som skärmläsare, inte uppfatta informationen som förmedlas med färgerna.

Dessutom visas relationen mellan färgmarkeringarna och de tillhörande kategorierna enbart visuellt och kan inte fastställas programmatiskt. Därför förmedlas det inte till besökare som använder hjälpmedel vilken färg som hör till vilken kategori.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/verwacht?component=LKI https://www.luchtmeetnet.nl/mijn-locatie.
• https://www.luchtmeetnet.nl/meetpunten - i teckenförklaringen för diagrammen i panelen som öppnas när de runda markeringarna på kartan aktiveras.
• https://www.luchtmeetnet.nl/componenten - i teckenförklaringen för diagrammen som visas när filter har tillämpats.

Lösning:

Se till att det finns ett textalternativ för färgmarkeringarna, så att betydelsen är tillgänglig i koden. Till exempel genom visuellt dold text för besökare som använder hjälpmedel.

Issue nr. 23 - Knappens namn beskriver inte vad knappen gör

På denna sida finns på kartan flera runda markeringar som fungerar som knappar. Dessa knappar öppnar paneler med detaljerad information om en vald mätplats på sidan "Meetpunten". Alla knappar har samma tillgängliga namn: "Marker". Detta namn beskriver inte knapparnas funktion tydligt.

Dessutom erbjuds platsinformationen, som är synlig när man hovrar med musen över knappen, enbart via aria-describedby. Denna information utgör inte en del av det tillgängliga namnet.

Därför kan besökare som använder hjälpmedel inte tydligt skilja de olika knapparna åt.

Lösning:

Se till att det tillgängliga namnet överensstämmer med knappens åtgärd, så att knappar med olika funktioner också har olika tillgängliga namn.

Issue nr. 24 - Knappar utan tangentbordshantering

På denna sida kan de runda markeringarna på kartan som fungerar som knappar inte hanteras med tangentbordet.

Därför kan besökare som navigerar med tangentbordet inte aktivera knapparna.

Lösning:

Se till att knapparna kan hanteras med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 25 - Felaktig roll för knapp

På denna sida har knappen med pilar bredvid texten "Laatste update" inte rätt tillgänglighetsroll.

Därför kan hjälpmedel inte korrekt avgöra att detta element fungerar som en knapp.

Lösning:

Se till att knappen har rätt tillgänglighetsroll. Använd button-elementet.

Issue nr. 26 - Tangentbordshantering saknas

På denna sida är knappen med pilar bredvid texten "Laatste update" inte tillgänglig via tangentbordet.

Lösning:

Se till att knappen kan hanteras med både mellanslagstangenten och Enter-tangenten.

Issue nr. 27 - Statusmeddelande läses inte upp automatiskt

På denna sida visar kartan mätdata som kan uppdateras med knappen med pilar bredvid texten "Laatste update". När denna knapp aktiveras uppdateras kartdata och texten med datum och tid för den senaste uppdateringen ändras (till exempel "Laatste update: 05-02-26 13:56"). Detta är ett statusmeddelande.

Denna ändring annonseras inte automatiskt av skärmläsare. Därför informeras inte skärmläsaranvändare om att data har uppdaterats eller när uppdateringen har skett.

Lösning:

Se till att denna typ av meddelande automatiskt läses upp som statusmeddelande, utan att användaren behöver navigera till det. Detta kan göras genom att lägga till role="status" på meddelandets element. Mer information finns på: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19.

Issue nr. 28 - Funktioner inte användbara vid inzoomning

När denna sida zoomas in till 200% är informationen "Laatste update:" inte synlig. Även knappen med pilar för att uppdatera kartdata och knapparna för att zooma in och ut är då inte synliga och inte användbara.

Detta problem uppstår även när sidan visas med en skärmupplösning på 1280 gånger 1024 pixlar och zoomas in till 400%.

Detta problem förekommer även på sidan: https://www.luchtmeetnet.nl/meetpunten.

Lösning:

Se till att all information och alla funktioner förblir tillgängliga och användbara vid inzoomning till 200% och 400% på en skärm på 1280 gånger 1024 pixlar.

Issue nr. 29 - Funktion för ikonknapp saknas

På denna sida finns, när den visas på en liten skärm, klickbara ikoner som öppnar undermenyerna för teckenförklaringen och filter. Dessa ikoner har inte rätt tillgänglighetsroll och inget textalternativ.

Därför är det inte tydligt för besökare som använder hjälpmedel vad knapparnas funktion är.

Samma problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Se även samma problem vid "X"-ikonen i undermenyn "Legenda".

Lösning:

Se till att knappen har rätt tillgänglighetsroll. Använd <button>-elementet för detta. Lägg till ett textalternativ som beskriver knappens funktion, till exempel genom ett textalternativ vid ikonen eller ett aria-label på knappen.

Issue nr. 30 - Menyknappens status saknas

På denna sida finns, när den visas på en liten skärm, knappar som öppnar undermenyerna för teckenförklaringen och filter. Dessa knappar ger ingen information om undermenyns tillstånd (öppen eller stängd).

Samma problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Lösning:

Se till att menyns status också finns tillgänglig i koden. Använd till exempel attributet aria-expanded på menyknappen. Sätt detta attribut till "true" när menyn är öppnad och till "false" när menyn är stängd.

Issue nr. 31 - Undermenyknappar utan tangentbordshantering

På denna sida kan, när den visas på en liten skärm, knapparna som öppnar undermenyerna för teckenförklaringen och filter inte hanteras med tangentbordet.

Därför kan besökare som navigerar med tangentbordet inte aktivera dessa knappar.

Dessa problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Se även samma problem vid "X"-knappen i undermenyn "Legenda".

Lösning:

Se till att en knapp kan hanteras med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 32 - Text inte läsbar vid 400% zoom

När denna sida visas med en skärmupplösning på 1280 gånger 1024 pixlar och zoomas in till 400% (320px bredd) försvinner en del av innehållet i teckenförklaringens undermeny.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Lösning:

Se till att allt innehåll förblir tillgängligt och läsbart vid inzoomning till 400%.

Issue nr. 33 - Ologisk fokusordning

På denna sida öppnar flera runda markeringar på kartan paneler med detaljerad information om en vald mätplats på sidan "Meetpunten". Tangentbordsfokus flyttas inte till den nyöppnade panelen utan fortsätter till knapparna på kartan som ligger bakom. Därför hamnar tangentbordsfokus på interaktiva element som inte är synliga, eftersom de ligger bakom den öppnade panelen. Fokusordningen överensstämmer därmed inte med sidans visuella struktur.

Panelen med detaljerad information täcker en del av sidinnehållet. Interaktiva element på den underliggande sidan kan fortfarande få tangentbordsfokus, medan fokusindikatorn inte är synlig.

Lösning:

Flytta tangentbordsfokus till nästa logiska element när knappen aktiveras.

Håll tangentbordsfokus inom panelen tills den stängs via stängningsknappen eller med ESC-tangenten. Underliggande interaktiva element får inte ta emot tangentbordsfokus så länge panelen är öppen.

Issue nr. 34 - Felaktig roll för interaktiva element

På denna sida öppnas en panel med detaljerad information när de runda markeringarna på kartan aktiveras. I denna panel finns interaktiva element som inte har rätt tillgänglighetsroll. Det gäller elementet med "X"-ikonen, elementet med delningsikonen samt elementen med texterna "Meer informatie" och "Bekijk alle metingen van deze component".

Därför kan hjälpmedel inte korrekt avgöra om det rör sig om en knapp eller en länk.

Lösning:

Se till att de interaktiva elementen har rätt tillgänglighetsroll. Använd <button>-elementet för knappar och <a>-elementet för länkar.

Issue nr. 35 - Stängningsknapp utan tillgängligt namn

På denna sida öppnas en panel med detaljerad information när de runda markeringarna på kartan aktiveras. Denna panel innehåller en "X"-ikon för att stänga den. Denna ikon har inget textalternativ, vilket innebär att det interaktiva elementet saknar tillgängligt namn.

Därför är det inte tydligt för besökare som använder hjälpmedel vad knappens funktion är.

Lösning:

Lägg till ett textalternativ vid ikonen eller använd ett 'aria-label' på det interaktiva elementet för att beskriva funktionen.

Issue nr. 36 - Interaktiva element utan tangentbordshantering

På denna sida öppnas en panel med detaljerad information när de runda markeringarna på kartan aktiveras. Denna panel innehåller flera interaktiva element som inte kan hanteras med tangentbordet. Det gäller elementet med "X"-ikonen, elementet med texten "Meer informatie", elementet med delningsikonen och elementet med texten "Bekijk alle metingen van deze component".

Därför kan besökare som navigerar med tangentbordet inte aktivera dessa element.

Lösning:

Se till att interaktiva element kan hanteras med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 37 - Flikar felaktigt markerade

På denna sida öppnas en panel med detaljerad information när de runda markeringarna på kartan aktiveras. I denna panel finns en komponent som ser ut och fungerar som flikar, såsom interaktiva element för att växla mellan ämnena NO₂, NO och O₃. När en flik aktiveras visas nytt innehåll. De nödvändiga rollerna och attributen saknas.

Ett liknande problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/verwacht?component=LKI – vid de interaktiva elementen "Luchtkwaliteit", "Stikstofdioxide", "Ozon" och andra
• https://www.luchtmeetnet.nl/rapportages – vid interaktiva element som "DCMR", "GGD", "ODRA" och andra
• https://www.luchtmeetnet.nl/mijn-locatie – de interaktiva elementen med texterna "Air quality", "Nitrogen dioxide", "Ozone" och andra är markerade som radioknappar, medan komponenten ser ut och fungerar som flikar

Lösning:

Lägg till rätt roller och attribut. Mer information finns på: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Issue nr. 38 - Beskrivning av diagram saknas

På denna sida finns diagram i panelen som öppnas när de runda markeringarna på kartan aktiveras. Dessa diagram är komplexa bilder och har inget meningsfullt textalternativ.

Under diagrammen finns text och en tabell under "Gemeten concentraties" där uppgifterna presenteras i textform. Diagrammen har inget kort textalternativ som anger att det rör sig om diagram eller att en mer utförlig textbeskrivning finns tillgänglig.

Därför informeras inte besökare som använder hjälpmedel om diagrammens existens eller var den tillhörande textinformationen finns.

Lösning:

Lägg till ett kort textalternativ för varje diagram som anger att det rör sig om ett diagram och att detaljerade uppgifter finns tillgängliga i texten och tabellen under "Gemeten concentraties".

Issue nr. 39 - Information i diagram enbart via färg

I diagrammen används enbart färg för att förmedla information, såsom de gula, orange och blå färgerna i teckenförklaringen.

När besökare inte kan se färgerna eller inte kan skilja dem åt är det inte tydligt vilken färg som hör till vilken kategori.

Detta problem förekommer även på sidan: https://www.luchtmeetnet.nl/componenten i diagrammen som visas när filter har tillämpats.

Lösning:

Använd förutom färg även andra visuella markeringar, såsom skuggning eller textetiketter.

Issue nr. 40 - Länkar otillräckligt igenkännbara

På denna sida finns i panelen som öppnas när de runda markeringarna på kartan aktiveras ett stycke med länkar, såsom "disclaimer". Dessa länkar kan enbart särskiljas från den omgivande texten genom en färgskillnad.

Därför är det inte tydligt för alla besökare att det rör sig om länkar.

Detta problem förekommer även på följande sidor:

• https://www.luchtmeetnet.nl/componenten
• https://www.luchtmeetnet.nl/rapportages
• https://www.luchtmeetnet.nl/informatie

Lösning:

Färg får användas för att skilja länkar från statisk text förutsatt att följande två villkor är uppfyllda:

• kontrasten mellan länktexten och den omgivande texten är minst 3:1;
• det finns en extra visuell indikator, såsom understrykning eller en ändring vid hover eller fokus.

Issue nr. 41 - Otillräcklig färgkontrast vid liten text

På denna sida finns i panelen som öppnas när de runda markeringarna på kartan aktiveras ett stycke med länkar, såsom "disclaimer". Den blå (#4082FF) länktexten visas på en vit bakgrund. Kontrastförhållandet är för lågt: 3,6:1.

Detta problem förekommer även på sidan: https://www.luchtmeetnet.nl/componenten. Den blå länktexten, såsom "disclaimer" och "Meer informatie over ontbrekende metingen.", visas där på en ljusgrå (#FAFBFF) bakgrund. Kontrastförhållandet är för lågt: 3,5:1.

Se även andra sidor med liknande problem.

Lösning:

Eftersom denna text är mindre än 24 pixlar och inte fetstilad måste kontrasten vara minst 4,5:1.

På denna sida finns en instruktion för att testa färgkontrast: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 42 - Datatabell felaktigt markerad

På denna sida finns i panelen som öppnas när de runda markeringarna på kartan aktiveras en datatabell. Denna tabell är inte markerad som tabell i HTML-strukturen.

Därför kan en skärmläsare inte avgöra relationen mellan cellerna. Innehållet läses upp felaktigt eller ofullständigt.

Detta problem förekommer även på följande sidor:

• https://www.luchtmeetnet.nl/stations – vid tabellen som visas när provins och timmar har valts
• https://www.luchtmeetnet.nl/rapportages – vid tabellen som visas när filter har tillämpats
• https://www.luchtmeetnet.nl/nieuws – vid tabellerna i innehållet som öppnas efter aktivering av objekt i sidomenyn

Lösning:

Se till att datatabeller markeras med rätt HTML-element.

Mer information om hur man bygger tillgängliga tabeller finns på: https://www.w3.org/WAI/tutorials/tables/.

Issue nr. 43 - Funktion för pilikoner saknas

På denna sida finns i panelen som öppnas när de runda markeringarna på kartan aktiveras en tabell under "Gemeten concentraties". I denna tabell finns klickbara pilikoner utan textalternativ.

Därför har dessa knappar inget tillgängligt namn och det är inte tydligt för besökare som använder hjälpmedel vad knapparnas funktion är.

Detta problem förekommer även på följande sidor:

• https://www.luchtmeetnet.nl/mijn-locatie
• https://www.luchtmeetnet.nl/stations – i tabellen som visas när provins och timmar har valts

Lösning:

Lägg till ett textalternativ som beskriver knappens funktion, till exempel genom att använda ett textalternativ för ikonen eller genom att lägga till ett aria-label på knappen.

Issue nr. 44 - Dragspelsknapp inte korrekt markerad

På denna sida öppnas, när de runda markeringarna på kartan aktiveras på en liten skärm, en panel med detaljerad information. I denna panel finns en komponent med dolt innehåll "Filter". Elementet som öppnar och stänger detta innehåll har inte rollen knapp.

Dessutom fungerar texten som öppnar och stänger denna dragspelskomponent som rubrik för det tillhörande innehållet, men denna text är inte markerad som rubrik i koden.

Samma problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Lösning:

Använd ett rubrikelement med ett button-element inuti, till exempel: <h2><button>Sektionens titel</button></h2>.

Issue nr. 45 - Status för dragspel saknas i koden

På denna sida öppnas, när de runda markeringarna på kartan aktiveras på en liten skärm, en panel med detaljerad information. Det öppna eller stängda tillståndet för denna komponent är visuellt synligt men inte fastställt i koden. Pilikonen som indikerar att dolt innehåll finns har inte heller något textalternativ.

Därför är det inte tydligt för besökare som använder en skärmläsare om sektionen är expanderad eller komprimerad.

Samma problem förekommer på sidorna:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Lösning:

Tillämpa attributet aria-expanded på knappen som öppnar och stänger sektionen. Värdet ska ändras beroende på sektionens tillstånd. Ett alternativ är att lägga till visuellt dold text som beskriver sektionens tillstånd.

Issue nr. 46 - Dragspel utan tangentbordshantering

På denna sida öppnas, när de runda markeringarna på kartan aktiveras på en liten skärm, en panel med detaljerad information. I denna panel finns en komponent med dolt innehåll "Filter".

Elementet som öppnar och stänger detta innehåll kan inte hanteras med tangentbordet. Därför kan besökare som navigerar med tangentbordet inte använda denna komponent.

Samma problem förekommer på följande sidor:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Lösning:

Se till att elementet som öppnar och stänger det dolda innehållet kan hanteras fullt ut med tangentbordet.

Issue nr. 47 - Otillräcklig färgkontrast vid liten text

På denna sida har texterna "Selecteer provincie" och "Selecteer uur" ovanför vallistorna en grå (#70757F) färg på en ljusgrå (#FAFBFF) bakgrund. Kontrastförhållandet är för lågt: 4,4:1.

Detta problem förekommer på:

• https://www.luchtmeetnet.nl/componenten (vid texter ovanför valllistor som "Selecteer provincie" och vid texter som "Stikstofdioxide (NO2)" under "Componenten");
• https://www.luchtmeetnet.nl/rapportages (vid texter ovanför valllistor som "Selecteer component", vid texten "tot" mellan inmatningsfält under "Selecteer periode" och vid grå text under tabellen med resultat, som "Eenheid = microgram/m3").
• och även på andra sidor.

Lösning:

Se till att kontrasten för denna text är minst 4,5:1. På denna sida finns en instruktion för att testa färgkontrast: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 48 - Rubrik inte markerad i koden

På denna sida är texten "Componenten" visuellt utformad som rubrik men inte markerad som rubrik i koden.

Därför kan besökare som använder hjälpmedel inte navigera via rubriker på sidan. När rubriker enbart är visuellt utformade och inte är fastställda som rubriker i HTML avviker strukturen i koden från sidans visuella struktur.

På denna sida finns en instruktion för att testa rubrikstrukturen på en webbsida: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/nieuws (vid "Publicaties");
• https://www.luchtmeetnet.nl/informatie (vid "Informatie");
• https://www.luchtmeetnet.nl/contact (vid "Contact").

Lösning:

Markera rubriker med rätt HTML-element (h1 till och med h6) och tillämpa rätt rubriknivå.

Issue nr. 49 - Felaktig användning av rubrikelement

På denna sida visas texten "Geen data beschikbaar" när inga filter har tillämpats. Denna text är markerad med ett <h4>-element men fungerar inte som rubrik.

Texten introducerar inget underliggande innehåll och ger inte sidan någon struktur. Rubrikelementet används här för visuell formatering istället för struktur.

Därför avviker strukturen i koden från sidans faktiska informationsstruktur.

Lösning:

Ta bort <h4>-elementet och använd ett passande element, såsom ett <p>-element. Tillämpa den visuella formateringen med CSS.

På denna sida finns en instruktion för att testa rubriker på en webbsida: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Issue nr. 50 - Felaktig roll för interaktiva element

På denna sida finns under "Componenten" en sidomeny. De interaktiva elementen i denna sidomeny har inte rätt tillgänglighetsroll.

Därför identifierar inte skärmläsare och andra hjälpmedel elementen som interaktiva komponenter. Det är heller inte tydligt vilken funktion de har, vilket försvårar korrekt hantering.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/nieuws (under "Publicaties")
• https://www.luchtmeetnet.nl/informatie (under "Informatie")
• https://www.luchtmeetnet.nl/contact (under "Contact")

Lösning:

Se till att de interaktiva elementen får rätt roll.

Issue nr. 51 - Interaktiva element utan tangentbordshantering

På denna sida finns under "Componenten" en sidomeny. De interaktiva elementen i denna sidomeny kan inte hanteras med tangentbordet.

Därför kan besökare som navigerar med tangentbordet inte aktivera de interaktiva elementen.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/nieuws (under "Publicaties")
• https://www.luchtmeetnet.nl/informatie (under "Informatie")
• https://www.luchtmeetnet.nl/contact (under "Contact")

Lösning:

Se till att interaktiva element kan hanteras fullt ut med tangentbordet, till exempel med Enter-, Return- eller mellanslagstangenten.

Issue nr. 52 - Otillräcklig färgkontrast vid sidomeny

På denna sida finns under "Componenten" en sidomeny. Det aktiva (valda) objektet har en blå (#1B6BFF) färg på en ljusgrå (#FAFBFF) bakgrund. Kontrastförhållandet är för lågt: 4,4:1.

Detta problem förekommer även på sidorna:

• https://www.luchtmeetnet.nl/nieuws (under "Publicaties")
• https://www.luchtmeetnet.nl/informatie (under "Informatie")
• https://www.luchtmeetnet.nl/contact (under "Contact")

Lösning:

Se till att kontrasten för denna text är minst 4,5:1. På denna sida finns en instruktion för att testa färgkontrast: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 53 - Diagram utan beskrivning

På denna sida visas, när filter har tillämpats, diagram. Dessa diagram är komplexa bilder och har inget kort textalternativ eller utförlig beskrivning.

Därför är informationen i diagrammen inte tillgänglig för besökare som inte kan se bilden.

Lösning:

Lägg till en kort beskrivning vid diagrammet och erbjud dessutom en utförlig textbeskrivning. Denna beskrivning kan finnas på själva sidan eller göras tillgänglig via en separat sida eller en nedladdningsbar fil.

Issue nr. 54 - Status för dragspel saknas i koden

På denna sida finns, när den visas på en liten skärm, en knapp som öppnar en komponent med dolt innehåll. Den synliga texten på knappen är från början "Stikstofdioxide (NO2)".

Det öppna eller stängda tillståndet för denna komponent är visuellt synligt men inte fastställt i koden. Pilikonen som indikerar att dolt innehåll finns har inte heller något textalternativ.

Därför är det inte tydligt för skärmläsaranvändare om sektionen är expanderad eller komprimerad.

Detta problem förekommer även på sidan: https://www.luchtmeetnet.nl/contact - vid knappen som från början har etiketten "Algemeen Luchtmeetnet").

Lösning:

Tillämpa attributet aria-expanded på knappen som öppnar och stänger sektionen, så att värdet ändras beroende på tillståndet. Ett alternativ är att lägga till visuellt dold text som beskriver sektionens tillstånd.

Issue nr. 55 - Dragspelsknapp har felaktig roll

På denna sida finns, när den visas på en liten skärm, en komponent med dolt innehåll. Den synliga texten är från början "Luchtkwaliteit". Elementet som öppnar och stänger detta dolda innehåll har inte rollen knapp.

Därför identifieras elementet inte som en interaktiv komponent.

Lösning:

Använd ett rubrikelement med ett button-element inuti.

Issue nr. 56 - Status för dragspel saknas i koden

På denna sida finns, när den visas på en liten skärm, en komponent med dolt innehåll. Den synliga texten är från början "Luchtkwaliteit".

Det öppna eller stängda tillståndet är visuellt synligt men inte fastställt i koden. Pilikonen som indikerar att dolt innehåll finns har inte heller något textalternativ.

Därför är det inte tydligt för besökare som använder en skärmläsare om sektionen är expanderad eller komprimerad.

Lösning:

Tillämpa attributet aria-expanded på knappen som öppnar och stänger sektionen, så att värdet ändras beroende på tillståndet. Ett alternativ är att lägga till visuellt dold text som beskriver sektionens tillstånd.

Issue nr. 57 - Funktioner inte användbara vid 400% zoom

När denna sida visas med en skärmupplösning på 1280 gånger 1024 pixlar och zoomas in till 400% (320px bredd) är vallistan "Selecteer dag" och knappen "Toon selectie" i filtrets undermeny inte synliga och inte användbara.

Lösning:

Se till att interaktiva element förblir synliga och användbara vid 400% zoom på en skärm på 1280 gånger 1024 pixlar.

Issue nr. 58 - Länktext inte unik

På denna sida öppnar aktivering av objekt i sidomenyn innehåll med tabeller. I dessa tabeller finns länkar med samma länktext, som "Download" när "Algemeen Luchtmeetnet" är aktiverat och "Website" när "DCMR (Rijnmond)" är aktiverat, medan länkarnas destination är olika.

Baserat på länktexten är det därför inte tydligt vart en länk leder. Detta kan vara förvirrande för besökare, särskilt för skärmläsaranvändare som granskar länkar utanför sitt sammanhang.

Lösning:

Gör i länktexten tydligt vart länken hänvisar. Länkar med olika destinationer måste ha olika länktexter.

Issue nr. 59 - Hopplänk saknas

På denna sida saknas en lösning för att hoppa över block med upprepat innehåll. Sidan innehåller en sidomeny. Genom att aktivera objekt i denna meny öppnas nytt innehåll, men det finns ingen hopplänk för att hoppa över navigeringen i sidhuvudet.

Dessutom finns det ingen tangentbordsmekanism för att kringgå de upprepade objekten i sidomenyn. Därför måste besökare som navigerar med tangentbordet på varje öppnad sida först tabba igenom samma navigationslänkar innan de når huvudinnehållet.

Lösning:

Se till att besökare kan hoppa över fasta delar av sidan och gå direkt till huvudinnehållet, till exempel med en hopplänk.

En hopplänk måste vara den första länken på sidan. Den får vara dold som standard men måste bli synlig så snart den får tangentbordsfokus.

Issue nr. 60 - Dragspelsknapp har felaktig roll

På denna sida finns en sidomeny. I denna meny innehåller komponenter med dolt innehåll ett element som öppnar och stänger innehållet. Detta element har inte rollen knapp.

Därför identifieras elementet inte som en interaktiv komponent.

Lösning:

Använd ett rubrikelement med ett button-element inuti, till exempel: <h2><button>Sektionens titel</button></h2>.

Issue nr. 61 - Pilikoner i dragspel utan textalternativ

På denna sida finns i sidomenyn komponenter med dolt innehåll. Pilikonen som indikerar att dolt innehåll finns har inget textalternativ.

Därför är det inte tydligt för besökare som använder en skärmläsare att komponenten kan öppnas eller stängas.

Lösning:

Se till att dragspelskomponentens funktion och status finns tillgänglig i koden. Detta kan till exempel göras genom att:

• lägga till ett textalternativ för ikonen;
• använda ett 'aria-expanded'-attribut på det interaktiva elementet;
• lägga till visuellt dold text som beskriver tillståndet.

Issue nr. 62 - Vallista (<select>-element) saknar etikett eftersom första alternativet används som etikett

På denna sida finns, när den visas på en liten skärm, ett <select>-element utan etikett. Det första alternativet i elementet används som etikett, men detta försvinner så snart ett annat alternativ väljs.

Därför är det inte tydligt vad vallistan handlar om.

Detta problem förekommer även på:

• https://www.luchtmeetnet.nl/informatie/download-data/download-statistieken
• https://www.luchtmeetnet.nl/informatie/metingen/keuze-meetlocaties
• https://www.luchtmeetnet.nl/informatie/verwachting/verwacht
• https://www.luchtmeetnet.nl/informatie/overige/validatie-data

Lösning:

Förse <select>-elementet med en synlig och bestående etikett.

Länk till sidan: https://www.luchtmeetnet.nl/informatie/download-data/download-statistieken

På denna sida förekommer tillgänglighetsproblem som redan har beskrivits på andra sidor och som därför inte beskrivs igen här.

Länk till sidan: https://www.luchtmeetnet.nl/informatie/metingen/keuze-meetlocaties

På denna sida förekommer tillgänglighetsproblem som redan har beskrivits på andra sidor och som därför inte beskrivs igen här.

Länk till sidan: https://www.luchtmeetnet.nl/informatie/verwachting/verwacht

På denna sida förekommer tillgänglighetsproblem som redan har beskrivits på andra sidor och som därför inte beskrivs igen här.

Länk till sidan: https://www.luchtmeetnet.nl/informatie/overige/validatie-data

På denna sida förekommer tillgänglighetsproblem som redan har beskrivits på andra sidor och som därför inte beskrivs igen här.

Issue nr. 63 - Gruppering av inmatningsfält saknas

På denna sida finns en grupp inmatningsfält med texten "Selecteer periode" ovanför. Dessa fält är visuellt grupperade men denna relation är inte fastställd i HTML.

Därför är sambandet mellan inmatningsfälten inte tydligt i koden.

Lösning:

Placera inmatningsfälten i ett <fieldset>-element och använd ett <legend>-element för att ge gruppen ett namn, till exempel "Selecteer periode".

Issue nr. 64 - Inmatningsfält utan tillgängligt namn

På denna sida saknar inmatningsfälten under "Selecteer periode" tillgängligt namn.

Därför är det inte tydligt för skärmläsaranvändare vad de ska fylla i inmatningsfältet.

Lösning:

Ge varje inmatningsfält ett tillgängligt namn genom att koppla ett <label>-element till fältet.

Issue nr. 65 - Otillräcklig färgkontrast vid liten text

När filter inte har tillämpats finns under "Download" grå (#A3ABBC) texter "PDF" och "CSV". På den ljusgrå (#F1F3F6) bakgrunden är kontrastförhållandet för lågt: 2,1:1.

Dessutom finns det grå (#6C7996) texter som "DCMR" och "GGD" på en vit bakgrund. Kontrastförhållandet är 4,4:1 och uppfyller därmed inte kravet.

Lösning:

Eftersom denna text är mindre än 24 pixlar och inte fetstilad måste kontrasten vara minst 4,5:1. På denna sida finns en instruktion för att testa färgkontrast: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 66 - Otydligt länkmål

I innehållet som öppnas vid aktivering av "ODRA (Regio Arnhem)" i sidomenyn finns under rubriken "Contact" webbadressen "www.odregioarnhem.nl". Denna webbadress är uppdelad i två separata länkar: "www." och ".nl". Texten "odregioarnhem" ingår inte i länken.

Därför erbjuds inte den fullständiga webbadressen som en tydlig länk till hjälpmedel. De separata delarna annonseras var för sig, vilket gör länkens mål otydligt.

Lösning:

Implementera den fullständiga webbadressen som en länk. Placera hela URL:en inom ett <a>-element, så att den annonseras och aktiveras som en tydlig länk.

Issue nr. 67 - Osynligt element får tangentbordsfokus

På denna sida hamnar, i innehållet som öppnas vid aktivering av "ODZL (Limburg)" i sidomenyn, tangentbordsfokus på icke-synliga interaktiva länkar under rubriken "Contact".

Tangentbordsfokus får inte hamna på interaktiva element som inte är synliga. Om detta ändå sker kan en besökare oavsiktligt aktivera ett element och navigeringen blir oförutsägbar.

Lösning:

Se till att enbart synliga element kan få tangentbordsfokus och att fokusordningen förblir logisk och förutsägbar.

Issue nr. 68 - Länk utan tillgängligt namn

På denna sida finns i innehållet som öppnas vid aktivering av "ODZL (Limburg)" i sidomenyn två icke-synliga länkar under rubriken "Contact". Dessa länkar är tillgängliga för skärmläsare men saknar tillgängligt namn.

Därför är det inte tydligt för skärmläsaranvändare vad länkarnas mål eller destination är. Detta hänger samman med framgångskriterium 2.4.4, eftersom länkar måste ha ett tydligt syfte.

Lösning:

Ge länken ett tillgängligt namn, till exempel med en synlig länktext eller ett aria-label.

På denna sida finns en instruktion för att testa tillgängliga namn: https://www.properaccess.nl/blog/sc-4-1-2-wat-betekent-naam-rol-waarde/.

Issue nr. 69 - Felaktig språkinställning för sidan

När det engelska språket väljs med en språkväxlare blir sidans primära språk engelska, men språkkoden i lang-attributet på html-elementet förblir inställd på nederländska (lang="nl").

När sidans språk inte är korrekt fastställt läses innehållet upp med felaktiga uttalsregler. Därför blir texten svårare att förstå för skärmläsaranvändare.

Lösning:

Se till att sidans språk är inställt på engelska (lang="en"), så att hjälpmedel kan läsa upp innehållet på rätt sätt.

Issue nr. 70 - Knappfunktion saknas

På denna sida finns i avsnittet "Forecast for your location" en klickbar uppspelningsikon utan textalternativ. När en knapp enbart består av en bild måste textalternativet beskriva knappens funktion. Det är inte fallet här.

Lösning:

Förse knappen med ett textalternativ som beskriver funktionen, till exempel via ett aria-label eller ett textalternativ när ikonen är ett <img>-element.

När knappen aktiveras och ändras till en pausikon måste textalternativet ändras i takt med knappens funktion.

Issue nr. 71 - Inmatningsfält utan tillgängligt namn

På denna sida saknar skjutreglaget i avsnittet "Forecast for your location" tillgängligt namn.

Därför är det inte tydligt för skärmläsaranvändare vad syftet med skjutreglaget är och vilket värde som justeras.

Lösning:

Ge skjutreglaget ett tillgängligt namn i koden, till exempel genom att koppla ett -element till inmatningsfältet eller genom att använda ett passande aria-label eller aria-labelledby-attribut.

Issue nr. 72 - Otillräcklig färgkontrast för skjutreglage

På denna sida finns under avsnittet "Forecast for your location" ett skjutreglage. Det ljusgrå (#E3E7ED) skjutreglaget har på den vita bakgrunden ett kontrastförhållande på 1,2:1. Detta är lägre än det minimala kontrastförhållandet på 3,0:1 som krävs för grafiska element.

Lösning:

Se till att skjutreglaget har ett kontrastförhållande på minst 3,0:1 gentemot bakgrunden.

Issue nr. 73 - Dragspelsknapp har felaktig roll

På denna sida finns, när den visas på en liten skärm, en komponent med dolt innehåll "Filter". Elementet som öppnar och stänger detta innehåll har inte rollen knapp.

Texten som öppnar och stänger dragspelskomponenten fungerar som knapp och måste därför vara markerad som knapp i koden.

Lösning:

Använd ett rubrikelement med ett button-element inuti.

Issue nr. 74 - Status för dragspel saknas i koden

På denna sida finns, när den visas på en liten skärm, en komponent med dolt innehåll "Filter". Det öppna eller stängda tillståndet är visuellt synligt men inte fastställt i koden.

Därför får skärmläsare ingen information om dragspelskomponentens status. Pilikonen som indikerar att dolt innehåll finns har inte heller något textalternativ.

Lösning:

Använd attributet aria-expanded på knappen som öppnar och stänger komponenten. Ett alternativ är att lägga till visuellt dold text som beskriver sektionens tillstånd.

Issue nr. 75 - PDF utan dokumenttitel

Detta PDF-dokument saknar dokumenttitel i filegenskaperna.

När en dokumenttitel saknas visas i PDF-läsarens titelrad vanligtvis bara filnamnet, till exempel document123.pdf. Därför är det inte direkt tydligt vad dokumentets innehåll är.

En dokumenttitel måste därför ställas in i PDF-metadata, även när det redan finns en synlig titel på första sidan.

Detta problem förekommer även vid PDF-dokumentet på: https://s3-eu-central-1.amazonaws.com/luchtmeetnet-public-acc/07d6e2e4-14f1-413f-905e-3ffc2daf410f/D084E589-1AFD-42C7-AED6-58D738A2297C.pdf.

Lösning (i Adobe Acrobat):

1. Öppna PDF-dokumentet i Adobe Acrobat 2. Gå till Arkiv > Egenskaper 3. Öppna fliken Beskrivning 4. Fyll i fältet Titel med en beskrivande titel, till exempel: "Rapporteringskorrigeringar". 5. Klicka på OK och spara filen.

Issue nr. 76 - Liststruktur saknas i taggar

I detta PDF-dokument finns på sida 8 under "2024-12-17 Veranderd" en lista med tre objekt. I taggarna är denna lista felaktigt markerad med två L-taggar.

Innehåll som ser ut som en lista måste också vara markerat som lista i taggarna. Därmed förmedlas den korrekta strukturen till skärmläsare och dessa kan annonsera antalet objekt korrekt.

Lösning:

Markera listan med en L-tagg och använd en Li-tagg för varje listobjekt.

Issue nr. 77 - Bilder utan textalternativ

Detta PDF-dokument innehåller på sida 1 en bild utan textalternativ.

Bilder som är markerade med en Figure-tagg måste alltid ha ett textalternativ. Utan detta textalternativ läser skärmläsare bara upp "bild".

Lösning:

Lägg till ett passande textalternativ för de informativa bilderna i PDF-dokumentets taggar.

Issue nr. 78 - Rubriker inte markerade som rubrik

I detta PDF-dokument finns flera rubriker som inte är markerade som rubrik i taggarna, såsom "Datavalidatie luchtkwaliteit WWW.LUCHTMEETNET.NL", "Datavalidatie luchtkwaliteit", "De datavalidatie is in te delen in 4 stappen:" och "Negatieve waarden".

Därför avviker strukturen i taggarna från dokumentets visuella struktur.

Lösning:

Ersätt P-taggen med en passande H1- till och med H6-tagg, så att taggstrukturen överensstämmer med den visuella strukturen.

Issue nr. 79 - Lista felaktigt markerad

I detta PDF-dokument finns under "De datavalidatie is in te delen in 4 stappen:" en lista med fyra objekt. I taggarna är denna lista markerad med flera L-taggar.

Därför överensstämmer inte listans struktur med dokumentets visuella struktur.

Lösning:

Markera listan med en L-tagg och en Li-tagg per objekt.