Appar & responsiv webb

Funderar du på att bygga en app bör du först överväga för- och nackdelar med app och webb. Har du bestämt dig för att bygga en app är det viktigt att den blir tillgänglig, en bra start är att följa grundläggande rekommendationer för appar. Om din app omfattas av DOS-lagen, måste du se till att appen uppfyller kraven på tillgänglighet.

Följande webbriktlinjer är särskilt relevanta för appar:

Visa som kompakt lista

Prio Motsvarar i WCAG Nr. Riktlinje Status
DOS-krav 1.3.1 (A) R121 Ange i kod vad sidans olika delar har för roll
  • R105. Skapa rubriker med h-element
  • R104. Använd rätt html-element när ni gör listor
  • Namnge formulärfält med kopplade label-element. Se R55. Skapa tydliga och klickbara fältetiketter.
  • R98. Skriv rubriker till tabeller
  • R101. Markera obligatoriska fält i formulär
  • Betona innehåll med elementet em och inte bara kursivering, eftersom det inte går att kursivera skärmläsarens tal.
  • Använd WAI-ARIA för sådant som inte går att uttrycka med vanlig html.
DOS-krav 3.1.1 (A) R141 Ange sidans språk i koden
  • Ange huvudspråk med hjälp av lang-attribut på sidans rot-element.
1 R111 Anpassa webbplatsen även för små skärmar
  • Visa det viktigaste innehållet tidigt.
  • Anpassa innehållet till små skärmar.
  • Anpassa funktionaliteten till små skärmar.
  • Se till att tjänsten går att zooma.
  • Använd inte ramar.
  • Gör det enkelt att skapa bokmärke/genväg till webbplatsen.
DOS-krav 1.4.1 (A) R124 Använd inte enbart färg för att förmedla information
Komplettera betydelsebärande färgskillnader med någon annan synlig skillnad:
  • Ikoner eller liknande grafiska element kan ibland passa som komplement till färgskillnader.
  • Färgskillnader mellan textelement kan kompletteras med understrykning, ram, fetstil, kursivering eller annat teckensnitt. Var särskilt noga med att framhäva länkar.
  • Färgskillnad mellan ytor i bland annat kartor och diagram kan kompletteras exempelvis med mönster, inramning, kontrastskillnad eller text.
  • Linjer kan exempelvis göras streckade, prickade, prickstreckade eller dubbeldragna.
  • Ibland behöver färgskillnader kompletteras med skriven text som ger motsvarande information.
  • Semantisk kodning är ofta ett bra men otillräckligt komplement: Skärmläsare presenterar ofta den semantiska informationen, men det är inte alla användare som har skärmläsare.
Var särskilt försiktig med färgerna grön, röd och brun. Många personer med färgblindhet har svårt att särskilja dessa.
DOS-krav 1.4.5 (AA) R128 Använd text, inte bilder, för att visa text
När bilder trots allt behöver innehålla text kan denna ofta göras tillgänglig för alla genom att:
  • Använda CSS för att placera text i bilden, istället för att ha texten avbildad.
  • Generera bilden dynamiskt med hänsyn till användarens preferenser för teckensnitt, storlek och förgrund- eller bakgrund. Observera att detta kan kräva en del programmering och att sidan kan behöva innehålla kontroller för att ställa in sådana preferenser. Komplettera med en alt-text.
  • Skriv alt-text till knappar, logotyper, skärmdumpar och diagram som förmedlar samma information som bilden.
  • En bild av ett handskrivet brev kan ha antingen en alt-text som återger innehållet eller en kompletterande text med samma funktion.
DOS-krav 1.4.3 (AA) R126 Använd tillräcklig kontrast mellan text och bakgrund
  • Lita inte på automatisk granskning av kontraster
  • Överträffa gärna gränsvärdena för kontrast
  • Överväg att låta användaren välja kontraster
DOS-krav 1.4.11 (AA) R156 Använd tillräckliga kontraster i komponenter och grafik
  • Ge gränssnittskomponenter tydliga visuella gränser.
  • Gör helst även inaktiva element urskiljbara för alla.
  • Använd god kontrast för informationsbärande delar av illustrationer och annat grafiskt innehåll, så långt det är rimligt.
