Tester som NetRelations Inspector utför

De tester som utförs när man kör en webbsida eller en hel webbplats genom NetRelations Inspector syftar dels till att fånga upp mätbara tillgänglighetsproblem och dels till att hitta avsteg från våra interna riktlinjer för gränssnittsprogrammering.

Här beskriver vi alla testerna och förklarar varför de är relevanta. Där det finns direkta kopplingar till riktlinjer i WCAG 2.0 eller på eutveckling.se länkar vi till dem.

Accesskey-attribut används

Det är en god tanke att kunna ange kortkommandon för viktiga funktioner på en sida. Problemet är att kortkommandon skapade med accesskey-attributet lätt kan krocka med kortkommandon i webbläsare, hjälpmedel eller operativsystem. Därför avråder många från att använda accesskey.

Om man ändå använder accesskey ska man göra det med återhållsamhet och hålla sig till de tangenter som löper minst risk att krocka med andra kortkommandon.

Mer information:

Alternativtext saknas

Alla bilder och andra grafiska objekt måste ha alternativtext. Annars kan varken sökmotorer, användare som inte ser, användare som har stängt av bildvisning i sin webbläsare eller användare som använder en webbläsare utan stöd för bilder förstå bildens betydelse. För att ange alternativtext använder man alt-attributet för img-elementet.

Bilder som är dekorativa och därför bör ignoreras av skärmläsare och andra hjälpmedel ska helst hanteras med CSS. Om de måste ligga i HTML-koden ska de ha tom alt-text, alt="".

Mer information:

Alternativtext saknas men title-text finns

Bilder med tom alt-text bör inte ha title-text eftersom informationen som anges i title-attributet inte är åtkomlig för alla användare.

Mer information:

ASP.NET-formulär

På många webbplatser som bygger på ASP.NET ligger ett formulär runt allt innehåll på sidan. Det är i de flesta fall felaktig användning av formulär. Det kan också leda till förvirring på sidor med vad som för användaren ser ut som flera separata formulär. När användaren skickar ett formulär genom att trycka på returtangenten i ett textfält blir det oklart vilket formulär som ska skickas. Försök att åtgärda detta leder till JavaScriptberoende.

Undvik att använda den traditionella formulärhanteringen i ASP.NET.

Automatisk sidomladdning

När man använder meta-element för att ladda om sidan (eller en annan sida) är det ofta överraskande och störande för användaren. Hantera hellre omdirigering på serversidan eller som ett resultat av att användaren följer en länk eller aktiverar en formulärknapp.

Mer information:

Bildknapp(ar) saknar alt-attribut

Alla bilder och andra grafiska objekt måste ha alternativtext. Annars kan varken sökmotorer, användare som inte ser, användare som har stängt av bildvisning i sin webbläsare eller användare som använder en webbläsare utan stöd för bilder förstå bildens betydelse. För att ange alternativtext för bildknappar använder man alt-attributet för input[type=image]-elementet.

Mer information:

Bildknapp(ar) saknar alternativtext

Alla bilder och andra grafiska objekt måste ha alternativtext. Annars kan varken sökmotorer, användare som inte ser, användare som har stängt av bildvisning i sin webbläsare eller användare som använder en webbläsare utan stöd för bilder förstå bildens betydelse. För att ange alternativtext för bildknappar använder man alt-attributet för input[type=image]-elementet.

För bildknappar får alternativtexten inte vara tom.

Mer information:

CSS för utskrift saknas

Dokument som använder CSS för presentation bör ha en media-specifik stilmall som används vid utskrift.

Mer information:

Duplicerad title-text

Det finns ingen anledning att upprepa en länks text i title-attributet. Om man ska använda title-text bör den innehålla information utöver den som redan finns i länktexten - dock ingen viktig text eftersom många användare inte kommer att vara medvetna om att den finns.

Mer information:

Embed används

För att den som inte har stöd för den teknologi som används i ett embedelement, eller som inte kan se sidan, behöver en alternativ version av innehållet finnas. Använd object-elementet i stället.

Flash och andra icke-standardiserade filformat bör infogas med en metod som kan kontrollera att användarens webbläsare har stöd för formatet i den version som krävs.

Fel nivå på dokumentets första rubrik

Den första rubriken i ett dokument ska vara h1 eller h2. I princip ska den första rubriken vara h1, men ibland behöver man göra avsteg från det för att kunna skapa rubriker för till exempel navigationslistor som kommer före huvudrubriken i koden. I sådana fall ska man börja med h2.

Mer information:

Felaktig rubrikstruktur

För att underlätta för personer som använder rubriker för att navigera i dokument ska rubrikstrukturen vara korrekt, vilket innebär att inga rubriknivåer får hoppas över. Använd h1 för den högsta nivån, sedan h2, h3, och så vidare. Hoppa till exempel inte direkt från h1 till h3.

