STANDARDISERING & VALIDERING
Standarder som gäller för webb
XML, HTML, CSS, JavaScript, tillgänglighet, användbarhet etc.
ORGANISATIONER
World Wide Web Consortium (W3C) – markup languages & accessibility
International Organization for Standardization (ISO) – XML, HTML
Ecma International – JavaScript, XML
TILLGÄNGLIGHET
Tillgänglighet
•Graden med vilken man kan nå och använda en webbsajt med hjälp av valfri
webbläsarteknologi.
•En tillgänglig webbplats använder sig av de senaste webbteknologierna, samtidigt som den
tillgodoser behoven hos dem som har svårt för, eller inte kan använda, dessa teknologier.
•En tillgänglig webbplats är inte nödvändigtvis användbar! (Tillgänglighet handlar om flexibilitet.)
•Utvecklare måste tänka på att erbjuda mer än ett sätt att göra saker på en webbsajt, så att om
en användare inte kan använda en metod finns andra alternativ till hands.
WAI - Web Accessibility Initiative
Knutet till World Wide Web Consortium (W3C), koordinerar ett globalt arbete för att öka
tillgängligheten på webben inom fem primära arbetsområden:
teknik, riktlinjer, verktyg, utbildning och "outreach", samt forskning och utveckling.
ANVÄNDBARHET
Varför bryr vi oss om användbarhet?
hög användbarhet = optimal användarupplevelsen
snabbt och enkelt hitta den information som eftersöks
informationen ska vara enkel att förstå och använda
lämnar sajten med en känsla av tillfredställelse.
Hög användbarhet gör människor mer effektiva och framgångsrika i
de aktiviteter som webbplatsen erbjuder
På ett intranät bli medarbetarna mer effektiva och framgångsrika i sitt arbete.
När människor är nöjda talar de om det för andra.
Med hög användbarhet når man potentiellt fler människor med sitt budskap.
Effektiv & användbar e-handel på nätet = sälja snabbare och oftare (väljs framför sina konkurrenter).
Med hög användbarhet ökar sannolikheten att affärsmålen nås.
ANVÄNDBARHET_problem
Användarna förstår inte menyn/navigationen
Användarna förstår inte texterna
Sajten har låg tillgänglighet/handikappanpassning.
För mycket information / grafik / bilder / länkar
Oförmåga att snabbt lokalisera information på en webbplats
ANVÄNDBARHET_lösningar
Användbarhetstest – (intervjuer, prototyper, enkäter) mot målgrupp
Riktlinjer för texter (skriva för webben), avgör om de är relevanta för
er målgrupp.
Utgå från WAI och utforma enligt standarder för tillgänglighet.
Innehållsinventering baserat på loggfiler och
användarundersökningar.
Skala bort det som är överflödigt
FUNKTIONSHINDER
Syn
Blinda, nedsatt syn, färgblindhet och synproblem relaterade till åldrande.
Skärmläsare & skärmförstoring eller textförstoring i webbläsare.
Hörsel
Döva eller personer med nedsatt hörsel som behöver hörapparat.
Rörlighet
Fysiska handikapp. rörelsebegränsningar i överkroppen, finmotorik och
koordinationsproblem.
Kognitiva handikapp
Människor med dyslexi och inlärningssvårigheter, mentala handikapp, läs- och
skrivsvårigheter, språkproblem, novis datoranvändare.
FUNKTIONSHINDER_syn
Verktyg för användare med synproblem
Skärmläsare
Jaws
Firevox
Specialanpassade webbläsare
Webbie
Webbläsare som enbart läser text
Links
Lynx
http://www.freedomscientific.com/jaws-hq.asp
http://www.firevox.clcworld.net/
http://www.webbie.org.uk/about.htm
http://lynx.browser.org
FUNKTIONSHINDER_syn
ETIKETTER - LABELS
<label for="town">Enter the name of your town:</label>
<input type="text" id="town">
<tr>
<td>
<label for="promocode">Promotional Code<label>
</td>
<td>
<input type="text" id="promocode">
</td>
</tr>
FUNKTIONSHINDER_syn
ALT & LONGDESC ATTRIBUT FÖR BILDER
<img src="boat.gif" alt="Big Boat">
<img longdesc="img_longdesc.htm">
OBS!
Använd alt=”” (tom beskrivning) vid bilder som inte har någon funktion
eller vars innehåll redan finns representerat i en tillhörande text.
FUNKTIONSHINDER_färgblindhet
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Trichromat: Normal färgsyn
Anomalous Trichromat: en av de tre färgreceptorerna felaktiga
Protanomaly: svårt att se rött.
Deuteranomaly: svårt att identifiera grönt.
Tritanomaly syn: svårt att identifiera blått.
Dichromat: använder enbart två av tre färgreceptorer, gröna och röda.
Protanopia: Kan inte se rött alls.
Deuteranopia: Kan inte se grönt alls
Tritanopia: Kan inte se blått alls.
Monochromat: Kan enbart uppfatta en färg.
8% av den manliga befolkningen, men endast
1% av den kvinnliga beräknas vara färgblinda
FUNKTIONSHINDER_färgblindhet
Åtgärder
Text som stödjer navigation ska vara hög kontrast
Ex. Rubriker, underrubriker, bild och knapp text
Använda aldrig grön text på gul bakgrund.
Går inte läsa alls för personer med dichromatisk färgblindhet.
Undvik att använda för mycket färg i själva huvudinnehållet.
Använda mörk text på vit bakgrund vid längre textstycken.
Använd verktyg för att kontrollera din webbplats för olika typer av färgblindhet.
Ex. http://www.vischeck.com/vischeck/vischeckURL.php
http://wholeintegration.com/blog/web-design-accommodating-color-blind-browsers
FUNKTIONSHINDER_hörsel
All information nödvändig för webbplatsen i textform.
Visuell feedback.
Textning för instruktionsfilmer alternativt kompletterande instruktion
med text.
FUNKTIONSHINDER_rörlighet
Navigationen viktig för de med rörlighetsproblem!
Anvancerade ”utfällbara” menyer = stora svårigheter
Tabindex
tabindex attribut kan användas med <input>, <a>, <textarea>, <select>, och <button> element
<form>
Field 1 (first tab selection):
<input type="text" name="field1" tabindex=1 /><br />
Field 2 (third tab selection):
<input type="text" name="field2" tabindex=3 /><br />
Field 3 (second tab selection):
<input type="text" name="field3" tabindex=2 /><br />
</form>
FUNKTIONSHINDER_kognition
Undvik för mycket grafik, bilder och plottrig text i huvudinnehållet.
Tydliga rubriker och navigering.
Titlar/Rubriker
Passande titel för varje sida
För databaser, bloggar, arkiv ta med datum i titel/rubrik
t.ex. BB-bilder fredag den 28 november 2008
Underkategorier, börja med namnet på webbplats sedan underkategori
t.ex. Dustin.se/Datortillbehör/Monitorer
KODVALIDERING
Varför validera sin kod?
Enklare utveckling och underhåll: logisk HTML gör det enklare och snabbare att sätta sig in i
kod som någon annan har skrivit.
Kompatibilitet: korrekt kod minskar risken att framtida webbläsare inte kan hantera dokumenten.
Snabbare nedladdning/uppritning: Mindre mängd HTML ger mindre filstorlekar.
Bättre tillgänglighet: HTML där strukturen är separerad gör det enklare för skärmläsare och
webbläsare i andra apparater än persondatorer att tolka innehållet.
Bättre sökmotorplacering: Separationen av innehåll och presentation gör att innehållet upptar
en större del av filen. Detta tillsammans med logisk HTML leder till bättre placering hos
sökmotorer.
Enklare anpassning: Ett dokument uppmärkt med logisk HTML kan enkelt anpassas för utskrift
och olika typer av webbläsare, till exempel handdatorer och mobiltelefoner, bara genom att
länka till en annan CSS-fil.
KODVALIDERING_doctype
Högst upp i varje HTML/XHTML dokument
DTD – Document type declaration
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://www.alistapart.com/stories/doctype/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ofullständig, inaktuell, eller till och med ingen DOCTYPE alls leder till “Quirks mode”. D.v.s
webbläsaren tolkar din sida på ett bakåtkompatibelt sätt. Tolkar t.ex. CSS för att matcha
det utseendet koden skulle haft i äldre versioner av webbläsaren.
KODVALIDERING_språk
Ange vilket språk som används i dokumentet. (bl.a. viktigt för sökmotorer och skärmläsare)
HTML 4
<html lang=”sv”>
XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv” xml:lang="sv">
XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
Flera språk i samma dokument
EX språk taggar
Engelska: en
<html lang="de">
Franska: fr
Ändert sich's Wetter oder es bleibt wie's ist
Tyska: de
<blockquote lang="en">
Svenska: sv
Cucumbers for the people.
</blockquote>
</html>
http://www.loc.gov/standards/iso639-2/php/English_list.php
KODVALIDERING_metadata
METADATA
Viktigt för sökmotor-optimering.
(fungerar bara om nyckelord och beskrivning verkligen överenstämmer med innehållet)
<meta name="description" content="Christmas card, send a christmas card">
<meta name="keywords" content="Santa Claus, Merry Christmas, postcard">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
LÄNKAR
Användbarhet & Tillgänglighet
http://www.axbom.se/book/export/html/10
http://www.w3.org/WAI/
//testa förgrunds- och bakgrundsfärger för färgblindhet
http://www.iamcal.com/toys/colors/
Validering
//Alla de nödvändiga valideringsverktygen
http://www.craigcecil.com/checkyoursite.htm
//kontrollera tillgängligheten
http://wave.webaim.org/
CSS, HTML, utseende
http://browsershots.org/ //se din webbsida i olika webbläsare
http://getfirebug.com/ // webbutvecklingsverktyg för Firefox