DOS-krav 1.1.1 (A) R115 Beskriv med text allt innehåll som inte är text
  • Välj detaljnivå efter användarens behov
  • Använd tomt textalternativ (alt="") till dekorativa bilder
  • Anpassa textbeskrivningen efter eventuell synlig bildtext
  • Undvik upprepningar genom att provlyssna
DOS-krav R167 Bevara tillgänglighet vid konverteringar
  • Kartlägg om någon konvertering av information förekommer i er digitala service.
  • Se till att tillgänglighetsinformation bevaras i konverteringen, om det är möjligt.
DOS-krav R172 Dokumentera tillgänglighetsfunktioner
  • Dokumentera tillgängligheten
    • Beskriv tillgänglighetsfunktioner vid behov
    • Gör tillgänglighetsfunktioner lätta att hitta
    • Offentliga aktörer ska ha en tillgänglighetsredogörelse
  • Gör dokumentationen tillgänglig
    • Se till att tillgänglighetsdokumentation uppfyller tillgänglighetskrav
    • Gör tillgänglighetsdokumentationen lätt att hitta
DOS-krav 1.2.1 (A) R116 Erbjud alternativ om en inspelning enbart består av ljud eller video
  • Erbjud ett textbaserat manus eller någon annan presentation som inte utestänger användare som saknar förutsättningar att uppfatta inspelningen.
DOS-krav 2.5.1 (A) R160 Erbjud alternativ till komplexa fingerrörelser
  • Se till att all funktionalitet går att utföra med flera fingrar även går att utföra med bara ett finger
DOS-krav 2.5.4 (A) R163 Erbjud alternativ till rörelsestyrning
  • Se till att funktioner som kan hanteras med rörelsestyrning även kan hanteras på något annat sätt.
  • Gör det möjligt att stänga av rörelsestyrningen.
DOS-krav 1.4.2 (A) R125 Ge användaren möjlighet att pausa, stänga av eller sänka ljud
  • I de flesta fall är det lämpligt att undvika att spela ljud automatiskt.
  • I andra hand kan det vara lämpligt att erbjuda en pausfunktion i början av sidan.
DOS-krav 2.2.1 (A) R131 Ge användarna möjlighet att justera tidsbegränsningar
  • För vissa användare och i vissa sammanhang behövs gott om tid för att använda digitala tjänster. Ge därför användare möjlighet att stänga av, anpassa eller utöka eventuella tidsbegränsningar, om det inte är orimligt för att uppnå sajtens syfte.
DOS-krav 2.2.2 (A) R132 Ge användarna möjlighet att pausa eller stänga av rörelser
  • Om en animation eller dynamisk uppdatering startar automatiskt och pågår i mer än 5 sekunder ska användaren enkelt kunna undvika den.
DOS-krav 3.3.3 (AA) R149 Ge förslag på hur fel kan rättas till
  • R52. Fyll formulär med kända uppgifter
  • R57. Låt användarna fylla i information i valfritt format
  • R101. Markera obligatoriska fält i formulär
  • R112. Ge ordförslag i sökning och inmatningsfält
DOS-krav 3.3.4 (AA) R150 Ge möjlighet att ångra, korrigera eller bekräfta vid viktiga transaktioner
Erbjud användarna minst en, men gärna fler, av följande skyddsåtgärder:
  • Möjlighet att ångra sin åtgärd.
  • Möjlighet att rätta till möjliga fel som systemet identifierat.
  • Möjlighet att förhandsgranska sina uppgifter och rätta eventuella fel innan åtgärden slutligen bekräftas.
5 R90 Gör det enkelt att ringa upp telefonnummer
  • Markera telefonnummer i koden som telefonlänkar (tel:). Det ger möjlighet att direkt ringa upp numret, på samma sätt som e-postlänkar (mailto:) ger möjlighet att skicka e-post.
  • Ange det fullständiga telefonnumret, inklusive det internationella prefixet, i länken – även om det nummer som visas på sidan bara innehåller den lokala delen. Då fungerar länken oavsett varifrån användaren ringer.
  • Överväg att använda strukturerade data även när telefonnummer inte är länkade.
