Välja rätt typsnitt och dess presentation: En nyckel till ADA-anpassade webbplatser

Nätet är en offentlig plats där alla har samma rätt att delta, få tillgång till, presentera och hämta information trots eventuella funktionshinder. Americans with Disability Act (ADA) antogs för att garantera lika möjligheter för personer med funktionshinder. Även om internet fortfarande var i sin linda vid den tidpunkten är verkligheten nu att den gäller alla virtuella platser, inklusive digitala tjänster och online-innehåll.

För att uppfylla sina juridiska och moraliska skyldigheter är alla organisationer och företag skyldiga att göra sina webbplatser och online-kanaler tillgängliga för funktionshindrade personer. En av de viktigaste pelarna i utformningen av en tillgänglig webbplats ligger i läsbarheten och läsbarheten av dess textinnehåll. Detta kan endast uppnås med hjälp av tillgängliga typsnitt.

Vi har organiserat den här guiden för att hjälpa våra läsare att besvara frågor som Vad är tillgängliga typsnitt och vilket är det bästa typsnittet att använda för en webbplats? Läs vidare för att få reda på detaljerna om ADA-godkända typsnitt och deras egenskaper. Vi kommer också att ta upp några av de funktioner som behövs för att göra en webbplats tillgänglig för personer med synnedsättning, dyslexi och lässvårigheter.

En översikt över typsnittsfamiljer

Typsnitt och olika typsnittsfamiljer har en viktig plats i den digitala typografin. En typsnittsfamilj består av en uppsättning olika typsnitt som har liknande egenskaper och attribut avseende designstilar. Att förstå deras egenskaper kan hjälpa webbdesigners att välja de mest tillgängliga teckensnitten för sina webbplatser. Det finns många typsnittsfamiljer, men här listar vi fyra av dem, som också kan konfigureras av en användare i en webbläsare:

• Serif: Serif-teckensnitt har dekorationer eller utsmyckningar i slutet av ett streck i en bokstav eller symbol.
• Sans-Serif: Sans är det franska ordet för ”utan”. Sans-serif-teckensnitt är enklare och har inte förlängda linjer eller detaljer i slutet av varje streck i en bokstav eller symbol.
• Monospace: Monospace-teckensnitt har samma bredd för varje bokstav eller symbol. De kallas också för typsnitt med fast bredd eller icke-proportionella typsnitt.
• Kursivt: Kursiva typsnitt är skrivna på ett flytande sätt som liknar handskrivna ord. De enskilda bokstäverna kan fogas samman för att ge ett konstnärligt intryck.

Måttenheter

Det finns olika enheter för att definiera teckensnittsstorlekar:

• Ems (em): Den här enheten definierar en teckensnittsstorlek i förhållande till storleken på det överordnade elementet på en HTML-sida. Om det överordnade elementet i HTML till exempel är 14 px skulle 2 em göra det till 28 px.
• Rems (root ems): När man använder rem-enheter definieras alla teckensnitt relativt till teckensnittsstorleken för rotelementet i HTML. Därför specificeras all text i HTML i förhållande till ett basteckensnitt och beror inte på var texten är placerad i webbsidornas HTML-hierarki.
• Pixlar (px): Detta är en absolut måttenhet och är inte baserad på mätning mot ett baselement.
• Poäng (pt): Punkter är också en absolut måttstock. WCAG använder CSS3-värden, där 1pt är 1,333 px. Därför översätts 14pt och 18pt till 18,5 px respektive 24 px.

Vad gör ett typsnitt otillgängligt?

Otillgängliga typsnitt som utesluts från listan över ADA-kompatibla typsnitt är sådana som:

• Gör texten svårare att läsa
• Gör det svårt att skilja mellan olika bokstävers och teckens former
• Förlänger användarens läshastighet
• Har överlappande bokstäver eller tecken, vilket gör det svårt att skilja en bokstav från en annan.

Om ett typsnitt är dekorativt med utsmyckningar blir det svårt att läsa. Alla typsnitt med dekorationer i slutet av ett streck kan bli svårare att läsa för vissa användare. Kursiva typsnitt eller typsnitt i handskriftsstil gör också texten otillgänglig, och därför är de inte de bästa typsnitten att använda på en webbplats.

Vad är tillgängliga typsnitt?

När man utformar en webbplats är en av de viktigaste aspekterna valet av rätt typsnitt och dess presentation. De allra flesta webbplatser kräver mycket textinnehåll, som ska kunna uppfattas och ses. Nyckeln till en tillgänglig webbplats är därför läsbarheten av texten i den, vilket uttrycks med hjälp av olika typsnitt och färger.

Vilka standardtypsnitt är tillgängliga?

