STANDARDISERING & VALIDERING ORGANISATIONER World Wide Web Consortium (W3C) – markup languages & accessibility International Organization for Standardization.

En presentation över ämnet: "STANDARDISERING & VALIDERING ORGANISATIONER World Wide Web Consortium (W3C) – markup languages & accessibility International Organization for Standardization."— Presentationens avskrift:

1 STANDARDISERING & VALIDERING ORGANISATIONER World Wide Web Consortium (W3C) – markup languages & accessibility International Organization for Standardization (ISO) – XML, HTML Ecma International – JavaScript, XML Standarder som gäller för webb XML, HTML, CSS, JavaScript, tillgänglighet, användbarhet etc.

2 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.

3 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.

4 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

5 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

6 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.

7 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

8 FUNKTIONSHINDER_syn ETIKETTER - LABELS Enter the name of your town: Promotional Code

9 FUNKTIONSHINDER_syn ALT & LONGDESC ATTRIBUT FÖR BILDER 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.

10 FUNKTIONSHINDER_färgblindhet 1. Trichromat: Normal färgsyn 2. Anomalous Trichromat: en av de tre färgreceptorerna felaktiga 3. Protanomaly: svårt att se rött. 4. Deuteranomaly: svårt att identifiera grönt. 5. Tritanomaly syn: svårt att identifiera blått. 6. Dichromat: använder enbart två av tre färgreceptorer, gröna och röda. 7. Protanopia: Kan inte se rött alls. 8. Deuteranopia: Kan inte se grönt alls 9. Tritanopia: Kan inte se blått alls. 10. Monochromat: Kan enbart uppfatta en färg. 8% av den manliga befolkningen, men endast 1% av den kvinnliga beräknas vara färgblinda

11 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.phphttp://www.vischeck.com/vischeck/vischeckURL.php http://wholeintegration.com/blog/web-design-accommodating-color-blind-browsers

12 FUNKTIONSHINDER_hörsel All information nödvändig för webbplatsen i textform. Visuell feedback. Textning för instruktionsfilmer alternativt kompletterande instruktion med text.

13 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,,,, och element Field 1 (first tab selection): Field 2 (third tab selection): Field 3 (second tab selection):

14 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

15 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.

16 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.

17 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 XHTML 1.0 XHTML 1.1 Flera språk i samma dokument Ändert sich's Wetter oder es bleibt wie's ist Cucumbers for the people. EX språk taggar Engelska: en Franska: fr Tyska: de Svenska: sv http://www.loc.gov/standards/iso639-2/php/English_list.php

18 KODVALIDERING_metadata METADATA Viktigt för sökmotor-optimering. (fungerar bara om nyckelord och beskrivning verkligen överenstämmer med innehållet)

19 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äsarehttp://browsershots.org/ http://getfirebug.com/http://getfirebug.com/ // webbutvecklingsverktyg för Firefox