DOS-krav 2.5.2 (A) R161 Gör det möjligt att ångra klick
  • Ge i första hand användaren möjlighet att ångra åtgärden innan nedtryckningen upphör (up-eventet).
  • Ge i andra hand användaren möjlighet att ångra sig efter up-eventet.
  • Koppla bara i undantagsfall aktivering till nedtryckning av knappen eller skärmen (down-eventet).
DOS-krav 2.4.3 (A) R136 Gör en logisk tab-ordning
  • Kontrollera ordningen utan pekdon.
  • Säkerställ en logisk ordning med tabindex.
DOS-krav R166 Gör inte identifiering beroende av bara en biometrisk egenskap
  • Erbjud alternativ om identifiering med biometri används.
  • Välj bort system som bara erbjuder ett enda - biometriskt - sätt att identifiera sig.
DOS-krav 1.3.3 (A) R123 Gör inte instruktioner beroende av sensoriska kännetecken
Använd gärna sensoriska kännetecken (färg, form med mera) för instruktioner eftersom det kan vara en effektiv metod för att underlätta för användarna, inklusive personer med kognitiva begränsningar men kom ihåg att komplettera informationen så att alla kan förstå den.
1 R34 Gör länkar, klickbara ytor och menyer användbara för alla
  • Gör de klickbara ytorna tillräckligt stora. Det underlättar för användarna.
  • Framhäv länkarna grafiskt så att användarna förstår vad som är länkad text.
DOS-krav R165 Gör tillgänglighetsfunktioner åtkomliga
  • Undersök vilka tillgänglighetsfunktioner ni erbjuder.
  • Säkerställ att de som har nytta av funktionerna kan nå dem.
  • Blockera inte operativsystemets tillgänglighetsfunktioner.
DOS-krav 2.4.7 (AA) R140 Markera tydligt vilket fält eller element som är i fokus
Använd CSS för att tydligt visa vilket element som är i fokus.
DOS-krav 1.3.5 (AA) R154 Märk upp vanliga formulärfält i koden
  • Använd attributet autocomplete på inmatningsfält.
  • Beskriv förväntat innehåll med attributet autocomplete, om det finns en standardiserad benämning.
  • Ange autocomplete=”off” om det gäller känslig information eller om servern erbjuder ordförslag.
DOS-krav 2.3.1 (A) R133 Orsaka inte epileptiska anfall genom blinkande
Maximalt tre växlingar från ljus till mörk eller tvärtom inom en sekund är acceptabelt.
DOS-krav 1.4.13 (AA) R158 Popup-funktioner ska kunna hanteras och stängas av alla
  • Överväg att presentera innehållet på något annat sätt.
  • Gör det enkelt att ta bort innehållet.
  • Gör det möjligt att hantera innehållet för alla.
DOS-krav 1.3.2 (A) R122 Presentera innehållet i en meningsfull ordning för alla
  • Testa läsordningen genom att granska en sida av varje sidtyp med några skärmar i olika storlek och genom att lyssna igenom innehållet med en skärmläsare.
  • Se till att webbplatsen kan användas även utan stilmallar. Vissa webbläsare och tilläggsprogram har funktioner för att avaktivera CSS.
  • Se till och testa även att läsordningen är logisk i dokument som inte är html (pdf, word med mera) .
DOS-krav R170 Respektera användarens inställningar
  • Kom ihåg att vissa användare behöver skräddarsy presentationen.
  • Försök att inte hindra att användarens inställningar slår igenom.
    • Använd relativa måttenheter om det är möjligt
    • Var försiktig med css-uttrycket !important
DOS-krav 1.3.4 (AA) R153 Se till att allt innehåll presenteras rätt oavsett skärmens riktning
  • Använd bara i undantagsfall de tekniker som finns för att låsa skärmens riktning (exempelvis Screen Orientation API).
  • Se till att allt innehåll presenteras oavsett skärmens riktning.
