Webbtillgänglighet

Hur - Möjlighet att uppfatta

Möjlig att uppfatta – Information och komponenter i ett användargränssnitt måste presenteras för användare på sätt som de kan uppfatta

Riktlinje 1.1

Textalternativ: Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll så att det kan konverteras till format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav	Lösningsförslag
1.1.1 Innehåll som inte är text: Allt innehåll som inte är text, som presenteras för användaren har ett textalternativ med samma syfte, utom i de situationer som anges nedan. (Nivå A) I dessa fall går det inte att ersätta innehållet helt med alternativ text utan istället görs enklare förklaringar för att tala om vad som menas Klickbar bild, bild som formulärknapp: (Se Riktlinje 4.1 för ytterligare krav). Tidsberoende media: (Se Riktlinje 1.2 för ytterligare krav på media). Test/övning med ljud/video som förlorar funktionalitet om det ersätts med text ( till exempel hörförståelsetest) . Ljud/video för ge en specifik sensorisk upplevelse som till exempel ett musikstycke, speciella ljud CAPTCHA för att skilja människa från datorn människa Innehåll för dekoration, styra utseende på webbsida, ligga osynlig på sidan så implementeras det på ett sätt så att det kan ignoreras av hjälpmedel som skärmläsare.	Använd attributet “alt” på bilder. Exempel <img src="dolomit1.jpg" alt="panoramabild över Dolomiterna"> Använd attributet “longdesc” på bilder och skriv beskrivningen i en egen html-fil. Exempel <img src="dolomit1.jpg" alt="panoramabild över Dolomiterna" longdesc="dolomit1.html"> Använd "label"-element till komponenter i formulär. Koppla ihop dom med "for" respektive "id". Som till exempel här med textfält. (Behövs ej på knappar och "hidden" komponenter.) Exempel <label for="namn">Ditt namn:</label> <input type="text" id="namn" name="namn" /> Även till checkboxar och radioknappar kopplas till "labels" men nu placeras labeln efter. Exempel <input type="radio" id="kvinna" name="kon" /> <label for="kvinna">Kvinna</label> <input type="radio" id="man" name="kon" /> <label for="man">Man</label> Om labels inte kan användas så använd attributet "title". Exempel <input type="text" id="namn" name="namn" title="Ditt namn" />

Riktlinje 1.2

Tidsberoende media: Tillhandahåll alternativ till tidsberoende media. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav	Lösningsförslag
1.2.1 Enbart ljud och enbart video (Förinspelad): För förinspelat ljud (enbart) och förinspelad video (enbart) gäller följande, utom när ljudet eller videon är ett mediealternativ till text och tydligt märkt som sådant: (Nivå A) Förinspelat ljud (enbart): Det finns ett alternativ till tidsberoende media som presenterar information motsvarande det förinspelade ljudinnehållet. Förinspelad video (enbart): Det finns antingen ett alternativ till tidsberoende media eller ett ljudspår som presenterar information motsvarande det förinspelade videoinnehållet.	Med förinspelad menas ej direktsänd. Om det finns en länkad ljudfil så ska det berättas tidigt i ljudfilen att textbeskrivning finns. Sen ska textbeskrivningen komma direkt efter ljudfilen på webbsidan. Om man det finns en video så ska motsvarande ske direkt i början på videon. Där har man också alternativet att i ett första steg hänvisa till en ljudfil som beskriver allt i videon. OBS! Textbeskrivningen av ljud och video är beskrivning av allt innehåll och omfattar all viktig information samt beskrivningar av hur det ser ut, handlingar, uttryck, speciella ljud och annat som ingår i videon.
1.2.2 Textbeskrivningar (Förinspelade): Det finns textbeskrivningar till allt förinspelat ljud innehåll i synkroniserad media, utom när mediet är ett mediealternativ till text och tydligt är märkt som sådant. (Nivå A)	För att döva ska kunna ta del av en video och det inte finns en beskrivning enligt ovan kan man komplettera med beskrivande text i videon. Denna beskrivning visar både prat, speciella ljud och händelser. Detta kan göras om videon kompletteras med ett "track"-element där filen är av typen "WebVTT". (Denna fil måste göras med speciella program.) Exempel <video poster="intro.png" controls="controls"> <source src="info.mp4 srclang="sv" type="video/mp4" /> <track src="info.vtt" kind="captions" srclang="sv" label="Svenska" /> </video>
1.2.3 Ljudbeskrivning eller mediealternativ (Förinspelat): Det finns ett alternativ till tidsberoende media eller en ljudbeskrivning av det förinspelade video innehållet i synkroniserad media, utom när mediet är ett mediealternativ till text och tydligt är märkt som sådant. (Nivå A)	Med en länk hänvisar man till ett dokument med hela beskrivningen, prat, ljud och utseende. Dokumentet kan vara en annan webbsida eller en del av aktuell webbsida. Länken placeras antingen direkt före eller efter ljudet eller videon. Om det hänvisas till en del på aktuell sida ska en länk eller knapp tillbaks erbjudas.
*1.2.4 Textbeskrivningar (direktsända):* Det finns textbeskrivningar av allt direktsänt ljudinnehåll i synkroniserad media. (Nivå AA)	Realtidsbaserad textinskrivning. Troligtvis en tjänst som köps in.
*1.2.5 Ljudbeskrivning (förinspelad):* Det finns ljudbeskrivningar av allt förinspelat videoinnehåll i synkroniserad media. (Nivå AA)	Här erbjuds en ljudfil med hela beskrivningen av vad som händer på videon, prat, ljud och miljö. Kan vara standard eller valbar.