Tyvärr går experternas åsikter isär när det gäller vilket typsnitt som är mest läsbart för webben och vilket typsnitt som bör användas, eftersom olika användare har olika krav. Till exempel skulle en målgrupp med nedsatt syn ha ett större behov av större text. Personer med lågt synfält men med högre synskärpa skulle behöva fler tecken för att få plats i sitt synfält samtidigt som textstorleken hålls liten. Personer med dyslexi eller lässvårigheter har också sina egna behov.

Det är bäst att webbdesigners erbjuder flexibilitet så att användarna kan välja sina egna typsnitt. Om en webbsida använder webbläsarens standardtypsnitt behöver läsaren inte byta till ett annat typsnitt varje gång webbsidan laddas.

Men även om det inte finns något fast krav på ADA-typsnittsstorlek är tillgängliga ADA-kompatibla typsnitt tydliga, rena och urskiljbara i motsats till kursiva eller handskrivna stilar. Det råder allmän enighet om att seriefria typsnitt är lättare att läsa och mer lättillgängliga än deras seriffiga motsvarigheter. Listan över ADA-kompatibla typsnitt omfattar bland annat Arial, Calibri, Century Gothic, Helvetica, Tahoma och Verdana.

Betydelsen av tillgängliga typsnitt

Det mesta av informationen på webben förmedlas och sprids via textinnehåll. Ett sätt att presentera text är via .png- eller .bmp-bilder av text. Detta är dock inte ett praktiskt genomförbart alternativ av många skäl. Till exempel försämras läsbarheten när bilderna skalas. Dessutom kan text i bilder inte läsas högt av skärmläsare. Därför bör all text på en webbplats bestå av tillgängliga typsnitt, som är läsbara och synliga.

Att utforma en tillgänglig webbplats med hjälp av tillgängliga typsnitt är nu inte längre bara en rekommendation eller en frivillig funktion. Det är obligatoriskt; om en webbplats bryter mot tillgänglighetsprinciperna riskerar värdföretaget eller företaget att drabbas av kraftiga påföljder, böter eller stämningar. Dessa böter kan vara så höga som 75 000 dollar för den första överträdelsen och mer för efterföljande överträdelser.

Det finns uppskattningsvis 32,2 miljoner vuxna med synnedsättning, enligt uppgifter från National Health Interview Survey (NHIS). Detta omfattar inte bara blinda personer utan även personer som har nedsatt syn trots att de bär glasögon. CDC förutspår att detta antal ökar snabbt på grund av ålders- eller sjukdomsrelaterade synnedsättningar.

När man utformar webbplatser kommer företag och verksamheter som vänder sig till denna stora minoritet av befolkningen naturligtvis att åtnjuta en större publik. Det är ett känt faktum att om texten är svårare att läsa på en webbplats kommer den att få en mindre läsekrets och ett begränsat antal sidbesök. Att lägga till ADA-godkända typsnitt på en webbplats är därför en viktig aspekt för att driva ett framgångsrikt företag.

Specialiserade typsnitt

The British Dyslexia Association (BDA) pekar på följande viktiga aspekter som man bör ha i åtanke när man utformar webbplatser och väljer tillgängliga typsnitt för personer med dyslexi:

• Det valda typsnittet bör utformas så att användarna lätt kan se skillnaden mellan olika bokstäver och siffror. Till exempel kan l (litet L), 1 och I (stort i) se likadana ut.
• Bokstäverna b och d samt p och q är spegelbilder av varandra. Dyslektiska personer kan ha svårt att skilja dem åt. Bokstäverna bör återges så att de inte längre är spegelbilder.
• De flesta personer som BDA har undersökt föredrog ett rundat ”g” och ett rundat ”a”. Avrundning av dessa bokstäver får dock inte leda till att de förväxlas med ett ”o”.
• Bokstavsavståndet bör vara tillräckligt för att skilja mellan olika tecken, t.ex. kan ”rn” tillsammans förväxlas med bokstaven ”m”, så att ”learn” kan förväxlas med ”leam”.

Specialiserade typsnitt har utformats för personer med dyslexi, t.ex. Dyslexie och OpenDyslexic. Båda dessa typsnitt är fritt tillgängliga och kan laddas ner utan kostnad. De är bland de bästa typsnitten att använda på en webbplats när man riktar sig till dyslektiker. På samma sätt är typsnittet Fs Me avsett för personer med inlärningssvårigheter och stöds av den brittiska välgörenhetsorganisationen för inlärningssvårigheter Mencap.

Följande av riktlinjer för tillgänglighet till webbinnehåll