DOS-krav 1.4.12 (AA) R157 Se till att det går att öka avstånd mellan tecken, rader, stycken och ord
  • Placera text i utrymmen som är tillräckligt stora eller som anpassar sig efter innehållet.
  • Ta hänsyn till att texter kan ändra storlek om du använder absolut positionering av element som riskerar att krocka med texten.
DOS-krav R169 Se till att eventuella samtalsfunktioner är tillgängliga
  • Säkerställ tillräcklig ljudkvalitet vid röstkommunikation.
  • Komplettera röstkommunikation med realtidstext.
  • Presentera den som "ringer" på mer än ett sätt.
  • Säkerställ tillräcklig kvalitet vid videokommunikation.
DOS-krav 4.1.1 (A) R84 Se till att koden validerar
  • Kontrollera att era mallar för funktioner, tjänster och stilmallar validerar i enlighet med er valda standard.
  • Kräv att leverantören vid leverans bifogar valideringsprotokoll för samtliga mallar. Mallar som inte validerar bör inte godkännas för leverans, om inte leverantören har acceptabla argument för alla valideringsfel.
  • Försök att automatisera en regelbunden kodvalidering, eller gör validering till en rutinåtgärd vid all förändring av webbplatsens kod. Det är lätt hänt att tidigare korrekt kod går sönder. Det kan till exempel hända när ni uppdaterar ett tilläggsprogram, när ni infogar en videospelare i ett blogginlägg eller när någon gör ett inlägg i ett kommentarssystem.
DOS-krav 2.1.2 (A) R130 Se till att markören inte fastnar vid tangentbordsnavigation
  • Testa alla webbplatser och applikationer utan mus och utan pekskärm, och se till att det går att använda alla funktioner som behövs.
DOS-krav R171 Se till att redigeringsfunktioner ger stöd för tillgänglighet
  • Välj eller utveckla redigeringskomponenter som underlättar produktion av tillgängligt innehåll.
  • Välj publiceringssystem som underlättar produktion av tillgängligt innehåll.
  • Välj om möjligt verktyg som uppfyller standarden ATAG.
DOS-krav 4.1.2 (A) R152 Se till att skräddarsydda komponenter fungerar i hjälpmedel
  • Använd i första hand standardkomponenter som finns i html. Då uppfyller du automatiskt detta krav. Bara när det finns starka skäl och tillräckliga resurser för test och utveckling bör skräddarsydda komponenter utvecklas.
  • Vid val av tilläggsprogram eller kodplattformar (till exempel olika javascript-bibliotek) behöver ni undersöka om eventuella komponenter som bygger på dessa plattformar har ett bra stöd för tillgänglighet.
DOS-krav 1.4.4 (AA) R127 Se till att text går att förstora utan problem
  • Kontrollera förstoring vid utveckling av stilmallar och sidmallar
  • Använd relativa mått
DOS-krav 2.5.3 (A) R162 Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter
  • Ta reda på vilken maskinläsbar etikett som används för kontrollen.
  • Se till att den maskinläsbara etiketten matchar den synliga.
  • Använd bara samma maskinläsbara etikett för flera kontroller om de gör exakt samma sak.
DOS-krav 1.4.10 (AA) R91 Skapa en flexibel layout som fungerar vid förstoring eller liten skärm
  • Undvik horisontell scrollning ner till 320 pixlars bredd.
  • Använd i första hand responsiv design.
  • Gör en anpassad mobilversion om responsiv design är inte är möjligt.
  • Även dokument som inte är webbsidor bör kunna presenteras i begränsad bredd.
DOS-krav 2.1.4 (A) R68 Skapa kortkommandon med varsamhet
  • Använd kortkommandon sparsamt.
  • Använd vedertagna tangentkombinationer om sådana finns.
  • Informera om vilka kortkommandon ni erbjuder.
  • Gör det möjligt att stänga av eller byta ut kortkommandon som bara består av ett tecken.
