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, dels till att hitta avsteg från god praxis och 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. Vi länkar också till en del andra relevanta dokument.

ASP.NET-formulär (Varning)

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.

Accesskey-attribut (Varning)

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 (Fel)

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 (Fel)

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:

Automatisk sidomladdning (Fel)

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 saknar alt-attribut (Fel)

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 saknar alternativtext (Fel)

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:

Byte Order Mark (BOM) i UTF-8-kodad fil (Varning)

När man använder UTF-16 eller UTF-32 behövs BOM för att ange vilken byteordning filen använder, men för UTF-8 behövs inte BOM. Tvärtom bör det undvikas eftersom det inte tillför något men orsakar problem för program som inte förväntar sig det.

Mer information:

CSS för utskrift saknas (Varning)

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

Mer information:

Dokumentets rubrikstruktur är felaktig. (Fel)

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:

Duplicerad title-text (Varning)

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:

Duplicerade kortkommandon (accesskey) (Fel)

När man använder accesskey-attributet för att skapa kortkommandon ska alla kortkommandon vara unika, annars kommer de inte att fungera med alla webbläsare.

Mer information:

Embed används (Varning)

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 (Fel)

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 adress (Fel)

Vi lyckades inte hitta något HTML-dokument att kontrollera på adressen du skrev in. Kontrollera att du har skrivit rätt. Om du har skrivit rätt kan servern som webbsidan ligger på vara felaktigt konfigurerad.

Felaktig språkkod (Fel)

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

Mer information:

Fieldset-element utan inmatningsfält (Varning)

fieldset-element är till för att skapa grupper av relaterade inmatningsfält i formulär och bör innehålla minst ett input-, select-, eller textarea-element.

Mer information:

Fieldset-element utan legend-text (Fel)

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 (Fel)

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 (Fel)

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” (Fel)

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 (Fel)

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 (Fel)

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 kopplad till element som inte finns (Fel)

Om label-element används och har for-attribut ska for-attributet vara identiskt med id-värdet för ett formulärelement i dokumentet.

Mer information:

Fältetikett är tom (Fel)

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 (Varning)

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 (Fel)

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 (Fel)

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.

Huvudrubrik saknas (Fel)

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:

Inline-CSS (Varning)

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 (Varning)

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:

Inloggning krävs (Fel)

Vissa webbsidor kräver att man anger ett användarnamn och ett lösenord innan man får se dem. Om du har angett användarnamn och lösenord för den aktuella sidan, kontrollera att du har skrivit rätt.

Internlänkar utan mål (Fel)

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.

JavaScriptlänkar (Fel)

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 (Varning)

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

Mer information:

Legend-element utan innehåll (Fel)

Tomma legend-element ger inte användaren någon information om formulärfälten i dess fieldset-element.

Mer information:

Listelement utan innehåll (Fel)

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 (Fel)

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 (Fel)

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 (Fel)

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 länkar i bildkartor får alternativtexten inte vara tom.

Mer information:

Lång alternativtext (Varning)

Alternativtext för bilder ska hållas så kort som möjligt. En tumregel är 150 tecken eller mindre. Om det inte är tillräckligt bör man länka till en separat sida med en längre beskrivning.

Mer information:

Noscript-element (Varning)

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:

Nästlade länkar (Fel)

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

Mer information:

Nästlade tabeller finns (Fel)

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:

Ogiltiga sökvägar (Fel)

Sökvägar till filer och dokument får bara innehålla vissa tecken. Om du använder otillåtna tecken som å, ä, ö eller mellanslag i filnamn och webbadresser kommer en del webbläsare att få problem att till exempel följa länkar eller visa bilder.

Det finns två sätt att undvika problem av den här typen:

  • Använd inga andra tecken än a-z, A-Z, 0-9, -, _, . och ~ i sökvägar.
  • Om du använder andra tecken, omkoda dem till procentsekvenser.

Mer information:

Ogiltigt id (Varning)

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:

Okomprimerade filer (Varning)

Genom att komprimera alla textfiler (HTML, XML, CSS, JavaScript) innan de skickas till besökarens webbläsare snabbar man upp överföringen och får en snabbare webbplats.

Mer information:

Olika innehåll med och utan ”www” (Varning)

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. I detta fall visas en sida utan ”www”, men innehållet verkar skilja sig åt.

Mer information:

Onödig eller olämplig alternativtext (Varning)

Bilders alternativtext bör beskriva bildens funktion eller textinnehåll. Den bör inte börja med till exempel “Bild:“ eftersom skärmläsare ändå talar om för användaren att det är en bild. Alternativtexten bör inte heller innehålla bildens filnamn eller information som är intressant för alla användare, till exempel namnet på en fotograf.

Mer information:

Onödig eller olämplig länktext (Varning)

Vissa fraser eller tecken är onödiga eller olämpliga i länktexter. Några exempel:

  • Man behöver inte tala om i länktext att en länk är en länk. Den som använder en skärmläsare för att lyssna på sidan får redan den informationen uppläst innan länktexten. Likaså vet alla webbläsare och sökmotorer om att en länk är en länk.
  • Tecken som ”>>” eller ”»” används ibland i länkar, vilket bör undvikas. Dels bör den typen av visuell information presenteras med hjälp av CSS, dels läser en del skärmläsare upp tecknen bokstavligt, till exempel som ”större än större än”.

Mer information:

Otillgänglig CSS används (Varning)

Dokumentet använder sIFR för att skapa text med hjälp av Flash. Den CSS som laddas för att dölja den ursprungliga HTML-texten döljer texten även för vissa skärmläsare, vilket leder till att en del besökare helt går miste om den text som visas med sIFR. Använd skärmläsarvänlig CSS för att dölja HTML-texten.

Presentationell HTML (Fel)

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:

Radioknappar eller kryssrutor utan fieldset (Varning)

För den som inte ser den visuella layouten av ett formulär kan det vara svårt att avgöra när kryssrutor eller radioknappar hör ihop om de inte omges av ett fieldset-element med ett beskrivande legend-element.

Mer information:

Ramar används (Varning)

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 (Fel)

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 (Varning)

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:

Saknad översättningstext (Fel)

Strängar av denna typ är vanliga när man i sitt publiceringsverktyg har lagt in kod för att skriva ut översättningar av texter på sidan men glömt att lägga in själva översättningarna i publiceringsverktygets mallar.

Serverbaserade bildkartor (Fel)

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 (Fel)

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 (Fel)

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 (Fel)

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 (Varning)

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 (Fel)

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 upp rubrikceller med th-element och använd scope- eller for- och id-attributen för att koppla samman rubrik- och dataceller.

Mer information:

Tabindex-attribut (Varning)

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:

Target-attribut (Varning)

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:

Teckenkodningsfel (Fel)

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 (Varning)

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

Tomma länkar (Fel)

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 (Fel)

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

Mer information:

Trasiga länkar (Fel)

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:

Troliga JavaScriptlänkar (Fel)

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 (Varning)

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 (Varning)

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 (Varning)

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 (Varning)

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:

Kenneth säger:

Har du hittat fel på din webbplats? Vi kan hjälpa dig att komma tillrätta med såväl redaktionella felaktigheter som fel orsakade av ramverket på din webbplats. Tveka inte att slå oss en signal!