Mer information:

Felaktig språkkod

Information om vilket språk dokumentets information är på finns, men språkkoden är felaktig.

Mer information:

Fieldset-element utan legend-text

I formulär kan det vara bra att gruppera relaterade fält, särskilt radioknappar och kryssrutor, på ett semantiskt sätt. Använd fieldset-element för att skapa grupper och legend-element för att ge grupperna en rubrik.

Mer information:

Formulär saknar skicka-knapp

Om ett formulär saknar skicka-knapp blir det otydligt för användaren hur man skickar formuläret. Det är inte alla som vet att man oftast kan skicka formulär genom att trycka returslag i ett textfält. Dessutom fungerar det inte med alla webbläsare.

Alla formulär ska ha minst en skicka-knapp.

Formulär utan synliga fält

Formulär som varken har synliga inmatningsfält eller skicka-knappar har ingen funktion för användaren och är troligen resultatet av felprogrammering.

Fungerar inte utan "www"

Webbplatsen fungerar inte utan "www" först i adressen. Det är inte självklart att alla användare skriver in "www" först i webbadresser, så därför bör webbplatsen fungera och visa samma sida oavsett om man anger "www" eller inte.

Mer information:

Fältetikett saknar koppling till fält

Det säkraste sättet att koppla samman fältetiketter med sina formulärfält är att ange fältets id i label-elementets for-attribut.

Rent formellt är det tillåtet att göra kopplingen genom att lägga formulärfältet inuti dess label-element, men det är inte kompatibelt med alla webbläsare och hjälpmedel och avråds från.

Mer information:

Fältetikett saknas

För att skapa större klickbar yta för radioknappar och kryssrutor, och göra det möjligt för skärmläsare att ange vad som ska matas in i formulärfält ska alla formulärfält ha en korrekt kopplad fältetikett.

Mer information:

Fältetikett är tom

Alla label-element ska ha textinnehåll, annars fyller de ingen funktion och kan orsaka förvirring.

Mer information:

För många nivå 1-rubriker

Om det finns flera h1-rubriker på samma sida blir det oklart för användaren såväl som för sökmotorer vad sidan i huvudsak handlar om. Begränsa antalet h1-rubriker till en eller möjligen två.

Förkastade attribut

Förkastade attribut är attribut som endast är tillåtna i HTML 4.01 Transitional respektive XHTML 1.0 Transitional. Som ordet "Transitional" antyder är dessa varianter till för att användas under en övergångsperiod från HTML-baserad layout till CSS-baserad layout. Eftersom webbläsare numera har tillräckligt stöd för CSS är den övergångsperioden sedan länge över, och man bör använda HTML 4.01 Strict eller XHTML 1.0 Strict.

Förkastade element

Förkastade element är element som endast är tillåtna i HTML 4.01 Transitional respektive XHTML 1.0 Transitional. Som ordet "Transitional" antyder är dessa varianter till för att användas under en övergångsperiod från HTML-baserad layout till CSS-baserad layout. Eftersom webbläsare numera har tillräckligt stöd för CSS är den övergångsperioden sedan länge över, och man bör använda HTML 4.01 Strict eller XHTML 1.0 Strict.

HTML-validering

HTML-validering är viktig för att säkerställa att alla webbläsare kan tolka sidans innehåll på rätt sätt. Det minskar risken för tveksamheter och underlättar underhåll.

Mer information:

Huvudrubrik saknas

För att tala om för användare och sökmotorer vad ett dokument handlar om är det mycket viktigt att ange en beskrivande text i en huvudrubrik, som skapas med hjälp av h1-elementet.

Mer information:

Internlänkar utan mål

Se till att alla internlänkar har ett mål, annars kommer användare som försöker följa sådana länkar att bli förvirrade.

Inline-CSS

För att underlätta underhåll och media-specifik hantering av stilmallar bör all CSS definieras i externa filer eller style-element.

Mer information:

Inline-event

Eventhanterare används för att koppla JavaScriptfunktioner till olika element på sidan så att de kan aktiveras när användaren utför en viss interaktion, till exempel klickar på en länk eller skickar in ett formulär.

För att förenkla underhåll och underlätta användningen av icke påträngande (unobtrusive) JavaScript bör alla eventhanterare kopplas från JavaScriptkoden i stället för från HTML-koden.

Mer information:

JavaScriptlänkar

Länkar som använder protokollet javascript: är beroende av JavaScript. För användare vars webbläsare inte exekverar JavaScript kan detta vara förvirrande. Skapa därför sådana länkar med JavaScript eller se till att de fungerar även utan JavaScript.

Mer information:

Kan innehålla flimmer