Riktlinje 1.3

Anpassningsbart: Skapa innehåll som kan presenteras på olika sätt (exempelvis med enklare layout) utan att information eller struktur går förlorad. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav	Lösningsförslag
1.3.1 Information och relationer: Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. (Nivå A)	Använd rubriker(h1-h6) och listor(ul, ol, dl). Använd semantiska element för förtydliga strukturen som strong, em, cite, blockquote och via en klass i stilmallen förstärkadessa element. Separera design(CSS) från innehåll och struktur(HTML). Kombinera färg och semantisk betoning för att göra det ännu tydligare men även om vissa personer ej kan uppfatta båda delarna så finns den andra kvar. Använd grundläggande tabellelement för att strukturera tabellbar information. Lägg dit en caption med en dold förklaring av hur tabellen är strukturerad och med vilket innehåll och synliga tabellrubriker Exempel <table> <caption>Riktlinje 1.3 Anpassningsbart: Skapa innehåll som kan presenteras på olika sätt (exempelvis med enklare layout) utan att information eller struktur går förlorad. Krav i vänstra kolumnen och lösningsförslag i högra.</caption> … </table> Använd scope för att associera th-element med td-element. Exempel <table> <tr> <th scope="col">Deltagare</th> <th scope="col">Tid</th> </tr> <tr> <td>Musse</td> <td>24min 12s</td> </tr> <tr> <td>Kalle</td> <td>25min 3s</td> </tr> <table> Använd "optgroup" för att gruppera "option"-element i "select"-element. Exempel Din favorit? <form action="..." method="post"> <label for="food">Din favorit?</label> <select id="food" name="food"> <optgroup label="Frukt"> <option value="1" selected="selected">Banan</option> <option value="3">Apelsin</option> <option value="4">Äpple</option> <option value="5">Vindruva</option> </optgroup> <optgroup label="Grönsaker"> <option value="2">Morot</option> <option value="6">Gurka</option> <option value="7">Tomat</option> </optgroup> </select> </form>
1.3.2 Meningsfull ordning: När meningen med innehållet påverkas av ordningen det presenteras i, kan en logisk läsordning bli automatiskt tydliggjord. (Nivå A)	Här menas att innehållet på webbsidan ska kunna presenteras på ett logiskt sätt med hjälp av tekniska hjälpmedel. Vid absolutpositionering av delar av webbsidan ska den fortfarande visas på ett meningsfull sätt även om stilmallen kopplas bort. Undvik mellanslag("white space") för att styra utseende då det kan kan bli krock med syftet om det inte visas ordentligt. Använd “letter-spacing” och inte mellanslag mellan bostäver för att betona ett ord. Exempel <!-- ej så här --> <h2>H E J</h2> <!-- istället --> h2 { letter-spacing: 1em; } <h2>HEJ</h2> <!-- vilket ger --> H E J <!-- och --> HEJ
1.3.3 Sensoriska kännetecken: Instruktioner för att förstå och styra innehåll är inte enbart beroende av sensoriska kännetecken såsom form, storlek, visuell placering, orientering eller ljud. (Nivå A)	För färg se riktlinje 1.4. Se till att alla ställen på din webbsida där du refererar till något annat på sidan via ett utseende, placering eller liknande så ska du förtydliga detta med något som inte är förknippat med utseendet, placering eller liknande. Till exempel: "klicka på den runda knappen med namnet Skicka" eller "använd listan med länkar till höger med rubriken kurser"

