Rapport över tillgänglighetsproblem skane.se - Öppna data 2025-01-13

Beskrivning och lösningsförslag:

Kartbilderna ligger i div-element med tabindex="0", vilket gör att de ingår i den sekventiella navigeringen och är fokuserbara via tangentbordsgränssnitt. Fokuserbara element bör ha begripliga maskinläsbara namn, eftersom de blir upplästa av skärmläsare när användaren navigerar till elementen.

Div-elementen har inget eget angivet namn, utan får sitt namn av innehållet. Det består i det här fallet av det namnlösa canvas-elementet med själva kartbilden samt två knappar vars innehåll är ett plustecken respektive ett minustecken. Resultatet blir att det fokuserbara div-elementet får namnet "+ -", vilket inte är särskilt beskrivande.

Rekommendationer

• Ge canvas-elementet ett identifierande textalternativ (se Ally-9652) och ett unikt id.
• Namnge det fokuserbara div-elementet med aria-labelledby som hänvisar till canvas-elementets id.

Beskrivning och lösningsförslag:

På en svenskspråkig sida läser användaren från vänster till höger. Om innehåll A visuellt befinner sig till höger om innehåll B kommer B "efter" A och kan behöva A som kontext för att vara begripligt.

Under avsnitten WMS-tjänst och Visualiseringstjänst presenteras vissa värden parvis:

I innehållet kommer språket före den information som visuellt ligger till vänster om språket. Det kanske inte orsakar problem med förståelsen, men är en onödig skillnad mellan vad som förmedlas till seende respektive icke seende användare.

Rekommendationer

• Förändra inte presentationsordningen med css på ett sätt som påverkar förståelsen.

Beskrivning och lösningsförslag:

Följsam formgivning (responsiv design) är i dag en hygienfaktor för webbplatser. Besökarna använder allt från "smarta" klockor som är några centimeter i fyrkant till väggmonterade jättedisplayer.

Lagkravet är att vertikalt skrollade webbsidor ska fungera ned till en vybredd på 320 css-pixlar utan att information eller funktion går förlorad och utan att kräva horisontell skrollning (med undantag för vissa typer av innehåll som har en en "naturlig" bredd).

Datakatalogen anpassar sig hjälpligt till smala vyer, men inte tillräckligt bra för att uppfylla lagkraven.

I en Iphone 12 (vybredd 390 css-pixlar, alltså större än minimkravet) ryms inte högra delen av sidan på displayen utan kräver horisontell skrollning för att man ska se plustecknen som indikerar de utfällbara områdena.

Långa url:er kan omfattas av undantaget för innehåll som "kräver tvådimensionell layout för att vara användbart eller begripligt" i SC 1.4.10. Men då får inte deras bredd göra att annat innehåll på sidan också expanderar till samma bredd och kräver horisontell skrollning för att bli nåbart.

Exempelvis bör Ladda ned-knappen för varje url placeras nedanför url:en och url:en bör få överskrida sidbredden i stället för att utöka den så att andra relevanta element också kräver sidoskroll.

Rekommendationer

• Se till att innehållet ryms vid en vybredd på 320 css-pixlar.
• Innehåll som kräver en viss bredd för att vara användbart, exempelvis långa url:er, får "sticka utanför" och kräva horisontell skrollning, men allt annat innehåll ska rymmas inom vybredden.

Beskrivning och lösningsförslag:

Knapparna som expanderar och kollapsar avsnitt har alla namnet "Mer information". En användare med skärmläsare, som navigerar med Tab, får bara höra "Mer information, knapp, stängd" för var och en.

Rekommendationer

• Ange identiteter för beskrivningarna före knapparna och koppla dem med aria-labelledby till tillhörande knapp.

<h2 id="d1">Skånes flerkärniga ortsstruktur</h2>
<button id="d1b" aria-label="Mer information" aria-labelledby="d1 d1b" aria-expanded="true">
  ...
</button>

Beskrivning och lösningsförslag:

Att använda ARIA-attribut, inklusive role, gör ingenting annat än att förmedla löften till hjälpmedel. Det påverkar inte utseendet och ändrar inte beteendet hos ett element. Det är utvecklarens fulla ansvar och skyldighet att infria ARIA-löften.

Vissa div-element, som borde vara dt i en beskrivningslista (se U305), har av någon anledning role="button". Det gör dem inte till knappar och det fungerar inte att aktivera dem med Enter eller mellanslag. "Knapparna" är fokuserbara med hjälp av tabindex="0" och visar informationsrutor när elementet får fokus.