Riktlinjerna för tillgänglighet till webbinnehåll (WCAG) utvecklades och publicerades av World Wide Web Consortium (W3C). Dessa rekommendationer utgör den allmänt accepterade standarden för utformning av tillgängliga webbplatser och onlineinnehåll. I USA kräver Section 508 final rule direkt att WCAG ska följas med minst nivå AA. När det gäller ADA-relaterade rättegångar har justitiedepartementet och de amerikanska domstolarna ofta hänvisat till dessa riktlinjer för att utvärdera tillgängligheten till offentliga webbplatser.

WCAG har tydlig vägledning om tillgängliga typsnitt för synskadade användare, inklusive attribut och utformningsdetaljer som färg, kontrast, storlek och proportioner i texten. Det finns också rekommendationer för layout och struktur av textinnehåll som gör en webbsida mer läsbar och tillgänglig. Det är viktigt att införliva dessa funktioner i en webbplats för att tillgodose användare med nedsatt syn, dyslexi, lässvårigheter eller andra kognitiva funktionsnedsättningar.

Den här guiden diskuterar de olika W3C-rekommendationerna att välja de bästa teckensnitten för tillgänglighet, att underhålla ADA-kompatibla teckensnitt och deras viktiga funktioner.

Fontstorlek och proportioner: låt användaren styra dem

När man skriver text varierar formen, och detta beror också på språket. Vissa alfabetformer är komplexa medan andra är enklare och lättare att läsa även i mindre storlekar. Detta är den främsta anledningen till att en minsta teckensnittsstorlek inte definieras i WCAG. Följande är viktiga aspekter att ta hänsyn till när man väljer de bästa teckensnitten för tillgänglighet och det bästa teckensnittet för läsning på skärmen:

• Teckensnittsstorlekar och enheter: Enligt WCAG ska teckensnittsstorleken anges med hjälp av ems och rems, dvs. riktlinjen förordar relativa teckensnittsenheter snarare än absoluta enheter. Webbutformare bör undvika att ange en grundläggande teckensnittsstorlek i rotelementet. I stället kan webbläsarens standardtypsnittsstorlek användas, som kan tjäna som referenspunkt för att definiera alla andra typsnittsstorlekar. Om användaren ändrar basteckensnittstorleken ändras hela sidan i enlighet med detta.
• Zoomfunktion: Användarna bör ha kontroll över teckensnittsstorleken, inklusive zoomning av text upp till 200 %. Texten ska förbli läsbar när den är förstorad utan att vara överfylld eller ha överlappningar. Denna förstoring bör vara möjlig utan användning av hjälpmedel, t.ex. kan en enkel styrenhet, t.ex. ett reglage, läggas till på webbplatsen för att öka eller minska textstorleken. Denna funktion bör vara tillgänglig på alla enheter, t.ex, mobil, stationär dator, surfplatta osv.

Textavstånd: gör det relativt till teckensnittsstorlek

WCAG 2.1 har följande rekommendationer för textavstånd:

• Linjeavstånd bör ställas in till minst 1,5 gånger teckensnittsstorleken.
• Avstånd efter ett stycke bör vara minst 2 gånger teckensnittsstorleken.
• Avstånd mellan bokstäver ska vara minst 0,2 gånger teckensnittsstorleken.
• Avstånd mellan ord ska vara minst 0,16 gånger teckensnittsstorleken.

Linjebredd: tillåt textomslag

I allmänhet används teckenantalet som måttenhet för linjelängd. Trots eventuella funktionshinder är det svårare för människor att läsa längre rader än kortare rader, eftersom radavbrott ger ögonen möjlighet att vila. I slutändan bör radlängden inte överstiga 80 tecken.

Personer som har ett mindre synfält behöver smalare textområden, där de lätt kan urskilja slutet på en rad och början på nästa. Linjelängden bör därför kunna kontrolleras av användaren. Om de justerar visningsfältet ska textraderna automatiskt svepas runt och flyta om, så att användaren kan läsa texten utan att scrolla horisontellt.

Paragrafer: anpassa stycken till vänster eller höger

Alt webbinnehåll ska vara strukturerat och organiserat i korta stycken, och långa meningar ska undvikas. Paragraferna bör vara antingen vänster- eller högerjusterade. Även om rättvisande text kan se mer visuellt tilltalande ut bör den undvikas eftersom extra mellanslag inom rader gör den otillgänglig. Detsamma gäller centrerade styckeformat, vilket kan göra det svårt för en läsare att hitta början på nästa rad.

Det kloka tillvägagångssättet för teckensnittsfärg

Effektiv användning av färg är viktig för att förmedla meningsfull information till användaren. Till exempel kan obligatoriska fält i formulär markeras med färgmarkeringar, fel kan visas med rött, blå understruken text visar vanligtvis hyperlänkar och grått kan användas för att visa fält i formuläret för funktionshindrade.

Och även om färgerna ökar det estetiska intresset för en webbsida bör man vara försiktig för att tillgodose personer med låg färguppfattning, som kanske inte kan urskilja färgskillnaderna. WCAG 2.1 anger att alternativa visuella signaler bör användas för att särskilja olika funktioner vid sidan av bara färg.