Riktlinje 1.4

Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav	Lösningsförslag
1.4.1 Användning av färger: Färg används inte som det enda visuella sättet att förmedla information, indikera en handling, fråga om återkoppling eller särskilja ett visuellt element. (Nivå A) Anmärkning: Detta framgångskriterium tar specifikt upp färgperception. Andra typer av perception behandlas i Riktlinje 1.3 inklusive automatisk åtkomst av kod för färg och annan visuell presentation.	För alla delar där en färg används för att framföra information så ska även informationen framföras via text. Till exempel "alla obligatoriska fält är märkta med röd text och markerade med en asterisk *". Kontrollera att text som framför information via färg också använder ett teckensnitt som distink skiljer texten från omgivningen. Kontrast mella länkar och omgivande text ska ha minst förhållandet 3:1, se exempel: länk kontrast exempel från W3C/WAI När vi har bilder med färgade delar för att betona något ska dessa delar också skiljas med olika mönster så att delarna går att särskilja fast man inte ser färgerna.
1.4.2 Kontroll av ljud: Om något ljud på en webbsida automatiskt spelas i mer än tre sekunder så ska det antingen finnas enmetod/funktion för att pausa eller stoppa ljudet, eller en metod/funktion för att ändra ljudnivån. Denna kontroll ska vara oberoende av systemets ordinarie volymkontroll. (Nivå A) Anmärkning: Eftersom innehåll som inte uppfyller detta framgångskriterium kan hindra en användares möjlighet att använda hela sidan, så måste allt innehåll på webbsidan uppfylla detta framgångskriterium (oavsett om innehållet används för att uppfylla andra framgångskriterier eller inte). Se Uppfyllnadskrav 5: inte störande.	Lägg till knappar som styr av och på. Alternativt erbjuds en knapp som har värdet "Sätt på ljud". När vi klickar på den och ljudet sätter igång så erbjuds ett alternativ för att "stänga av ljudet".
*1.4.3 Kontrast (minimum):* Den visuella presentationen av text och text i form av bild har ett kontrastvärde på minst 4,5:1 med följande undantag: (Nivå AA) Stor text: Text i stor stil och bilder av text i stor stil har ett kontrastvärde på minst 3:1. Oväsentlig: Text eller text i form av bild som är en del av en inaktiv komponent i ett användargränssnitt är rent dekorativ, inte är synlig för någon, eller är en del av en bild som innehåller annat viktigt visuellt innehåll, har inga krav vad gäller kontrast. Logotyper: Text som är en del av en logotyp eller ett varumärke har inget minimikrav vad gäller kontrast.	Testa med online-checkare: En online kontrast checkare Till exempel: Svart text mot röd bakgrund ger förhållandet 5.25:1 Ett exempel Svart text mot vit bakgrund ger förhållandet 21:1 Ett exempel Röd text mot vit bakgrund ger förhållandet 4:1, EJ OKEJ Ett exempel
*1.4.4 Förändring av textstorlek:* Förutom för textbeskrivningar och text i form av bild, så kan text förstoras utan hjälpmedel upp till 200 procent utan att användaren förlorar innehåll eller funktionalitet. (Nivå AA)	Tänk på följande: Ange bredd och höjd på element som innehåller text i "em"-enheten. Ange teckensnittsstorlekar i em eller procent. Använd flytande layout (element som sätts till float). Erbjud möjligheten att själv kunna öka (det vill säga byta gällande stilmall som styr storlekar). Test genom att zooma upp till 200% och se om allt innehålls finns och funktionaliteten finns kvar.
*1.4.5 Text i form av bild:* Om den teknik som används kan skapa den visuella presentationen så ska text användas för att förmedla information hellre än text i form av bild, med följande undantag: (Nivå AA) Anpassningsbar: Texten i form av bild kan bli visuellt anpassad efter användarens krav. Avgörande betydelse: En utförlig presentation i form av text har avgörande betydelse för att förmedla informationen. Anmärkning: Logotyper (text som är en del av en logotyp eller ett varunamn) anses ha avgörande betydelse.	Försök använda CSS för att skapa motsvarande det som visas på bilden. Erbjud en knapp som visar webbsidan med bildens information som text i stället.