DOS-krav 3.3.2 (A) R55 Skapa tydliga och klickbara fältetiketter/ledtexter
  • Skriv tydliga och informativa fältetiketter/ledtexter
  • Koppla ihop fältetikett/ledtext och inmatningsfält så att även etiketten blir klickbar.
  • Placera fältetiketterna där användarna lätt ser dem.
  • Skriv utförliga instruktioner före formuläret, när sådana behövs.
  • Lösningen ska inte vara beroende av title-attribut och placeholder-texter.
DOS-krav 2.4.6 (AA) R61 Skriv beskrivande rubriker och etiketter
  • Använd nyckelord ur texten.
  • Skriv de viktigaste orden först.
  • Använd aktivt språk, gärna verb.
  • Gör inte rubrikerna längre än 5-10 ord.
DOS-krav 2.4.4 (A) R5 Skriv tydliga länkar
  • Formulera länktext med omsorg. Användaren måste kunna förutse vad som händer vid klick på länken.
  • Låt sammanhanget och syftet med länken avgöra om den exempelvis ska placeras i brödtexten eller utanför.
  • Utforma länkar till dokument och länkar till e-post så att användaren får rätt förväntningar.
1 1.2.3 (A) R118 Syntolka eller erbjud alternativ till videoinspelningar
  • Informera användaren om att det finns alternativ.
Observera att den som uppfyller R120 Syntolka videoinspelningar (som i WCAG 2.1 motsvaras av ett kriterium med den högre ambitionsnivån AA) även uppfyller den här riktlinjen, eftersom syntolkning är ett av alternativen på A-nivå.
DOS-krav 1.2.5 (AA) R120 Syntolka videoinspelningar
  • Se till att viktig visuell information framgår även av ljud
  • Följ riktlinjer för syntolkning
  • Anpassa syntolkningen efter rytmen i ordinarie innehåll
  • Gör det lätt att hitta och aktivera syntolkningen
  • Undersök alternativa lösningar
DOS-krav R173 Säkerställ tillgänglighet i kundtjänst
  • Kundtjänst och liknande ska kunna återge tillgänglighetsdokumentation
  • Kundtjänst ska kunna kommunicera tillgängligt
1 1.2.4 (AA) R119 Texta direktsändningar
  • Överväg direkttextning trots undantag i webbdirektivet
  • Informera om att det finns textning
DOS-krav 1.2.2 (A) R117 Texta inspelad rörlig media (video, ljud, animationer…)
  • Beskriv alla ljud av betydelse
  • Säkerställ att alla kan ta del av undertexter, allra helst valbara, så kallade dolda undertexter
  • Se till att det är lätt att hitta och aktivera undertexter
  • Erbjud gärna en separat textversion
DOS-krav R168 Utforma eventuella reglage så att alla kan använda dem
  • Ställ inte för höga krav på motorisk förmåga.
  • Gör det möjligt att avläsa aktuell inställning utan att ändra den.
  • Hjälp användaren att undvika oavsiktlig inmatning.
DOS-krav 3.2.1 (A) R143 Utför inga oväntade förändringar vid fokusering
  • Utför bara förändringar (till exempel öppning av fönster eller förändring av värde) när användaren förväntar sig dem.
DOS-krav 3.2.2 (A) R144 Utför inga oväntade förändringar vid inmatning
  • Utför bara förändringar (till exempel öppning av fönster eller förändring av värde) när användaren har anledning att förvänta sig dem.
DOS-krav 2.1.1 (A) R129 Utveckla systemet så att det går att hantera med enbart tangentbordet
Testa alla webbplatser och applikationer utan mus och utan pekskärm.
DOS-krav 3.3.1 (A) R2 Visa var ett fel uppstått och beskriv det tydligt
  • Sammanfatta felen och använd en layout som tydligt separerar felmeddelanden från resten av webbplatsens design.
  • Skriv välformulerade felmeddelanden så ökar chansen att användarna gör rätt från början.
  • Markera fel och felmeddelanden med WAI-ARIA så att de uppfattas tydligt av användare med hjälpmedel.
  • Spara det som inte är fel.
Exportera urval som csv