Undvik att skapa element som blinkar på sidan. De kan orsaka anfall hos personer med vissa typer av epilepsi.

Mer information:

Listelement utan innehåll

Det är vanligt att skärmläsare talar om hur många punkter en lista innehåller innan de läser upp innehållet. Om användaren då får höra till exempel "Lista med sju punkter" och sedan inte hittar sju punkter i listan kan det vara förvirrande.

Tomma listpunkter ser också visuellt märkligt ut - man kan lätt tro att något saknas (vilket ofta är fallet).

Longdesc-attribut utan giltig sökväg

För att utförligt beskriva innehållet i en bild för den som inte kan se bilden kan man använda longdesc-attributet. När man gör det anger man sökvägen till ett dokument med den utförliga beskrivningen. Om sökvägen inte är korrekt eller saknas blir det förvirrande för den som försöker läsa beskrivningen.

Mer information:

Länk i bildkarta saknar alt-attribut

Alla bilder och andra grafiska objekt måste ha alternativtext. Annars kan varken sökmotorer, användare som inte ser, användare som har stängt av bildvisning i sin webbläsare eller användare som använder en webbläsare utan stöd för bilder förstå bildens betydelse. För att ange alternativtext använder man alt-attributet för area-elementet.

Mer information:

Länk i bildkarta saknar alternativtext

Alla bilder och andra grafiska objekt måste ha alternativtext. Annars kan varken sökmotorer, användare som inte ser, användare som har stängt av bildvisning i sin webbläsare eller användare som använder en webbläsare utan stöd för bilder förstå bildens betydelse. För att ange alternativtext använder man alt-attributet för area-elementet.

För imagemapplänkar får alternativtexten inte vara tom.

Mer information:

noscript-element används

noscript-elementet är till för att kunna visa alternativt innehåll för webbläsare som inte har stöd för JavaScript. Problem med noscript uppstår när webbläsaren har stöd för JavaScript och en brandvägg eller annan säkerhetsrelaterad hård- eller mjukvara blockerar JavaScript. Då exekveras varken JavaScriptkoden eller det alternativa innehållet.

I stället för att använda noscript bör man implementera JavaScriptfunktioner på ett icke påträngande (unobtrusive) sätt.

Undantag för detta kan göras om noscript endast innehåller sådant som är irrelevant för besökaren, till exempel en bild som används för besöksstatistik.

Mer information:

Nya fönster

Dokumentet använder target-attribut för att öppna länkar i nya fönster. Det förvirrar många användare - det är bättre att låta användaren själv välja om länkar ska öppnas i nya fönster eller flikar. Om man ändå väljer att använda target-attributet för att öppna nya fönster ska länktexten informera användaren om det.

Mer information:

Nästlade länkar finns

Länkar får inte innehålla andra länkar.

Mer information:

Nästlade tabeller finns

Tabeller ska användas för att strukturera tabulär data, inte för att skapa layout.

För att göra det lättare för personer som inte ser att tolka innehållet i datatabeller bör man undvika att nästla tabeller. Det underlättar sannolikt för alla användare om man delar upp eller strukturerar om tabeller som är så komplicerade att de behöver nästlas.

Mer information:

Ogiltigt id

I HTML gäller för värden på id-attribut att det första tecknet måste vara en bokstav ([A-Za-z]). De efterföljande tecknen måste vara bokstäver, siffror ([0-9]), bindestreck ("-"), understreck ("_"), kolon (":") eller punkter ("."). Som reguljärt uttryck blir det [A-Za-z][A-Za-z0-9:_.-]*.

I XHTML som skickas till webbläsaren som XML kan man använda fler tecken, men nästan all XHTML som används i dag skickas som om det vore HTML, och därför är det säkrast att hålla sig till de regler som gäller i HTML 4.01.

Mer information:

Presentationell HTML

HTML ska beskriva innehållets funktion eller betydelse, inte hur det ska presenteras. Använd i stället CSS för att styra den visuella presentationen. Om syftet är att ange till exempel betoning, använd ett semantiskt HTML-element för detta och kontrollera utseendet med CSS om det behövs.

Mer information:

Ramar används

Ramar, oavsett om de skapas med frameset- och frame-element eller med iframe-element, kan orsaka ett antal användbarhetsproblem och bör i första hand undvikas.

Mer information:

Ramtitel saknas

Ramar kan orsaka ett antal användbarhetsproblem och bör i första hand undvikas. Om man trots det använder ramar ska varje ram (frame- och iframe-element) ha ett title-attribut som beskriver ramens syfte.

Mer information:

Rensa-knappar används

När ett formulär innehåller rensa- eller återställ-knappar som skapas med <input type="reset"> är risken stor att användaren av misstag raderar information. Om inte mycket starka skäl finns för att använda rensa-knappar bör de undvikas.

