Rekommendationer för mobil tillgänglighetLänk hit

• 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.

Visa det viktigaste innehållet tidigtLänk hit

Tänk på att små skärmar eller fönster, liksom större skärmar med låg upplösning, ställer högre krav på en genomtänkt prioritering av de aktiviteter och innehåll som användaren ska mötas av. Det som är viktigast för användaren måste lyftas fram tidigt i gränssnittet.

Små skärmar ökar också kraven på att rubriker och texter är korta och begripliga.  Se även R10. Ge all information på begriplig svenska som är minst lika viktigt i mobila sammanhang som annars.

Anpassa innehållet till små skärmarLänk hit

Använd gärna responsiv design (följsam webbdesign). Då anpassas webbsidan automatiskt efter hur stor skärmen är på användarens enhet (om denna har stöd för CSS media queries). Se även R91 Skapa en flexibel layout.

Tänk på att:

• Skriva så korta texter som möjligt. Gå rakt på sak och undvik information som inte behövs. Dubblera inte information på flera ställen, till exempel i brödtext respektive puff. Publicera helst text i html, inte som dokument. Stora filer tar lång tid att ladda ner till mobiler och påverkar både bandbredd och surfkostnad för användarna. Beskriv filerna så bra du kan så att användaren kan ta ställning till om det är mödan värt att öppna filen. Se R88. Publicera i första hand dokument i HTML.
• Referera inte till grafiska placeringar. Undvik beskrivningar som ”Läs i puffen till höger”, ”se texten nedan” och så vidare. Hänvisa istället till rubriknamn eller gör en ankarlänk inom sidan.
• Välj att anpassa bilders storlek automatiskt (för olika skärmstorlekar och upplösningar) och ange mellanrum i procent.
• Gör inte webbplatsen beroende av att användaren kan föra en pekare över en yta (motsvarande funktionerna mouseover eller hover) eftersom detta inte alltid är möjligt på till exempel pekskärmar.
• Testa alltid hur din text kommer att se ut på en liten skärm.

Anpassa funktionaliteten till små skärmarLänk hit

Se till att funktionerna stämmer överens med enheterna. Presentera till exempel endast den mobila e-legitimationen för mobila användare eftersom det bara är den lösningen som är relevant. Underlätta gärna genom att starta den mobila säkerhetsapplikationen vid inloggning och eventuell underskrift.

Tangentbordet i mobila enheter ska vara anpassat till de inmatningsfält som användaren ska fylla i. Förväntas användaren till exempel fylla i en e-postadress och webbadress måste @-tecken och snedstreck finnas med. Om användaren ska fylla i telefonnummer ska tangentbordet innehålla siffror samt exempelvis plus-tecken för landsnummer. I HTML5 finns ett standardiserat sätt att anpassa inmatningsfält efter förväntat innehåll.

Se till att användargränssnittskomponenter (länkar, knappar, kryssrutor och andra interaktionselement) inte är placerade för tätt intill varandra, eftersom precisionen vid fingerstyrning inte blir lika hög som med musanvändning.

Se till att det går att zoomaLänk hit

Användaren kan zooma till exempel genom att minska och förstora med hjälp av fingrarna på en pekskärm. Upplys när tjänsten fungerar smidigare på en större skärm, om tjänsten är så komplex att ni inte kan erbjuda en optimal lösning för små skärmar.

Använd inte ramarLänk hit

Det finns många nackdelar med ramar (som i HTML kallas för frames eller iframes). Se R94. Använd inte ramar. När många förväntas använda mobila gränssnitt är detta särskilt aktuellt. Många funktioner och tjänster som infogas via ramar är inte utvecklade med tanke på små skärmar. Om webbplatsen trots allt använder ramar bör därför en möjlighet ges att öppna ramens innehåll på ett sätt som gör åtminstone hela skärmen tillgänglig – till exempel med en vanlig länk.

Gör det enkelt att skapa bokmärke/genväg till webbplatsenLänk hit

Berätta gärna för användarna hur man lägger till ett bokmärke på den mobila enhetens skärm. Det gör att bokmärket upplevs som en app-symbol/ikon och gör det enkelt för användaren att komma åt tjänsten eller webbplatsen på samma sätt som en app. Då blir det enklare för användaren att hitta tillbaka.

ExempelLänk hit

Skatteverket har anpassat en del av sina e-tjänster, till exempel Skattekonto.

Sveriges Television har utvecklat sin webbplats SVTPlay med responsiv design vilket gör att den fungerar bra i mobila enheter.

MätbarhetLänk hit

• Analysera användarnas beteenden i mobila enheter med hjälp av statistikprogram.  Var dröjer sig användarna kvar? På vilka sidor lämnar användare tjänsten utan att komma till avslut? Har mobilanpassningen lett till ökad användning av tjänsten?
• Testa användbarheten tidigt i utvecklingen, gärna med hjälp av prototyper och slutanvändare. Kan användarna enkelt navigera och lösa de viktigaste uppgifterna? Fungerar tjänsten för olika fingerstorlekar? Se vidare R34. Gör länkar och klickbara ytor enkla att använda för alla.
• Testa webbplatsen i olika enheter och webbläsare. Det finns webbaserade verktyg som kan användas för att testa hur en webbplats ser ut med olika skärmupplösningar.
• Följ upp med enkäter och gör det lätt för användaren att ge synpunkter i tjänsten.

TerminologiLänk hit

Datatermgruppen rekommenderar följsam design, men direktöversättningen responsiv design är än så länge betydligt vanligare.

Uttrycket mobile first innebär att man först designar ett system för mobila enheter. Tanken är att det medför ett fokus på det viktigaste, vilket är positivt även för resten av systemet.