Digitala riktlinjer

Digitala gränssnitt

Det är genom digitala gränssnitt som människor kommunicerar med digital teknik, som till exempel på en webbplats eller i en e-tjänst. Gränssnittet kan bestå av knappar, menyer, ikoner, textfält, ljudkommandon eller gester. Strängnäs kommun ska utforma digitala gränssnitt utifrån följande:

Användarvänlighet

• Gränssnittet ska vara enkelt och intuitivt, även för nya användare.

• Texten ska vägleda användaren och göra nästa steg tydligt.

• Ge relevant information – vad behöver användaren veta just nu?

Tillgänglighet

• Det ska fungera för alla användare, även personer med funktionsvariationer.

Konsekvens

• Använd samma termer och fraser genom hela gränssnittet.

• Använd enhetliga färger, ikoner och typsnitt.

Responsivitet

• Gränssnittet ska fungera på alla enheter och i alla storlekar, från mobil och läsplatta till dator.

Kort och tydligt språk

• Skriv kort, effektivt och enkelt.

• Använd aktiva verb som tydligt säger vad användaren ska göra (till exempel: skicka, spara).

Lätt att agera

• Knappar ska vara kortfattade och handlingsorienterade (till exempel: spara, bekräfta, avbryt).

• Ge tydliga instruktioner om vad som händer efter ett klick.

Felmeddelanden

• Förklara varför något gick fel och hur användaren kan lösa det.

• Undvik tekniska meddelanden som användaren inte förstår.

Testa med användare

• Testa texter och instruktioner med riktiga användare.

• Gör justeringar baserade på deras feedback.

Digital tillgänglighet

Digital tillgänglighet betyder att alla människor ska kunna använda digitala tjänster, oavsett om man ser, hör eller använder tangentbord istället för mus. Strängnäs kommun ska utforma webbplatser, appar och digitala system så att de fungerar för alla enligt DOS-lagen. Det betyder bland annat:

Navigering

• Allt ska gå att använda med tangentbordet.

• Det ska synas var på en webbsida var tangentbordets fokus är när man tabbar mellan element.

• Tab-ordningen ska vara logisk och enkel.

Knappar och funktioner

• Knappar ska heta samma sak överallt. Till exempel ska en skicka-knapp alltid heta "skicka", aldrig "sänd" på vissa sidor.

• Texten på knappar ska stämma med kodens namn för skärmläsare och röststyrning.

Struktur och kod

• Innehåll ska ha logisk ordning.

• Använd rätt kod för rubriker, listor och länkar.

• Hjälpmedel ska kunna läsa upp allt korrekt.

Responsivitet

• Sidan ska fungera likadant oavsett om man surfar via dator, surfplatta, smartphone eller förstorar innehållet med zoom.

Innehåll

• Texter ska ha bra kontrast för läsning.

• Film ska ha textning med valbar storlek.

• Sidor ska kunna läsas upp av skärmläsare.

• Funktioner för tillgänglighet ska vara lätta att hitta.

På vår sida Tillgänglighetsredogörelser finns en översikt över de webbplatser och tjänster som ingår i Strängnäs kommuns digitala service och som omfattas av lagen om tillgänglighet till digital offentlig service.

Digitala formulär

Ett digitalt formulär låter användaren fylla i information, till exempel för en ansökan, en beställning eller för att ge feedback. Vi följer de webbriktlinjer som Digg (Myndigheten för digital förvaltning) har specificerat.

Logisk fokusordning

Innehållet ska följa en meningsfull ordning, oavsett om användaren läser, använder skärmläsare eller tabbar mellan länkar och knappar.

Konsekvent benämning

Samma funktion ska alltid ha samma namn. Till exempel ska en skicka-knapp alltid heta "skicka", aldrig "sänd" på vissa sidor.

Text på knappar och länkar

Synlig text på knappar och länkar ska stämma med kodens namn, så att skärmläsare och röststyrning fungerar på samma sätt som visuella användare.

Möjlighet att ångra och korrigera

Användaren ska kunna ändra, ångra eller bekräfta information innan den skickas, särskilt om det handlar om känslig eller viktig data.

Tydliga felmeddelanden

Fel ska visas tydligt och vara enkelt att förstå, så att användaren lätt kan rätta till det och fortsätta.

Ange syfte för formulärfält i koden

Text i formulärfält ska vara maskinläsbara, så att hjälpmedel kan förmedla syftet och användaren kan fylla i korrekt.

Komponenter som fungerar med hjälpmedel

Allt innehåll som finns på en webbplats ska kunna tolkas och läsas upp av en skärmläsare. Som till exempel att bilder har alt-texter.

Skapa PDF:er

En PDF (Portable Document Format) är ett digitalt dokument som bevarar dokumentets layout och innehåll oavsett vilken dator, surfplatta eller mobil som används. PDF:er behöver vara tillgänglighetsanpassade så att alla kan ta del av innehållet, även om man använder skärmläsare eller andra hjälpmedel. Så här skapar man tillgängliga PDF:er:

Använd korrekta mallar i grunden

För att kunna spara en tillgänglig PDF måste grunddokumentet ha rätt formatering av rubriker och brödtext (H1, H2, H3 och så vidare), för att strukturen ska bli maskinläsbar och hjälpmedel som skärmläsare kan tolka dokumentet korrekt. 

Tydliga rubriker och ordnade listor

Strukturen i dokumentet ska vara lätt att förstå så att användaren hittar rätt information och enkelt kan navigera i innehållet.

Alternativtext 

Alternativtext (alt-text) är en beskrivning av en bild och är nödvändig för att den som inte ser ska kunna ta till sig innehållet i en bild.

Maskinläsbar text

Använd inte text i form av bilder.

Formulärfält

Använd tydliga tabeller och etiketter för formulärfält.

Kontrast och läsbarhet

Kontrollera att kontrasten mellan text eller bild är tillräckligt stor mot bakgrunden. Tänk också på att storleken på texten inte får vara för liten och små detaljer kan försvinna på beroende på användarens skärms upplösning.

Ikoner

Kommunen använder Font Awesome Pro som bibliotek för ikoner. Enkelt beskrivet fungerar Font Awesome som ett typsnitt där bokstäverna är ersatta med ikoner. Det är skapat med open source, är fritt att använda och bäddas enkelt in i html-koden. Mer information finns på Font Awesomes webbplats.