Mer information:

Serverbaserade bildkartor

Serverbaserade bildkartor skapas genom att ge en länkad bild ett ismap-attribut. När användaren klickar på bilden skickas koordinaterna där muspekaren befinner sig med till servern.

Detta gör att serverbaserade bildkartor inte kan göras tillgängliga för personer som inte använder mus, och därför ska klientbaserade bildkartor användas i stället.

Mer information:

Sidtitel finns men är tom

För att tala om för användare och sökmotorer vad ett dokument handlar om är det mycket viktigt att ange en beskrivande text i dokumentets title-element.

Mer information:

Sidtitel saknas helt

För att tala om för användare och sökmotorer vad ett dokument handlar om är det mycket viktigt att ange en beskrivande text i title-elementet. title-elementet är obligatoriskt och ska finnas i dokumentets head-element.

Mer information:

Språkinformation saknas

För att skärmläsare och sökmotorer ska slippa gissa vilket språk ett dokument använder ska dokumentets huvudsakliga språk anges i HTML-koden. Det gör man genom att sätta ett lang-attribut på html-elementet. I XHTML-dokument som skickas som text/html bör man använda både lang- och xml:lang-attribut.

Mer information:

Stor Viewstate

Viewstate-fält är gömda formulärfält som skapas av ASP.NET. De finns ibland med i koden utan att användas, och gör därför sidladdningen långsammare helt i onödan. Ibland kan Viewstate-fält bli så stora att de märkbart slöar ner webbplatser även för användare med snabb uppkoppling.

Minimera användningen av Viewstate på ASP.NET-baserade webbplatser.

Tabellrubriker saknas

När tabellrubriker saknas helt tyder det på att tabeller används för layout, vilket ska undvikas.

Om rad- och kolumnrubriker saknas i datatabeller kan det vara svårt för skärmläsare att förmedla tabellstrukturen till användaren. Märk upprubrikceller med th-element och använd scope- eller for- och id-attributen för att koppla samman rubrik- och dataceller.

Mer information:

Tabindex-attribut används

Placera i första hand innehållet i en logisk ordning så att tabindex-attributet inte behöver användas. När man använder tabindex kan det lätt leda till oväntad navigeringsordning för den som tangentbordsnavigerar. Ofta gör det också att dokumentet blir svårare att underhålla eftersom man kan behöva ändra befintliga tabindex-attribut när man lägger till eller tar bort element.

Mer information:

Teckenkodningsfel

Om HTTP-rubrikerna och ett dokuments meta-element anger olika teckenkodningar finns risk att webbläsaren använder fel teckenkodning, vilket kan göra texten mycket svårläst.

Tom title-text

Om man använder title-attribut bör det innehålla text, annars tillför det inget.

Tomma länkar finns

Om länktext saknas vet varken användare eller sökmotorer vart länken leder. Alla länkar ska ha en tydlig text som talar om vart länken leder eller vilken funktion den har.

Mer information:

Tomma rubriker finns

Eftersom en del användare navigerar med hjälp av rubriker är det viktigt att alla rubrikelement innehåller relevant text.

Mer information:

Troliga JavaScriptlänkar finns

Länkar som har href="#" är ofta beroende av JavaScript. För användare vars webbläsare inte exekverar JavaScript kan detta vara förvirrande. Skapa därför sådana länkar med JavaScript eller se till att de fungerar även utan JavaScript.

Mer information:

Tvetydig länktext

Den som använder skärmläsare kan navigera med hjälp av en länklista. Det kan vara förvirrande om flera länkar har samma länktext men går till olika sidor. Om det gör den visuella presentationen enklare att överblicka kan man använda CSS för att dölja viss länktext, se C7: Using CSS to hide a portion of the link text.

Mer information:

Webbadresser avslöjar serverteknik

Undvik att låta webbadresser avslöja vilken serverteknik som används. Dels är det ointressant för de flesta användare, dels försvårar det vid byte av serverteknik.

Mer information:

Webbadresser blandar stora och små bokstäver

Undvik att blanda stora och små bokstäver i webbadresser. En del webbservrar gör skillnad på stora och små bokstaver medan andra inte gör det. Genom att använda enbart små bokstäver underlättar du dels för besökare som skriver in en adress, dels för utvecklare vid ett teknikbyte.

Mer information:

Webbadresser är svårlästa

Undvik att låta tekniken styra hur webbplatsens webbadresser ser ut. Gör dem i stället läsbara för dina besökare. Genom att göra det ökar du dessutom chansen till bättre sökmotorplacering.

Mer information:

Använd detta formulär om du vill skicka ett meddelande.

Dela ut sidan på sociala nätverk