Gör din webbsida tillgänglig

När du vill göra din webbsida tillgänglig för fler

Några tips och tankar när du skapar en hemsida där fler personer med funktionsnedsättning ska kunna ta del av innehållet. Visst kan vi alla ha nedsatt funktion; När vi är trötta, när vi är stressade och när vi måste hantera mobilen med en hand. Läs gärna igenom alla tipsen och ta till dig de du kan. Varje förbättring underlättar för fler personer att ta till sig dig ditt budskap.
 
Dessa tips kommer mestadels från föreläsningar och möten hos Funka Nu.
Länkar i klartext

Varje länk ska bestå av en hel beskrivande text så att talsyntesprogrammen läser upp var länken leder till (exempel; Bli medlem , Mer om Queen Silvia Nursing Award och stipendiaten ). Länktext som bara består av ordet ”här” är i detta sammanhang värdelöst.

Bilder med beskrivande texter
Bilder som visas på hemsidan kan förser med beskrivande text. Utnyttja den möjligheten då de underlättar för personer med olika synsvårigheter att förstå vad bilden föreställer. Texten läses upp av talsyntesen.

Rubriksättning enligt html
Använd möjligheten till rubriksättning konsekvent och genomgående i hela webbportalen. I html finns 6 rubriknivåer (Rubriker <h1> – <h6>). Det gör att en person med synnedsättning kan välja vilka rubriknivåer som måste lyssnas igenom för att hitta fram till den eftersökta informationen.

Bättre med text än med bild
För personer med synnedsättning är det oftast bättre med texter ( som talsyntesen läser upp) än bilder.

Textens längd
Generellt vill vi inte läsa långa texter, så koncentrera och fokusera texten så mycket du kan. Strukturera texten med tydliga rubriker och sammanfatta där det behövs.

Små skärmar kräver prioriteringar; ”Vad måste visas?”
Undantaget, när vi gärna plöjer långa texter är när vi har ett specifikt intresse och vill lära oss ”allt” om det.

Fart och rörelse
Inga snabba bildbyten eller blixtrande texter. De stör läsaren som måste fokusera på en del av sidan.

Knappar
Tänk på att knappar och klickytor måste vara stora nog för att kunna klicka på utan krav på stor precision.

Vid inmatning av text
Ge tydliga instruktioner. Formulär bör ha ledtexter ovanför. (inte i formuläret, för texten försvinner). Klargör formatet uttryckligen i texten med typ (t.ex enbart siffror) och mönster (t.ex åååå-mm-dd).

Prestanda
Tänk på att begränsa datastorleken på sidan, så att laddningstiden hålls nere.
Kapacitet på nät och överföring är inte alltid den bästa. Många användare har abonnemang med begränsad nedladdningsvolym.
- sidan ska inte alltid behöva laddas om helt om inte hela sidans innehåll har ändrats
- undvik egna typsnitt utan använd standardtypsnitt (speciellt för mobila användare)
- se till att bilder av lämplig upplösning laddas för respektive storlek på

Vid nedsatt syn
Sidan ska vara möjlig att förstora, förminska, invertera och ge möjlighet att ändra känsliga färger.
Det är viktigt med tydlig kontrast. Röd text mot svart botten är inte god kontrast.
En del personer behöver an mörk bakgrund för att de störs av en skärm som stålar i ljus. Andra vet att en skärm som strålar ljus kräver mer energi och vill gärna förlänga driftstiden.
Externa hjälpmedel som förstorar bilden fokuserar ofta på det övre vänstra hörnet.

Responsivitet
Variationen på skärmar, läsare, fabrikat och upplösningar har redan så stor variation att det inte är möjligt eller rimligt att designa för varje variant. De vanliga gränserna idag är

 

Benämning	Storlek Width		Enhet
Extra stor		Begränsning av antal tecken per rad till max 60 till 85 tecken.	desktop
Stor	< 960	Begränsning av antal tecken per rad till max 60 till 85 tecken. Ofta internet/bredband med begränsad uppkoppling/hastighet.	laptop
Mellan	< 768	Begränsad anslutning. Krymp och uteslut mindre viktiga element samt strukturera effektivt.	surfplatta
Liten	< 480	Krymp, ransonera, förenkla och prioritera.	mobil

S p e c i e l l t f ö r m o b i l e n
Navigationen är en utmaning

På den lilla ytan som mobilen har är det en extra stor utmaning att ge överblick och förståelse speciellt om strukturen av en större mängd sidor ska åskådliggöras. Tänk på att personer med nedsatt syn inte alltid ens kan se hela skärmen utan måste välja vilken del av skärmen som ska visas. Det gäller förstås att kolla hur den uppträder i mobilen, gärna med olika skärmstorlekar. Använd gärna simulatorn som finns på http://www.responsinator.com

Menysymbolen ”hamburgaren” är kompakt och börjar bli standardtypsnitt. Använd gärna den.

Om det finns plats kan du också förtydliga genom att med text skriva ”Meny” vid sidan om symbolen. Meny   eller    Meny
En vertikal vänstermeny med samma uppbyggnad som biblioteken i utforskaren brukar fungera bra när det finns en hierarkisk struktur.

En bra sida är Svensk sjuksköterskeförenings http://www.swenurse.se/