Skriv tillgängligt innehåll

På den här sidan

    Tillgängligt skrivande är bra skrivande. Det gör det enklare för alla att ta åt sig ditt innehåll. Här är några tips på hur du kan skriva med tillgänglighet i åtanke.


    Skriv enkelt

    Dokumentation är endast så bra som det människor får ut av den. Om texten är för komplicerad kan de inte använda den. Ett enkelt språk ökar tillgängligheten.

    Håll din text enkel och tydlig med hjälp av följande tips:

    • Håll meningarna korta. De bör inte innehålla mer än 20–25 ord.
    • Använd enkla ord. Använd om möjligt ord (eller kombinationer av ord) med högst 1–2 stavelser. Använd till exempel ”för att” istället för ”ha för avsikt att”.  Använd följande webbplatser eller liknande för att hitta enkla ord att använda:
    • Använd förkortningar.
    • Använd verktyg som Hemmingway Editor för att mäta textens läsbarhet. Sikta på en läsbarhetsnivå för åttonde klass och lägre för att uppfylla WCAG-standarder.

    Rubrikstruktur

    Rubrikerna är avgörande när du skapar tillgängligt innehåll. Det gör det möjligt för användare av skärmläsare att direkt hoppa till ett visst innehåll och på så sätt spara tid.

    Arbeta med det system som du skriver i. Alla populära program som Microsoft Word, PowerPoint och Open Office har stil- och formatalternativ som kan hjälpa dig att skapa en lämplig struktur i dina dokument. Använd de stil- eller formatalternativ som finns tillgängliga i din innehållsredigerare.

    Exempel: Rubrik 1 (<h1>)

    Siffrorna i rubriken skapar ett strukturellt sammanhang för skärmläsaren och hjälper icke-visuella läsare att förstå innehållet, även om de inte kan se hur dokumentet är uppbyggt.

    Exempel:

    <h1>Tillgänglighet inom utbildning</h1>

    <h2>Tillgänglighet på Blackboard</h2>

    Mer information om att skapa tillgängligt innehåll


    Lyfta fram innehåll

    Skärmläsare kan inte identifiera teckensnitt, inklusive följande:

    • Färg
    • Fet
    • Kursivstil
    • Understruken
    • Genomstruken

    Använda dessa format som visuella brytningar. Använd dem inte som det enda sättet att markera vikt eller förmedla information.

    Exempel: Röd text visar på något extra viktigt. Användare av skärmläsare vet inte om texten är röd. De missar detta och vet inte att det är extra viktigt.

    Försäkra dig om att du använder ett tillgängligt alternativ när du vill ge en tydlig visuell indikation. Använd ett utropstecken i slutet av en mening som är extra viktig. Utropstecken och frågetecken får genomslag i intonationen hos en skärmläsare. Det innebär inte att verktyget läser upp ordet frågetecken, utan att meningen läses med frågeintonation.

    Exempel: Använd inte teckensnittsstilar som enda sättet att markera att något är viktigt!


    Bilder

    Fråga dig själv vilket syfte en bild har. Ska den göra sidan snyggare? Eller ger den användaren en visuell referens av något i texten? Måste alla användare kunna ta åt sig bilden för att förstå innehållet?

    Om du är osäker på vad bilden betyder eller fyller för funktion – använd den inte! Den kan göra presentationen rörigare och mer svårförståelig för den som har inlärningssvårigheter.

    Alt text

    Om du använder en LMS eller webbplats för att förmedla information, finns det ett fält för alternativtext när du laddar upp en bild. För dekorativa bilder kan du lämna fältet tomt. Skärmläsaren ignorerar då bilden. En bild är dekorativ när den inte tillför någon information till sidan.

    Mer information om dekorativa bilder finns på webbplatsen för initiativet för webbtillgänglighet (WAI)

    Exempel: Om du har en bild som visar verktygen i användargränssnittet kan du beskriva hur användaren kommer dit och vad som finns på sidan. Se ett exempel på en beskrivning av en bild på sidan.

    Om du inte vill att skärmläsaren ska hoppa över bilder måste du lägga till en alternativtext för dem. Du behöver inte lägga till ”bild av” eftersom hjälpmedlen redan vet att det är en bild. Var kortfattad, tydlig och beskrivande.

    Använd inte samma alternativtext för alla bilder, till exempel ”bild som illustrerar texten”. Det är meningslöst och gör det rörigt.

    För mer avancerade bilder kan du lägga till en kort alternativtext på sex eller sju tecken och lägga till en bildtext under bilden. Den är synlig för alla och kan innehålla en tydligare beskrivning.

    Infografik

    Infografik måste ha ett textalternativ. Det är en beskrivning av samma information som ges i infografiken. Textalternativet bör finnas på sidan direkt efter infografiken. Lägg till en ankarlänk överst på sidan för att visa textalternativet.

    Se ett exempel på en infografik med ett textalternativ.

    Text i bilder

    Enligt WCAG:s riktlinjer ska inte text finnas i bilder. Förklara istället bilden med hjälp av text på sidan.


    Länkar

    Det är viktigt att dina länkar är beskrivande. Varje länk ska utgöra en beskrivning av det användaren kan förvänta sig att hitta när han eller hon klickar på länken. Det är nödvändigt för Links List-verktyget som finns i skärmläsare. Det här verktyget listar bara alla länkar på sidan. Det finns ingen annan information om länken.

    Exempel: På den här sidan läser Links List-verktyget upp följande: ”Se ett exempel på en beskrivning av en bild på en sida”, ”exempel på en infografik med ett textalternativ” osv. Beskrivningen anger var du hamnar om du klickar på länken.

    • Undvik att använda ”klicka här” eller ”läs mer”. Links List-verktyget läser upp texten exakt som den står. Om samma länk repeteras (tänk dig att du hör ”klicka här, klicka här, klicka här” flera gånger) skapar det bara kaos och förvirring hos användarna. De måste förstå vart länken leder och varför de ska klicka på den. Beskrivande länkar ger användare en kontext.
    • Webbadresser eller URL:er är inte informativa och bör inte användas som beskrivningar. Skärmläsaren läser upp varje bokstav. Gör istället texten beskrivande.
    • Att öppna länkar i ett nytt fönster kan vara förvirrande. Håll det till ett minimum. Berätta för användarna när du använder ett nytt fönster.

    Listor och tabeller

    Låt de verktyg som du använder göra jobbet när du skapar innehåll. Använd listor, numrerade listor och tabellverktyg i innehållsredigeraren. Eller visa källkoden och använd rätt HTML-taggar.

    Listor

    Korrekt skapade punktlistor (<ul>) informerar användare av skärmläsare hur många punkter som finns i listan.

    Korrekt skapade numrerade listor (<ol>) informerar användare av skärmläsare hur många objekt som finns i den numrerade listan och läser upp siffran vid varje objekt.

    Tabeller

    Använd listor istället för tabeller när du kan! Tabeller kan göras tillgängliga, men de som använder skärmläsare måste känna till avancerade tangentbordskommandon för att kunna navigera i tabeller och förstå dem.

    Använd kolumnrubriker (<th>). Om du gör det läses kolumnrubriken upp på nytt av skärmläsaren varje gång användaren navigerar till en ny cell. På så sätt får användaren sammanhanget för varje cell klart för sig. Tänk på hur uppläsningen kommer att låta för var och en av cellerna när du väljer kolumnrubriker och lägger till information i cellerna.

    Använd aldrig tabeller för att skapa en visuell layout.

    Exempel på en tillgänglig tabell


    Tangentkommandon

    Det finns globala standarder för tangentkommandon i webbinnehåll. Du kan till exempel trycka på Tabb-tangenten för att flytta din dators fokus till nästa knapp. Du behöver inte beskriva dessa. En lista över alla globala kommandon finns i JAWS Keyboard Commands Quick Reference Guide.

    Ibland behöver utvecklare skapa unika tangentkommandon för en produkt. Blackboard Collaborate har till exempel skapat unika tangentkommandon för att aktivera och inaktivera mikrofonen. Sådana unika kommandon kan du dokumentera i dina ämnen.

    Instruktioner för tangentkommandon och klickningar är två olika delar och bör inte finnas i samma stycke. Om kommandon för Mac är annorlunda än för PC kan du använda två olika meningar för ämnet.

    Exempel 1

    Som standard varken syns eller hörs du när du har installerat programmet. Klicka på mikrofon- och kameraikonerna för att använda dessa funktioner under mötet.

    Tryck på Alt + M på tangentbordet om du vill stänga av och slå på mikrofonen. Tryck på Alt + C när du vill slå av eller på kameran.

    Exempel 2

    När du visar en presentation visas bläddringsknappar så att du kan bläddra mellan bilderna.

    Tryck på Alt + Page Up på tangentbordet när du vill gå till nästa bild. Tryck på Alt + Sida ned när du vill gå tillbaka. På Mac trycker du på Alt + Fn + uppåtpil och Alt + Fn + nedåtpil.


    Video

    Videor ska vara textade. Mer information finns i om att lägga till undertext i videor.