Rekommendationer

• Använd inte role="button" på element som inte ser ut och fungerar som en knapp.

Beskrivning och lösningsförslag:

Personer som använder röststyrning hänvisar till interaktiva element via elementens maskinläsbara namn. När namnet inleds med ett osynligt eller icke uttalbart tecken blir detta svårare, eller till och med omöjligt. Röststyrningsprogramvara har vanligen ytterligare funktioner för att identifiera element, men dessa är omständligare och mer tidskrävande än att använda namnet.

Texten i många knappar i gränssnittet inleds med ett "hårt" mellanslag (U+00A0, NO-BREAK SPACE,  ). Tecknet går inte att uttala och kan försvåra användning med röststyrning, helt i onödan.

Rekommendationer

• Inled inte knapptexten med osynliga eller icke uttalbara tecken.
• Använd css (padding-left) om syftet är att öka utrymmet på vänster sida av knappen.

Beskrivning och lösningsförslag:

Html-elementtyper som förmedlar en viss semantik ska användas för att märka upp innehåll med denna semantiska betydelse. Sekvenser av sammanhörande element av samma typ utgör ofta en lista och ska då märkas upp med någon av de listelementtyper som finns i html. Innehåll som inte utgör en lista ska inte märkas upp som listor.

Listor där elementen består av nyckel/värde-par eller termer och definitioner ska använda elementtypen dl (beskrivningslista), med dt för nycklar/termer och dd för värden/definitioner.

Med rätt märkning kan hjälpmedel förmedla relevant information till användaren och underlätta navigering. En skärmläsare kan säga "lista med 17 element" och användare kan ta ställning till om det är värt att få listan uppläst. Om inte, kan de med en knapptryckning hoppa förbi listan. Det fungerar förstås inte om listan inte är märkt som en lista.

Vissa beskrivningslistor är korrekt uppmärkta: de som ligger först i varje utfällbart avsnitt på översta nivån (indikeras med en grön prickad kontur i skärmavbildningen nedan). Andra är märkta med semantiskt meningslösa div-element (indikeras med en röd streckad kontur).

Rekommendationer

• Märk alla nyckel/värde-listor som beskrivningslistor (dl).

Beskrivning och lösningsförslag:

Vissa element visar en "popover" med information när elementet får fokus.

Det går inte att avfärda informationsrutan utan att flytta fokus, trots att den skymmer annat innehåll.

Rekommendationer

• Gör det möjligt att avfärda informationsrutorna med Esc-tangenten.

Beskrivning och lösningsförslag:

Detta krav tillkom i WCAG 2.2 och är således inte ett lagkrav för närvarande.

Klickbara element ska ha en storlek på minst 24x24 pixlar, alternativt ligga på sådant avstånd från varandra att det motsvarar den storleken.

Zoom-knapparna i kartfunktionen är något mindre än minimikravet - 22x22 pixlar - och ligger dikt an mot varandra.

Rekommendationer

• Gör knapparna minst 24x24 pixlar.

Beskrivning och lösningsförslag:

Skärmläsare använder lang-attribut i koden för att, vid behov, växla talsyntes för korrekt uttal av ord och fraser på andra språk än omgivande text. Det finns ingen mekanism i html för att ange att attributvärden har ett annat språk än elementets innehåll.

Licensinformationen för Creative Commons har flera språkproblem:

• Namnet "Create Commons" är inte angivet som engelska.
• Namnet på själva licensen är angivet som engelska, men har ett title-attribut med en lång förklaring på svenska.

Flera skärmläsare har en inställning för om den ska läsa upp title-attribut, eftersom de missbrukats under lång tid av oseriösa aktörer. Standardvärdet brukar vara "av", men användare kan ändra inställningen efter eget önskemål. I det här fallet innebär det att skärmläsaren läser upp den svenska titeln med engelsk (amerikansk) talsyntes, vilket blir helt obegripligt.

Rekommendationer

• Använd ett underordnat span-element med lang="en" för den information som är på engelska: "Creative Commons" och "CC BY 4.0 (Attribution)".
• Låt språket vara svenska på elementet som har det förklarande title-attributet.
• Ännu hellre: använd inte title för så pass viktig information, utan exempelvis:

<details>
  <summary lang="en">CC BY 4.0 (Attribution)</summary>
  <p>Licensgivaren tillåter dig att dela (kopiera och vidaredistribuera
  oavsett medium eller format) samt att bearbeta (remixa, transformera,
  och bygga vidare på) materialet för alla ändamål, även kommersiellt.
  Du måste ge ett korrekt erkännande, ange en hyperlänk till licensen
  och ange om bearbetningar är gjorda.</p>
</details>

Beskrivning och lösningsförslag:

Tjänsten använder en dekorativ ikon i form av en stiliserad jordglob före koordinaterna som beskriver den omskrivande rektangeln för det geografiska området som en datamängd avser.

Ikonen infogas med css via pseudoelementet ::before och består av ett tecken (U+F0AC) från ett område i Unicode reserverat för privat användning. Det är alltså ett tecken som saknar definierad betydelse.

Ikonen fungerar som visuell indikator, men tillför inget av värde för den som inte kan se den. Den förmedlas ändå till hjälpmedel, även om en skärmläsare inte kan läsa upp det okända tecknet.

(Det här görs korrekt i nedladdningsknapparna.)

Rekommendationer

• Dölj span-elementet för hjälpmedel med hjälp av aria-hidden="true".
• I webbläsare som har stöd för det kan ni även förmedla ett tomt textalternativ till ikonen via css:

@supports (content:"foo" / "bar") {
  .fa-globe::before {
    content: "\f0ac" / "";
  }
}

Beskrivning och lösningsförslag:

Kartbilderna är canvas-element som inte förmedlar någon information till hjälpmedel. Kartor och kartfunktioner är undantagna från tillgänglighetskraven i DOS-lagen, men SC 1.1.1 ställer ändå krav på att det ska finnas ett textalternativ som åtminstone identifierar innehållet.

Rekommendationer

• Ge canvas-elementen maskinläsbara namn som identiferar innehållet, exempelvis aria-label="Kartbild, Skånes flerkärniga ortsstruktur.".

Beskrivning och lösningsförslag:

De utfällbara avsnitten har ett nav-element, med en implicit landmärkesroll (navgation). Samtliga har namnet "pagination" via aria-label. Landmärken behöver ha unika namn för att vara till någon nytta.

Såvitt vi kan se är alla nav-elementen dolda, både visuellt och från hjälpmedel, så problemet är akademiskt. Om de ska göras synliga i framtiden behöver dock problemet åtgärdas.

Rekommendationer

• Ge varje pagineringselement ett särskiljande namn.

Beskrivning och lösningsförslag:

En ledtext (label) är avsedd att kopplas till en formulärkontroll för att beskriva den. Ledtexter som inte är kopplade till formulärkontroiler gör ingen nytta och saknar logik.

Nycklarna i koordinaterna för det geografiska områdets omskrivande rektangel är märkta som label trots att värdena är vanliga span-element.

Rekommendationer

• Märk sekvenser av nyckel/värde-par som en beskrivninglista (dl).
• Använd eventuellt role="presentation" eftersom listmetainformationen inte är särskilt användbar i det här fallet.

Beskrivning och lösningsförslag:

Hela behållaren med de expanderbara datakällorna är en ”levande region” med aria-live="polite". Det gör att allt innehåll som infogas i den – inklusive dess underordnade element – omedelbart blir uppläst av en skärmläsare. Det medför ett väldigt tjatter när man expanderar en datakälla.

Jämför med hur html:s inbyggda expanderbara element (details) fungerar. En skärmläsare talar bara om att elementet är expanderat och fokus stannar kvar på summary-elementet. Användaren kan sedan fortsätta navigera därifrån i lugn och ro (eller säga åt skärmläsaren att läsa allt från aktuell position, om de föredrar det).

Rekommendationer

• Använd inte aria-live på regioner där det infogas stora mängder information, om det inte är viktig information som användaren behöver få kännedom om genast.
• Varför inte använda details i stället för att uppfinna hjulet på nytt? Det går utmärkt att formge det och summary så att det ser ut precis som nuvarande lösning (även om vi rekommenderar att inte lura användaren genom att få sammanfattningen att se ut som en länk, inklusive handpekare).
• Eftersom behållaren populeras med datakällor dynamiskt, sätt aria-busy="true" på den (eller på body) tills den är färdigpopulerad, för att indikera för hjälpmedel att innehållet undergår uppdatering.