Användningen av färg är nära kopplad till kontrastförhållanden. Det är viktigt att ha en bra färgkontrast för läsbar och tillgänglig text. Följande punkter är viktiga när man överväger tillgängliga typsnitt för synskadade användare:

• Färgkontrasten ska göra det möjligt att skilja förgrundstexten från bakgrunden. Den får inte vara för låg eller för skarp.
• Textens färg grå (#77777777) på en vit bakgrund är minimikravet för WCAG-nivå AA. För större text är 52 procent grått (#828282) acceptabelt.
• Reverse text, som är ljus förgrundsfärg på en mörk bakgrund, bör undvikas så mycket som möjligt eftersom den är svårare att läsa.

Kontrastförhållande: Gör att allting går att urskilja

Riktlinjerna för kontrastförhållande i WCAG 2.1 anges nedan:

1. 1. Rubriker: Kontrastförhållandet för textrubriker och större text bör vara minst 3:1. Text med 18 punkter eller fet text med 14 punkter betraktas som stor text och bör uppfylla detta krav.
2. 2. Huvudtext: För annan text än rubriker ska ett kontrastförhållande på minst 4,5:1 upprätthållas.
3. 3. Logotyp: Text som är en del av en logotyp eller ett varumärke har inget kontrastkrav.
4. 4. Tillfällig text: Text som är en del av ett inaktivt användargränssnitt, ren dekoration, osynlig eller en del av en bild, och som inte förmedlar meningsfull information, har inget kontrastkrav.

Det finns flera rekommenderade sätt att upprätthålla det rekommenderade kontrastförhållandet. Om t.ex. en bokstav eller textsymbol är ljusare i botten kan det bryta mot kontrastförhållandet för hela bokstaven. I det här fallet kan en formgivare antingen göra bakgrunden mörkare eller lägga till en tunn svart kontur till bokstaven för att bibehålla det nödvändiga kontrastförhållandet. Den relativa luminansen hos förgrundsbokstäverna eller bakgrunden kan också ändras för att uppnå önskat resultat. De olika verktyg som kan användas för att kontrollera kontrastförhållandet finns förtecknade på WCAG:s webbplats

Presentation av text

Avse att införliva typsnitt för synskadade användare är det också viktigt att uppmärksamma textens layout och struktur. När det gäller den övergripande presentationen av texten på en webbsida bör följande viktiga punkter följas:

• Dokument bör skrivas med samma typsnitt eller så få typsnitt som möjligt. En sida som innehåller flera typsnitt, även om de är ADA-kompatibla, är svårare att läsa.
• Heading HTML-taggar, t.ex. <h1>, <h2> etc. bör användas för att förmedla dokumentets struktur och hierarki och bör inte användas bara för att en viss typsnittsstorlek behövdes för att visuellt lyfta fram ett element.
• Animerad och rörlig text bör undvikas helt.
• Textuellt innehåll bör presenteras via textdata snarare än med bilder eller grafik. Typsnitt för text när de förstoras förlorar i allmänhet inte sin läsbarhet och behåller sin kvalitet. Bilder av text tenderar att uppvisa det motsatta beteendet och deras kvalitet kan försämras när de zoomas in.
• Satsbokstäver bör användas och små bokstäver bör undvikas.
• Fet stil och kursiv stil bör inte kombineras.
• Textsamlingar med kursiv stil är inte tillgängliga och är svårare att läsa.
• Understrykning av text bör undvikas om det inte är en länk.

Slutsats

Avskaffande av digitala hinder och samma internetupplevelse för alla individer, med eller utan funktionshinder, bör vara högsta prioritet för alla företag och organisationer. För att uppnå detta ger WCAG värdefulla rekommendationer för att välja de bästa teckensnitten för en webbplats, som återger läsbar text för alla användare, inklusive de med nedsatt syn, dyslexi eller lässvårigheter.

Företag med liten eller ingen ADA-erfarenhet kan vända sig till experter när de ska utforma och skapa nya webbplatser eller åtgärda sina befintliga webbplatser. Genom att vara proaktiv och se till att allt webbinnehåll och alla onlinetjänster är tillgängliga kan man undvika höga böter och skadestånd.

Det är klokt att skaffa hjälp från ett team av utvecklare, designers och ingenjörer som har sakkunskap och erfarenhet av att utveckla ADA- och 508-kompatibla webbplatser. Som en del av våra tjänster för webbtillgänglighet erbjuder vi kompletta paket för att utveckla webbplatser baserade på WCAG-standarder, åtgärda äldre webbplatser och genomföra regelbundna revisioner för att säkerställa tillgängligheten på din webbplats.