Tillgänglighet på webbplatser Göteborgs Universitet föreskrifter för webbdesigners och webbutvecklare

Storlek: px
Starta visningen från sidan:

Download "Tillgänglighet på webbplatser Göteborgs Universitet föreskrifter för webbdesigners och webbutvecklare"

Transkript

1 Tillgänglighet på webbplatser Göteborgs Universitet föreskrifter för webbdesigners och webbutvecklare Version: 2.0 Datum: Inledning Detta dokument beskriver vilka krav som ställs på den gränssnittskod (HTML/XHTML, CSS, JavaScript/ECMAScript, RSS/XML) som används för externa webblösningar inom Göteborgs Universitet. Dokumentet innehåller även beskrivningar av hur respektive kodtyp kan valideras och kvalitetskontrolleras. Dessutom finns en bilaga med krav på grundkonstruktion som utgår från WCAG och e-delegationens riktlinjer (se bilaga 1). Målgruppen är i första hand webbdesigners och webbutvecklare som ska kvalitetskontrollera sin leverans. Goda kunskaper om webbutveckling, särskilt gränssnittsprogrammering, förutsätts. Tillgänglighetsmål All information och alla tjänster som publiceras på Göteborgs universitets externa webbplatser ska vara tillgänglig och användbar för alla besökare, oavsett om de har något funktionshinder och oavsett vilken webbläsare eller vilket operativsystem de använder (under förutsättning att deras webbläsare uppfyller vissa grundläggande krav, se avsnittet "Krav på webbläsare"). I detta dokument används hädanefter webblösning som ett samlingsbegrepp för information och tjänster som är avsedda för webben. Krav på och kontroll av gränssnittskod Ett mycket viktigt led i kvalitetssäkringen av all gränssnittsrelaterad kod som används för Göteborgs Universitets webblösningar är att säkerställa att den är korrekt skriven, det vill säga följer de specifikationer som finns och är skriven enligt god programmeringssed. För att tillgänglighetsmålet ska kunna uppnås är det nödvändigt att riktlinjerna i detta dokument följs av dig som är delaktig i att utveckla webblösningar, och att du använder riktlinjerna från varje projekts början. Att i efterhand göra en webblösning tillgänglig blir med få undantag mycket dyrare än att göra rätt från början. Alla Göteborgs Universitets webblösningar ska följa gällande riktlinjer för tillgänglighet och användbarhet. Det viktigaste dokumentet att följa är World Wide Web Consortiums (W3C) Web Content Accessibility Guidelines (WCAG) 2.0, finns på I e- delegationens Riktlinjer för webbutveckling så är också den första riktlinjen R1, Utgå från WCAG 2.0 nivå AA. Även den resterade110 riktlinjerna är viktiga att ta hänsyn till. Dessa finns på Syftet med föreskrifterna är att säkerställa att alla webblösningar är tillgängligt konstruerade, robusta och framtidssäkra, och därmed fungerar med alla typer av webbläsare

2 och hjälpmedel för funktionshindrade. Uppmärkningskod (HTML/XHTML) Den uppmärkningskod som används för att strukturera dokument och ge innehåll betydelse ska validera enligt XHTML 1.0 Strict. På används för närvarande XHTML 1.0 Transitional för att minska antalet valideringsfel orsakade av gammalt innehåll. Nyutvecklad kod ska valideras mot XHTML 1.0 Strict. Det finns flera verktyg som hjälper dig som utvecklare att kvalitetssäkra uppmärkningskod. Ett allmänt råd är att använda verktygen kontinuerligt under utvecklingen. Annars finns risk att delar av webblösningen blir baserad på och beroende av felaktig uppmärkningskod. W3C:s tjänst för validering av uppmärkningskod HTML validerar du med hjälp av W3C:s tjänst för validering av uppmärkningskod (hädanefter kallad HTML-valideraren), I HTML-validerarens webbaserade gränssnitt kan du ange vilken kod som ska valideras på tre olika sätt: Genom att ange ett dokuments URL Genom att ladda upp en fil Genom att klistra in kod i ett textfält Web Developer Extension För webbläsaren Firefox finns tillägget Web Developer Extension som har funktioner för att automatiskt anropa HTML-valideraren. För att validera ett dokument öppnar du det i webbläsaren och väljer Tools/Validate HTML från Web Developer Extensions verktygsrad. För att detta ska fungera måste dokumentet finnas publikt åtkomligt och inte vara skyddat av till exempel inloggning. För att validera dokument som inte är publikt åtkomliga kan du i stället välja Tools/Validate Local HTML. Då skickas koden, inte sidans URL, till HTML- valideraren. HTML Validator Extension Ett annat tillägg för Firefox är HTML Validator Extension. När tillägget är installerat gör det en kvalitetskontroll av varje dokument du laddar i webbläsaren. Det finns två olika typer av validering i HTML Validator Extension HTML Tidy- respektive OpenSP- baserad. För att få samma resultat som W3C:s HTML-validerar ska HTML Validator Extension vara inställd på att använda enbart SGML parser. Stilmallskod (CSS) För att styra presentationen av webblösningar ska du använda Cascading Style Sheets (CSS) stilmallar på svenska. CSS-koden ska validera enligt vald nivå, till exempel CSS 2, 2.1 eller 3.

3 Undantag från valideringskravet kan göras för CSS-regler som är avsedda att korrigera felaktigt beteende i Internet Explorer för Windows, under förutsättning att så kallade Conditional Comments används för att säkerställa att endast Internet Explorer applicerar dessa regler. Undantag kan också göras för leverantörsspecifika tillägg (vendor specific extensions) som följer W3C:s regler för hur sådana egenskaper ska namnges. I båda fallen är det lämpligt att skriva förklarande kommentarer i CSS-koden, så att det blir tydligt för andra utvecklare varför man har använt CSS som ger valideringsfel. All CSS-kod ska laddas från externa filer. Precis som för HTML finns flera verktyg som hjälper dig som utvecklare att kvalitetssäkra CSS. W3C:s tjänst för validering av stilmallskod CSS validerar du med hjälp av W3C:s tjänst för validering av stilmallskod (hädanefter kallad CSS-valideraren), På samma sätt som i HTML-valideraren låter CSS-validerarens webbaserade gränssnitt dig ange vilken kod som ska valideras på tre olika sätt: Genom att ange ett dokuments URL Genom att ladda upp en fil Genom att klistra in kod i ett textfält Observera att CSS-valideraren i dagsläget är förinställd på att validera mot CSS 3- specifikationen. Om din CSS-kod använder selektorer eller egenskaper som definieras i en tidigare version av CSS måste du manuellt ange vilken version CSS-valideraren ska använda. Val för detta finns i CSS-validerarens utökade gränssnitt. Web Developer Extension Web Developer Extension kan hjälpa till med CSS-validering på samma sätt som med HTML-validering. För att validera den CSS ett dokument innehåller eller laddar från externa filer öppnar du dokumentet i webbläsaren och väljer Tools/Validate CSS eller Tools/Validate Local CSS från Web Developer Extensions verktygsrad. Firebug Ett annat verktyg som är mycket bra för att undersöka hur olika delar av ett dokument påverkas av den CSS man använder är Firefoxtillägget Firebug. Utförlig information om hur man använder Firebug för detta finns i CSS Development på Firebugs webbplats. JavaScript Att validera JavaScript är inte lika rakt på sak som att validera HTML eller CSS. Det finns verktyg som kontrollerar att man har använt korrekt syntax, men inget som verifierar att alla metoder och objekt finns i W3C:s DOM (Document Object Model, definierar hur objekt i HTML-dokument exponeras för skript) eller hur väl de stöds av olika webbläsare.

4 Därför är funktionstester i de webbläsare som finns specificerade i avsnittet Krav på webbläsare mycket viktiga. Notera att grundläggande funktionalitet som navigering och enkel sökning inte får vara beroende av JavaScript. Därför är det mycket viktigt att avaktivera JavaScript och därefter kontrollera att det fortfarande går att använda webblösningen, om än inte på exakt samma sätt. All användning av JavaScript ska ske enligt principen för Progressive enhancement och där det är relevant använda sig av WAI-ARIA för att säkerställa att all funktionalitet är användbar med hjälpmedel som till exempel skärmläsare. JSLint, The JavaScript Verifier JSLint består av ett textinmatningsfält som du klistrar in koden som ska verifieras i. Det går att göra vissa inställningar för att reglera nivån på de varningar som genereras. Varningarna kan upplevas som mycket strikta eftersom de rapporterar viss syntax som är tillåten som potentiella källor till problem. Det finns dock anledningar till det (se dokumentation på JSLints webbplats), så målet bör vara att åtgärda alla rapporterade problem. JavaScript Lint JavaScript Lint är samma typ av verktyg som JSLint, och har även det ett textinmatningsfält. JavaScript Lint finns även som ett fristående program. Firebug Firebug innehåller en utmärkt JavaScript-debugger och visar eventuella JavaScriptfel i en konsoll. Mer information om hur man använder Firebug för detta finns i JavaScript Debugging. Funktionstest i webbläsare Även om inget av verktygen rapporterar några problem är det inte självklart att skriptet kommer att fungera i alla webbläsare. Därför måste du komplettera syntaxverifieringen med funktionstest i de webbläsare som är aktuella enligt avsnittet Krav på webbläsare. Annan teknik, till exempel Adobe Flash Om det är väl motiverat kan även annan teknik än HTML och CSS, till exempel Adobe Flash, användas. Det finns dock en del viktiga saker att tänka på. Använd inte Flash eller andra format som kräver insticksprogram för kritisk funktionalitet som navigering eller formulärhantering. Går problemet att lösa med HTML, CSS och JavaScript? I så fall är det att föredra. Det ska alltid finnas alternativ för besökare vars webbläsare inte har stöd för tekniken. Flash ska precis som JavaScript implementeras enligt principen för Progressive enhancement, till exempel med hjälp av swfobject. Om Flash används ska själva innehållet göras så tillgängligt som möjligt med hjälp av det tillgänglighetsstöd som finns i utvecklingsverktyget för Flash. Var dock medveten om att Flash i dagsläget inte stöds av alla hjälpmedel.

5 Nyhetsflöden (RSS/XML) Den kod (RSS i XML-format) som används för att tillhandahålla nyhetsflöden ska validera enligt vald standard (RSS 1.0 eller RSS 2.0). För nyhetsflöden rekommenderas formatet RSS 2.0, men det går även att använda RSS1.0. För att göra det lättare för besökare att hitta och prenumerera på nyhetsflöden bör länkar till sådana finnas i varje HTML-dokuments head-element och följa syntaxen för RSS Autodiscovery. Det gör det möjligt för webbläsare att visa för användaren att webbplatsen har ett RSS-flöde. W3C:s tjänst för validering av nyhetsflöden Nyhetsflöden validerar du med hjälp av W3C:s tjänst för validering av RSS och Atom, I flödesvaliderarens webbaserade gränssnitt kan du ange vilken kod som ska valideras på två olika sätt: Genom att ange en URL Genom att klistra in kod i ett textfält Teknisk tillgänglighet Här beskrivs hur du gör en grundläggande kontroll av teknisk tillgänglighet. Kontrollen berör endast i begränsad omfattning hur tillgängligt skrivet, organiserat eller presenterat själva innehållet är. Den delen av tillgänglighetsarbetet är i huvudsak en fråga för interaktionsdesigners, grafiska formgivare och redaktörer. I bilaga 1, finns krav för grundkonstruktion av webbplats, där finns krav som utgår från riktlinjerna som beskrivs under rubriken Krav på och kontroll av gränssnittskod. Det är mycket viktigt att vara medveten om att det inte går att göra någon fullständig kontroll av tillgänglighet med hjälp av automatiserade verktyg. Anledningen är att tillgänglighet handlar om hur användbart ett dokument eller en webbplats är för människor. Därför är det inte möjligt att på ett tillfredsställande sätt utföra sådana kontroller utan medverkan av mänsklig expertis. Onlinetjänster Det finns ett antal onlinetjänster som kan fungera som stöd vid utvärderingen. NetRelations Inspector Truwex Online HiSoftware Cynthia Says Att använda dessa verktyg kräver inga avancerade förkunskaper, men för att utvärdera resultaten på ett korrekt sätt krävs expertkunskaper inom tillgänglighet.

6 Web Developer Extension Web Developer Extension, som redan nämnts flera gånger, har många funktioner som underlättar utvärdering av tillgänglighet. I granskningsförfarandet nedan hänvisas i många fall till dem. Granskningsförfarande Var medveten om att detta inte är en uttömmande granskning. Tillgänglighetsproblem kan finnas även om inga problem noteras, men de problem som orsakar störst olägenhet bör fångas upp av detta. 1. Validera uppmärkningskod med hjälp av W3C:s HTML-validerare, 2. Validera stilmallskod med hjälp av W3C:s CSS-validerare, 3. Använd inga ramar (frame- eller iframe-element). 4. Kontrollera att alternativtext för bilder används på rätt sätt med hjälp av Web Developer Extensions funktion Images/Replace Images With Alt Attributes samt genom att kontrollera källkoden. För dekorativa bilder ska alt-attributet innehålla en tom sträng (alt=""). Om bilden innehåller text ska alt-attributet innehålla motsvarande text. Om bilden är länkad ska alt-attributet beskriva vart länken leder eller vilken funktion den har. Om länken även innehåller beskrivande text kan bilden ha tom alt-text. 5. Stäng av JavaScript och kontrollera att webblösningen fortfarande går att använda. Detta gör du enklast genom att välja Disable/Disable JavaScript/All JavaScript från Web Developer Extensions verktygsrad. 6.. Öka textstorleken i webbläsaren. Dels ska textstorleken faktiskt gå att ändra i alla webbläsare, dels ska inget innehåll försvinna eller bli oläsligt när textstorleken har ökats inom rimliga gränser. Designen bör klara att textstorleken ökas till 200 % enligt WCAG Kontrollera att riktiga rubriker (h1-h6-element) används och används på rätt sätt genom att välja Information/View Document Outline från Web Developer Extensions verktygsrad. Resultatet ska vara en tydlig dokumentstruktur liknande den man får i Microsoft Word genom att välja "Visa/Disposition". Varje sida ska ha en huvudrubrik (h1), och inga rubriknivåer får hoppas över. Rubriker av nivå 2 kan få finnas före huvudrubriken om de används för att förtydliga vad olika delar av sidan innehåller, till exempel Huvudnavigering eller Undernavigering. 8. Stäng av CSS och kontrollera att webblösningen fortfarande går att använda. Detta gör du enklast genom att välja CSS/Disable Styles/All Styles från Web. Developer Extensions verktygsrad. 9. Kontrollera färgkontraster för text. Med hjälp av WCAG Contrast checker kan man snabbt få en översikt av eventuella problem. Andra verktyg som rekommenderas är Colour Contrast Check, ett onlineverktyg som gör det enkelt att prova ut fungerande färgkombinationer med hjälp av skjutreglage, och Contrast Analyser, som är ett fristående program för Windows och Mac OS X.

7 10. Lägg undan musen och kontrollera att det går att navigera på webblösningen samt använda den eller de funktioner som tillhandahålls enbart med hjälp av tangentbordet. Kontrollera också att det tydligt framgår vilket element på sidan som har fokus. 11. Datatabeller ska vara korrekt kodade. HTML-tabeller ska endast användas för att presentera information i tabellformat. För att de ska bli tillgängliga krävs att de är kodade på rätt sätt och använder de tillgänglighetsrelaterade element och attribut som finns i HTML. Detta kontrollerar du genom att välja "Information/Display Table Information" i Web Developer Extension. Rad- och kolumnrubriker ska då få en text som säger att de är "Heading for this row" eller "Heading for this column". 12. Formulär ska vara uppbyggda på rätt sätt. Till exempel ska alla inmatningsfält ha en förklarande fältetikett, och den ska vara ihopkopplad med fältet. Forms/View Form Information i Web Developer Extension underlättar vid denna kontroll. I tabellen Elements listas de inmatningsfält som finns i respektive formulär, och i kolumnen Label visas respektive fälts etikett. Krav på webbläsare För full funktionalitet är det rimligt att kräva att webbläsare har stöd för följande: HTML 4.01/XHTML 1.0 CSS 2.1 JavaScript + DOM Level 2 Dock ska stöd för HTML 4.01 vara tillräckligt för att kunna ta del av all information och använda de viktigaste tjänsterna. För webbläsare som saknar stöd för CSS och/eller JavaScript/DOM Level 2 finns inga krav på bibehållen presentation eller kompletterande gränssnittsfunktionalitet. Däremot ska grundfunktionalitet finnas. Ingen webbläsare får medvetet utestängas samma sak i olika webbläsare. Vissa skillnader i utseende är ofrånkomliga och helt i linje med webbens heterogenitet. Exempel på webbläsare Att namnge specifika webbläsare och versioner av dem är vanskligt i ett dokument som ska leva vidare under en relativt lång tidsperiod. Dock går det att säga vilka webbläsare som i skrivande stund (kvartal 2, 2010) anses ha tillräckligt bra stöd för webbstandarder för att uppnå full funktionalitet. Man kan dela in webbläsare i olika familjer beroende på vilken renderingsmotor de använder. Följande familjer, med exempel på webbläsare, är i dagsläget tillräckligt spridda och moderna för att de ska vara relevanta att testa i: Gecko (Firefox, Camino, Flock) WebCore (Safari, Chrome, OmniWeb, Shiira) Presto (Opera) Trident (Internet Explorer för Windows) När dessa renderingsmotorer utvecklas eller nya tillkommer behöver en professionell bedömning göras för att avgöra om de ska ingå i testproceduren. I dagsläget ska testning utföras minst i följande webbläsare från angiven version och senare: Firefox 3.6 och senare

8 Safari 3.0 och senare Chrome Internet Explorer version 7 och senare Godkända tester i dessa webbläsare innebär med stor sannolikhet att webblösningen fungerar tillfredsställande även i andra webbläsare inom samma familj. Ett viktigt undantag gäller dock för Internet Explorer. Det som fungerar i Internet Explorer 7 kan inte utan vidare antas fungera eller se likadant ut i nyare versioner. För äldre versioner av dessa webbläsare gäller generellt att de antingen visar gränssnittet med vissa skönhetsfel eller att de visar gränssnittet helt utan extern form, det vill säga enbart baserat på sina egna fördefinierade stilmallar. Nyare versioner av de nämnda webbläsarna, eller helt nya webbläsare som inte nämns här, bör inte framkalla problem såvida inte deras stöd för webbstandarder försämras. Nedlagda webbläsare som Netscape 4 och Internet Explorer för Mac OS når inte upp till den nivå som krävs för full funktionalitet och fullgod presentation. Därför blir deras funktionalitet begränsad till den som uppnås med enbart HTML-lagret. Bedömning av problem Eventuella problem som uppstår vid testning i webbläsare kan delas in i två grupper skönhetsfel och funktionsfel där funktionsfel anses vara betydligt allvarligare. Funktionsfel Med funktionsfel avses problem som leder till att den som använder den aktuella webbläsaren inte på ett tillfredsställande sätt kan ta del av all information eller utnyttja all funktionalitet som webbplatsen tillhandahåller. Denna typ av fel ska åtgärdas. Skönhetsfel Med skönhetsfel avses problem som leder till att webbplatsens presentation i den aktuella webbläsaren inte är optimal. Skönhetsfel som innebär försämrad läsbarhet eller tillgänglighet ska åtgärdas. Övriga skönhetsfel bör åtgärdas när så är möjligt.

9 Bilaga 1- Krav på grundkonstruktion och grundläggande design före leverans Nedan följer krav på grundkonstruktion och grundläggande design. Riktlinjer utöver detta från WCAG och Riktlinjer för webbutveckling ska följas där de är applicerbara. Hänvisning till riktlinjer avser riktlinjer för webbutveckling (webbriktlinjer.se). Dessa markeras med R följt av riktlinjens nummer. I vissa fall hänvisas till WCAGs riktlinjer de finns på Struktur och navigation Startsida Startsidan ska tydligt visa att det är Göteborgs Universitet som är avsändare. Startsidan ska vägleda besökaren in till webbplatsens olika delar. Använd inte animeringar och onödiga introduktionssidor som visas innan webbplatsens startsida. Använd startsidan för att tydliggöra syftet med webbplatsen. Sidan ska kallas startsida. Startsidan ska vara åtkomlig från alla sidor på webbplatsen. R30 Sökningen ska vara åtkomlig från alla sidor. WCAG Första länk på sidan ska vara Till innehållet, som ska vara en länk till huvudrubriken på sidan. R75 Accesskey ska användas för att lägga in kortkommandon, i riktlinje R68 anges förslag på kortkommandon. Lägg accesskey på de befintliga länkarna, inte som en rad länkar i början av sidan. Länkar och tydlig navigering Var konsekvent i navigation, struktur och utformning Låt menyns placering vara densamma och fungera likadant på hela webbplatsen. Undvik att placera viktigt innehåll långt till höger på sidan. Undvik helt att lägga innehåll till höger om huvudspalten när sidan ligger långt ner i strukturen. R 29

10 Struktur och navigation Titeln på sidan ska hjälpa användaren att veta vart hon/han befinner sig. Formen: Unika sidan (avdelning/meny)- Göteborgs universitet WCAG Hjälp användarna förstå var de är på webbplatsen Detta kan göras på flera sätt, dels visuellt för presentationen på bildskärmen, dels tekniskt för användare med hjälpmedel. Det ska finnas en Länkstig (smullist). Det ska framgå visuellt vart användaren befinner sig, genom att det syns tydligt vilken länk i huvudmenyn som är vald, och vilken länk i undermenyn som är aktiv. Detta kan bland annat göras genom annan bakgrundsfärg för aktiva länkar. Visuell tydlighet av nivå i navigeringen kan åstadkommas med indrag och/eller markeringar i färg, form eller kontrast. Använd inte enbart färg. Använd punktlistor för att bygga upp navigeringsnivåerna. Var konsekvent i formuleringen av rubriker och länktexter. Samma ordval som i menyn eller textlänken bör återkomma i den länkade sidans rubrik. R27 Länklistor När flera länkar ligger grupperade ska dessa ligga i en lista (UL). Om navigering har nivåer som fälls ut ska dessa ligga i nästlade listor. WCAG När länkar läggs under varandra är det viktigt att det framgår visuellt tydligt när en länk börjar och slutar, så att inte raderna med länkar flyter ihop. Särskilt viktigt när länkar radbryts. När länkar placeras på en rad ska det finnas en visuell avgränsning. Denna placeras som bakgrundsbild. När undermenyer i vänstermeny visas är det viktigt att det framgår tydligt, vad som är undernivå. se även R34

11 Struktur och navigation Det ska tydligt framgå vad som är klickbart. Använd olika färger för besökta och icke-besökta länkar, men det måste framgå på något mer sätt vad som är länkat. Exempelvis genom en symbol som placeras som en bakgrundsbild före länkar eller genom understrukna länktexter. Det är viktigt att inte enbart färg visar vad som är länk. Användning av länkutseende ska vara konsekvent. R34 Öka storleken på klickbara ytor, genom att lägga till innermarginaler (padding) runt länkelement i den klickbara ytan. R34 Tangentbordstyrning ska stödjas fullt ut. Användare som inte använder sig av muspekare för att navigera ska kunna använda tab tangent eller pil tangent (skärmläsare för gravt synskadade) för att navigera på webbsidor. WCAG 2.1.1, 2.1.2, 2.4 Länkar ska ändra utseende när användaren pekar på länken och när länken har tabbfokus. Gör en tydlig förändring av länken som är lätt att se även för synsvaga. WCAG R34. Det ska framgå om länkar öppnas i nytt fönster, i textform eller med en symbol med alternativtext (alt= Nytt fönster ). Symbolen får inte vara en bakgrundsbild utan bilden ska ingå i länktaggen. Detta gäller även för dokument, där ska även framgå format och storlek. Formattext kan ersättas av en symbol med alternativtext exempel alt= Word, nytt fönster. WCAG 3.2.4, Se till att bakåt-knappen alltid fungerar. Diskutera och bestäm om och varför eventuella undantag från detta görs. R97 Rubriker Se till att Rubrik och titel på sidan överensstämmer. De ska också överensstämma med Länken som går till aktuell sida. R27 Alla sidor ska ha en huvudrubrik (h1). Den första rubriken på sidan ska vara en Huvudrubrik (h1). R105

12 Struktur och navigation Alla visuella rubriker ska kodas som rubriker. De ska ha en struktur som är riktig. Ingen nivå får hoppas över. Skapa rubriker med HTML-element (h1 h6). Det ska finnas klasser för olika rubriknivåer i CSS:en. Om det behövs ska det skapas flera varianter av varje rubriknivå, exempel om layouten kräver att en h2 ser olika ut om den är placerad i mittenkolumn eller högerkolumn. R105 Bilder Ange alltid alternativattribut för bilder, som inte är bakgrundsbilder. Bilder som är klickbara ska ha en alternativtext som beskriver vart länken leder, Exempel logotyper Bilder med text ska ha en alternativtext som motsvarar texten på bilden. För bilder som behöver en längre förklaring, gör en länk till en egen sida Bilder som inte är meningsbärande ska ha en tom alternativtext (alt= ) eller placeras som bakgrundsbilder. WCAG 1.1.1, Använd inte bokstavsbilder, och inte onödiga tecken som >> eller. Om dessa används lägg dem som bakgrundsbilder. Val av standarder, kodning och krav på insticksprogram Vi vill att webbplatsen ska följa standarden XHTML 1.0 Strict (http://www.w3.org/tr/xhtml1/dtds.html#a_dtd_xhtml-1.0- Strict) och CSS 2.1. Vid leveranser av mallar ska dessa följa standarder och klara av validering av kod enligt W3C:s uppmärkningsspråksvalidering samt stilmallsvalidering. Dokumenttypsbeskrivning måste finnas för att validering ska kunna göras. Se till att koden ligger i den ordning som sidan ska läsas, så läsordning och tabbordning är logisk och korrekt. Märk upp sidor eller text som har ett språk som avviker från valt språk. Exempel om text är på engelska på en svensk webbplats, ska texten märkas upp med hjälp av lang-attribut. R 80, 81, 82, 84

13 Val av standarder, kodning och krav på insticksprogram Webbplatsens grundläggande funktioner ska inte vara beroende av javaskript. Alla sidor ska kunna visas utan javaskript. Alla tjänster ska kunna användas i ett grundutförande utan javaskript. Om skript används ska de användas för extrafunktionalitet. Skript ska inte användas för funktioner som redan finns i webbläsare eller fungerar lika bra utan skript. Diskutera om och hur skript ska användas. R93 Undvik Flash eller andra insticksprogram om det används ange hur det ska vara tillgängligt för alla. R86 Flimmer, blinkningar i gränssnittet ska inte användas. Rörelser eller animationer i gränssnittet ska undvikas och om de används ska användaren kunna pausa eller stänga av rörelserna. Layout Externa stilmallar (CSS) ska användas för att styra presentation och layout, till exempel hur olika menyer och kolumner av innehåll är placerade samt visuell presentation. Style-attribut ska inte finnas i html-kodningen. R82 Tabeller och ramar (frames) ska inte användas för layout. Tabeller ska enbart användas för att presentera data. R83 Webbsidan/funktionen ska utvecklas med flexibla måttenheter. Webbsidorna ska fungera att ta till sig om användaren har en stor eller en liten skärm. Låg eller hög upplösning. Det ska inte bli en horisontell rullningslist när upplösningen är låg. Texten bör flöda neråt vid förstoring av text. R91 Texten ska fungera att förstora till 200 % utan att layouten förstörs så att det inte går att ta till sig innehållet. Texten ska vara angiven med måttenheten em. WCAG Webbplatsen ska kunna användas även om stilmallarna är avstängda eller inte kan tolkas. R92.

14 Layout Webbplatsen ska ha en separat stilmall för utskrifter. R96 Färg, kontrast och typografi I universitetets CMS ingår färdiga mallar med layout och en gemensam uppsättning typsnitt för till exempel brödtext, ingress och rubrik. Mallarna erbjuder olika möjligheter att profilera varje verksamhet inom ramen för Göteborgs universitet. Detta gör att våra besökare känner igen universitetets webbplats men kan ta del av den profil som varje verksamhet vill förmedla. Det är inte tillåtet att ändra presentationen i GU:s stilmallar på webbsidor vad gäller teckensnitt, teckenstorlek, färger och bakgrunder. Det är inte heller tillåtet att ändra utseende och formatering på sidhuvud, sidfot och vänstermarginal. Kontrasten mellan för- och bakgrundsfärg på webbplatsen ska vara minst 4,5:1. Undantag kan göras för logotyper och stor text. Färgerna ska följa Göteborgs Universitets grafiska profil. WCAG Ge webbplatsen en god läsbarhet Teckensnitt, teckengrad, radavstånd, stycken och spaltbredder ska följa standarder för god läsbarhet. R39 Menyposter och rubriker ska vara skrivna versalgement med stor begynnelsebokstav. Vänstermenyer ska vara vänsterställda. R39 Formulär, sökfält och andra inmatningsfält. Följ råd kring formulär R50,R52-R60 Fältetiketterna till samtliga fält på webbplatsen ska vara ihopkopplade med respektive fält (label). WCAG Alternativt kan fältet innehålla ett Value som visas i fältet, och en titel. Gruppera formulärfält med fieldset och legend. R53 Fel inmatning i formulär Systemet ska i första hand automatiskt omvandla information

15 Formulär, sökfält och andra inmatningsfält. som ifylld på fel format till det format som systemet behöver för att behandla informationen. Till exempel ordningen och bindestrecken i telefonnummer, personnummer och datum. Ge begripliga felmeddelanden R2 Alla formulär på webbplatsen ska vara oberoende av inmatningsenhet. Till exempel att det går att navigera i och skicka formulär genom att enbart använda tangentbord. Använd inte onchange-attribut. Tabeller som presenterar data Använd rad- och kolumnrubriker (th och td) och framhäv dem grafiskt. Randa tabeller för att öka läsbarheten, men se till att ha bra kontraster ändå. R98 Koppla ihop dataceller med rubrikceller. R98 Beskriv kortfattat tabellens innehåll med en tabellrubrik (caption) Sökning Ge tydliga sökresultatsidor: Sökmöjligheten ska kvarstå på sidan Sammanhanget för träffen ska visas Antalet träffar på sidan bör begränsas, ex visa tio träffar per sida Det ska framgå vilken avdelning träffarna tillhör Det ska gå att sortera träffarna på olika sätt Ingen onödig information ska visas Dessutom bör sökordet visas och hur många träffar som har hittats. Träffarna bör vara numrerade, det är lättare att hålla isär träffar då. Lägg sökträffarna i en numrerad lista (ol). Träffarna bör vara tydligt avgränsade från varandra

Kunskapscentrumcentrum för Äldres Säkerhet

Kunskapscentrumcentrum för Äldres Säkerhet Kunskapscentrumcentrum för Äldres Säkerhet Kravspecifikation Webbplatsen ska vara uppbyggd så att den följer riktlinjerna från World Web Consortium (W3W). Webbplatsen ska följa standarder för uppmärkningskod.

Läs mer

Kunskapscentrum för Äldres Säkerhet

Kunskapscentrum för Äldres Säkerhet Kunskapscentrum för Äldres Säkerhet Kravspecifikation för webbplats Webbplatsen ska vara uppbyggd så att den följer riktlinjerna från World Web Consortium (W3W). Webbplatsen ska följa standarder för uppmärkningskod.

Läs mer

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0 Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning

Läs mer

Hur tillgänglig är du? Hur tillgänglig är du? Seminariedag om digitalt tillgängliggörande Västmanlands läns museum 2014-02-19

Hur tillgänglig är du? Hur tillgänglig är du? Seminariedag om digitalt tillgängliggörande Västmanlands läns museum 2014-02-19 Hur tillgänglig är du? Om hur du tänker tillgängligt på webben Hur tillgänglig är du? Seminariedag om digitalt tillgängliggörande Västmanlands läns museum 2014-02-19 Pär Lannerö Projektledare webbriktlinjer.se

Läs mer

F15 Tillgänglighet/Accessibility Dagens agenda

F15 Tillgänglighet/Accessibility Dagens agenda F15 Tillgänglighet/Accessibility Dagens agenda Varför bry sig? Vad tjänar jag? WAI Funka Nu WCAG 1, 2 Hjälpmedel Prolog Varför bry sig? En stor del av Sveriges befolkning lider av funktionsnedsättningar

Läs mer

Bilaga 3b. Användbarhet. Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm

Bilaga 3b. Användbarhet. Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm SID 1 (12) Bilaga 3b Användbarhet Förfrågningsunderlag Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm Box 22049, 104 22 Stockholm. Besöksadress

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR UPPDRAGSGIVARE: IT-CENTER VÅR REFERENS: STEFAN JOHANSSON TEL.: 0708-23 10 64 E-POST: stefan.johansson@funkanu.se INNEHÅLL: LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR _ Funka Nu AB Finnbodavägen 2, 131 31

Läs mer

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla 1.0 Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla gör det lättare för personer med olika typer av funktionsnedsättningar

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

2006:01. Undersökning av publiceringsverktyg

2006:01. Undersökning av publiceringsverktyg 2006:01 Undersökning av publiceringsverktyg 1 (19) Innehåll TILLGÄNGLIGARE WEBBPLATSER MED HJÄLP AV BÄTTRE PUBLICERINGSVERKTYG...2 VAL AV VERKTYG OCH UNDERSÖKNINGENS UPPLÄGG...2 Testkriterier baserade

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Riktlinjer för navigation i mobilgränssnitt Senast uppdaterad 2014-02-21

Riktlinjer för navigation i mobilgränssnitt Senast uppdaterad 2014-02-21 Riktlinjer för navigation i mobilgränssnitt Senast uppdaterad 2014-02-21 Funka Nu AB Döbelnsgatan 21, 111 40 Stockholm 08-555 770 60 kontakt@funkanu.se Innehåll Inledning... 3 Bakgrund... 3 Projektupplägg...

Läs mer

Vägledningen 24-timmarswebben få fler att använda er webbplats. Magnus Burell, Verva

Vägledningen 24-timmarswebben få fler att använda er webbplats. Magnus Burell, Verva Vägledningen 24-timmarswebben få fler att använda er webbplats Magnus Burell, Verva Källa: Skrotbil: Håll Sverige rent, www.hsr.se Källa: The Design of Everyday Things, Donald Norman SAS Coffee Pot: www.ergonomidesign.se

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014 Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014 Kurswebb: www.creativerooms.se/edu, välj Gränssnittsdesign eller Webbutveckling 1 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se

Läs mer

Axalon Process Navigator SP Användarhandledning

Axalon Process Navigator SP Användarhandledning Axalon Process Navigator SP Användarhandledning Axalon Process Navigator SP 2013, senast reviderad: den 11 juni 2014 Innehåll Innehåll... 2 Om denna användarhandledning... 3 Syfte... 3 Vem är denna handledning

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Egenskaper för digitala läromedel och film

Egenskaper för digitala läromedel och film Egenskaper för digitala läromedel och film Digitala läromedel Detta är en sammanställning av vad man bör beakta vid framställning av digitala läromedel för att nå största möjliga tillgänglighet.. Det som

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

Wordpress handledning för distrikt, lokalavdelningar och personsidor

Wordpress handledning för distrikt, lokalavdelningar och personsidor Wordpresshandledning fördistrikt,lokalavdelningaroch personsidor 1 Index Adminpanel... 5 Användare... 21 BWS Plugins... 15 inlägg... 6 Inlägg skapa och hantera... 7 Kategorier... 7 Inställningar... 14

Läs mer

Anna Jonströmer. Bloggning

Anna Jonströmer. Bloggning Anna Jonströmer Bloggning Del 2 BÖRJA BLOGGA 6. Bloggverktyg... 28 7. Skapa en blogg... 31 8. Publicera... 35 9. Inställningar... 39 10. Ändra design... 42 11. Övriga ändringar och funktioner... 48 12.

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Användarutbildning i SiteVision

Användarutbildning i SiteVision Användarutbildning i SiteVision SiteVision AB Version 3 Innehållsförteckning 1 Komma igång med SiteVision...1 1.1 Starta SiteVision... 1 1.2 Redigeringsläget i SiteVision... 2 1.2.1 Verktygslisten...2

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

Webbsidekurs för nybörjare

Webbsidekurs för nybörjare Webbsidekurs för nybörjare Hörselskadades distrikt i Stockholms län (www.distriktet.info) Inledande faktaruta Alla HRF föreningar erbjuds möjligheten att kostnadsfritt publicera information på en egen

Läs mer

Kurs 6:1 Att publicera på webben

Kurs 6:1 Att publicera på webben Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del

Läs mer

Sammanfattning från Stormötet med skolorna 14 april

Sammanfattning från Stormötet med skolorna 14 april Sammanfattning från Stormötet med skolorna 14 april VIKTIGT ATT TÄNKA PÅ NAR VI BYGGER VÅR WEBBPLATS! Målgruppen. Vilken är din målgrupp? Vad vill de veta? Vad vill de göra? Layout och design Tänk på placeringen

Läs mer

PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+

PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ IT-universitetet i Göteborg Interaktionsdesign - Grafiska Gränssnitt 2003-09-17 Deltagare:

Läs mer

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1 Uppdaterad 20131029 WORDPRESSGUIDE 2013 Sida 1 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för både privatpersoner och

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-10-24

Användarhandledning. edwise Webbläsarinställningar 2013-10-24 Användarhandledning edwise Webbläsarinställningar 2013-10-24 Sida 2/22 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompabilitetsläge... 3 1.1.1 Inställningar för kompabilitetsvyn...

Läs mer

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm Användarhandbok (testsite http://www.pahlm.com/dynapahlm/ Förord DynaPahlm är levererat tillsammans med din webbplats från KM-Företagsutveckling. DynaPahlm är ett Content Management System (CMS), fritt

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

Användbarhet för webben

Användbarhet för webben Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk

Läs mer

Användbarhet för webben

Användbarhet för webben Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk

Läs mer

Manual till publiceringssystemet WebMe

Manual till publiceringssystemet WebMe Manual till publiceringssystemet Senast ändrad augusti 2010 Innehåll Logga in... 3 Översikt av sidor/funktioner... 3 Innehåll... 3 Användare... 3 Utseende... 3 Inställningar... 3 Bygg formulär... 4 Postade

Läs mer

Användning av pdf Vägledningen 24-timmarswebben

Användning av pdf Vägledningen 24-timmarswebben 1 (7) Användning av pdf Version 1.1 Uppdaterad: 2007-07-03 Användning av pdf I den här checklistan får du veta hur du skapar tillgängliga pdf-dokument. Checklistan är ett extramaterial till 1. Använd gärna

Läs mer

MANUAL 2.0 SKOLWEBBAR. Nacka kommuns. 2012-09-14 Uppdaterad och redigerad av. Skolutvecklarna, Nacka kommunala skolor

MANUAL 2.0 SKOLWEBBAR. Nacka kommuns. 2012-09-14 Uppdaterad och redigerad av. Skolutvecklarna, Nacka kommunala skolor MANUAL 2.0 Nacka kommuns SKOLWEBBAR 2012-09-14 Uppdaterad och redigerad av Skolutvecklarna, Nacka kommunala skolor Innehållsförteckning 1. Logga in... 4 2. Nyheter... 4 2.1 Skapa nyhetssida = skapa nyhet...

Läs mer

Att skriva rapport. Innehåll

Att skriva rapport. Innehåll Att skriva rapport Innehåll 1 Skapa ny rapport... 2 2 Börja skriva på sidan 7 (udda sida)... 2 3 Formatmallar... 2 4 Egen flik... 3 5 Innehållsförteckning... 3 Uppdatera innehållsförteckningen... 4 6 Titelsidor...

Läs mer

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa

Läs mer

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

DIGITAL MANUAL BILAGA 1 TILL GRAFISK PROFIL KK 13/167

DIGITAL MANUAL BILAGA 1 TILL GRAFISK PROFIL KK 13/167 BILAGA 1 TILL GRAFISK PROFIL KK 13/167 Innehåll Logotyp för webb 2 Användning av logotypen 2 Färger 3 Primärfärger 3 Komplementfärger 3 Att använda färgerna 4 Kontraster 4 Typsnitt 5 Bilder 6 Storlekar

Läs mer

Lathund - webbsidor och filer

Lathund - webbsidor och filer Lathund - webbsidor och filer 2005-09-07 Manualen nås via denna webbadress: http://www.med.lu.se/support Lathund - webbsidor och filer... 1 1. Inloggning... 2 Efter inloggningen... 2 2 Översikt över gränssnittet...

Läs mer

Expertgranskning: Mälardalens Högskola

Expertgranskning: Mälardalens Högskola Expertgranskning: Mälardalens Högskola Funka Nu AB Döbelnsgatan 21, 111 40 Stockholm 08-555 770 60 kontakt@funkanu.se Fakta om rapporten Beställare: Mälardalens Högskola, Per- Arne Hermansson, per- arne.hermansson@mdh.se

Läs mer

ALEPH ver. 16 Introduktion

ALEPH ver. 16 Introduktion Fujitsu, Westmansgatan 47, 582 16 Linköping INNEHÅLLSFÖRTECKNING 1. SKRIVBORDET... 1 2. FLYTTA RUNT M.M.... 2 3. LOGGA IN... 3 4. VAL AV DATABAS... 4 5. STORLEK PÅ RUTORNA... 5 6. NAVIGATIONSRUTA NAVIGATIONSTRÄD...

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

INTERNET EXPLORER HAL och SUPERNOVA version 7

INTERNET EXPLORER HAL och SUPERNOVA version 7 INTERNET EXPLORER HAL och SUPERNOVA version 7 Dokumentet är tillägnat användare av våra skärmläsningsprogramvaror Hal och Supernova version 7.01 och senare. Dokumentet fungerar även utmärkt som en guide

Läs mer

Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word

Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word Enkel guide till ordbehandling med Word 2010 Medieteknik Södertörns högskola 2 september 2011 Du hittar vilka krav

Läs mer

Nya Mina vårdkontakter. En presentation över det nya gränssnittet för invånare

Nya Mina vårdkontakter. En presentation över det nya gränssnittet för invånare Nya Mina vårdkontakter En presentation över det nya gränssnittet för invånare Nyheter i nya Mina vårdkontakter Responsiv design gör Mina vårdkontakter tillgänglig även i mobiltelefon och surfplatta Stöd

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

Läs mer

Bilaga 2. Layoutstöd för examensarbeten och uppsatser

Bilaga 2. Layoutstöd för examensarbeten och uppsatser Bilaga 2 Layoutstöd för examensarbeten och uppsatser Lärstöd Karlstads universitetsbibliotek ht 2007 Layoutstöd examensarbeten och uppsatser ht -07 Innehåll 1. Inledning...1 1.1 Dispositon...2 2. Om omslag...3

Läs mer

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan

Läs mer

Bilaga Digital profilmanual

Bilaga Digital profilmanual Bilaga Digital profilmanual Version 1 Januari 2011 SID 2 Innehåll Inledning... 3 Logotyp... 4 Placering... 4 Alternativ placering... 5 Färger... 6 Färgpalett... 6 Färganvändning... 7 Färghierarki... 8

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Skapa sidor, redigera befintliga samt lägga upp och länka till dokument. Mejla info@handels.se då riskerar inget att falla mellan stolarna.

Skapa sidor, redigera befintliga samt lägga upp och länka till dokument. Mejla info@handels.se då riskerar inget att falla mellan stolarna. Lathund handels.se Skapa sidor, redigera befintliga samt lägga upp och länka till dokument https://www.handels.se/templates/login.aspx?returnurl=/secure är adressen för att kunna logga in i Episerver.

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor

Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor Hemsida Lathund för medlemsföreningar 2015 10 13 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-01-11

Användarhandledning. edwise Webbläsarinställningar 2013-01-11 Användarhandledning edwise Webbläsarinställningar 2013-01-11 Sida 2/14 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Manual Open24 Webtool Systemversion 1.10

Manual Open24 Webtool Systemversion 1.10 Manual Open24 Webtool Systemversion 1.10 Innehållsförteckning Manual... 1 Open24 Webtool... 1 Systemversion 1.10... 1 Innehållsförteckning... 2 1. Allmänt om Webtool... 3 2. Struktur... 3 2.1 Navigeringsträdet...

Läs mer

Tillgängliga pdf-lösningar med Adobe LiveCycle Designer

Tillgängliga pdf-lösningar med Adobe LiveCycle Designer Tillgängliga pdf-lösningar med Adobe LiveCycle Designer Referens: Andreas Cederbom andreas.cederbom@funkanu.se 08-555 770 64 2 (16) Bakgrund har genomfört en undersökning av hur Adobe LiveCycle Designer

Läs mer

Vägledningen för webbutveckling webbriktlinjer.se. Björn Hagström bjorn.hagstrom@enterprise.ministry.se @bjornhagstrom

Vägledningen för webbutveckling webbriktlinjer.se. Björn Hagström bjorn.hagstrom@enterprise.ministry.se @bjornhagstrom Vägledningen för webbutveckling webbriktlinjer.se Björn Hagström bjorn.hagstrom@enterprise.ministry.se @bjornhagstrom Om mig 50% på Edelegationen. Ansvarar för psi och vägledningen för webbutveckling 50%

Läs mer

Bilaga Digital profilmanual

Bilaga Digital profilmanual Bilaga Digital profilmanual Version 3 December 2011 SID 2 Innehåll Inledning... 3 Logotyp... 4 Placering... 4 Alternativ placering... 5 Färger... 6 Färgpalett... 6 Färganvändning... 7 Färghierarki... 8

Läs mer

Joomla CMS Del 2 av 2

Joomla CMS Del 2 av 2 JOOMLA 3 CMS GRUNDKURS DEL 2 AV 2 Innehåll Extern Struktur Menyer och Sidor Användare och Åtkomstnivåer Skapa en sida som kräver inloggning Moduler och Positioner Sökmotor och undermenyer Copyright Mahmud

Läs mer

Riktlinjer för utveckling av tillgängliga mobilgränssnitt Senast uppdaterad 2012-04-30

Riktlinjer för utveckling av tillgängliga mobilgränssnitt Senast uppdaterad 2012-04-30 Riktlinjer för utveckling av tillgängliga mobilgränssnitt Senast uppdaterad 2012-04-30 Funka Nu AB Döbelnsgatan 21, 111 40 Stockholm 08-555 770 60 kontakt@funkanu.se Innehåll Inledning... 3 Om riktlinjerna...

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 1 Villaägarnas Riksförbund Sollentuna 2011 Postadress Besöksdress Telefon Fax E-post Hemsida Box 7118, 192 07 Sollentuna Johan Berndes väg 8-10 010-750

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

Guide till hur du sköter din förenings hemsida. Kommentarer till Oscar om tillkommande saker: responsiv design nyhetsbrev

Guide till hur du sköter din förenings hemsida. Kommentarer till Oscar om tillkommande saker: responsiv design nyhetsbrev Guide till hur du sköter din förenings hemsida Kommentarer till Oscar om tillkommande saker: responsiv design nyhetsbrev 1 Innehåll Guide till hur du sköter din förenings hemsida Innehåll Bakgrund Ett

Läs mer

Joel Sundberg 2012-02-27

Joel Sundberg 2012-02-27 CIVILFÖRSVARSFÖRBUNDET Manual för civil.se En guide för webbansvariga Joel Sundberg 2012-02-27 Uppdaterad 2014-05-16 Malin Håkansson INNEHÅLL Förberedelser... 3 Hitta på civil.se... 3 Användare... 3 Uppdatera

Läs mer

Word 2003. bengt hedlund

Word 2003. bengt hedlund Word 2003 bengt hedlund Det här dokumentet är tänkt underlätta för Dig när Du arbetar med Word. I kursen Datagrund, när Du skriver en rapport i någon annan kurs, eller i varje sammanhang när Du vill använda

Läs mer

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2.

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2. Joomla - Administrationsguide Joomla - Administrationsguide 1 Logga in i administrations-gränssnittet 2 Ändra globala inställningar 2 Ändra titel 3 Artiklar, kategorier och sektioner 4 Skapa sektioner

Läs mer

HJÄLPFIL: ELEVAPPLIKATIONEN

HJÄLPFIL: ELEVAPPLIKATIONEN HJÄLPFIL: ELEVAPPLIKATIONEN Innehållsförteckning A. Access och webbläsarkrav B. Funktioner i programmet C. Kontrollpanelen: 1. Huvudinställningar 2. Avancerade inställningar D. Om produkten: en kort översikt

Läs mer

Lathund. Joint Collaboration AB Korta Gatan 7 171 54 Stockholm Tel. 08 28 20 30. www.interaxo.se interaxo@joint.se. Org.nr.

Lathund. Joint Collaboration AB Korta Gatan 7 171 54 Stockholm Tel. 08 28 20 30. www.interaxo.se interaxo@joint.se. Org.nr. Lathund Joint Collaboration AB Korta Gatan 7 171 54 Stockholm Tel. 08 28 20 30 www.interaxo.se interaxo@joint.se Org.nr. 556565-2590 SE INNEHÅLL LATHUND, INTERAXO... 2 1 Varför är det olika färg och utseende

Läs mer

EPiSERVER 7.5. För nybörjare. Krister Holm - Kommunikationsavdelningen Uppdaterad 1 juli 2014

EPiSERVER 7.5. För nybörjare. Krister Holm - Kommunikationsavdelningen Uppdaterad 1 juli 2014 EPiSERVER 7.5 För nybörjare Krister Holm - Kommunikationsavdelningen Uppdaterad 1 juli 2014 1 Vad är nytt? Höger musknapp används inte. Ett nytt sätt att arbeta. Nytt utseende. Responsiv design. Det vill

Läs mer

SLU anpassad lathund

SLU anpassad lathund SLU anpassad lathund för personpresentation i EPiServer uppdaterad 17 maj 2011 För att kunna använda CV mallen på SLU webben krävs två saker: 1. Att man är anställd på SLU och har AD behörighet. Detta

Läs mer

Att använda ELSA. Vad behövs för att använda ELSA?. Felrapportering och support

Att använda ELSA. Vad behövs för att använda ELSA?. Felrapportering och support KI Biobank Instruktion Användarmanual för ELSA Innehållsförteckning Allmänt... 1 Vad är ELSA?... 1 Vad behövs för att använda ELSA?... 2 Felrapportering och support... 2 Att använda ELSA... 2 Viktig information...

Läs mer

för att göra informationen tillgänglig Den här checklistan är ett verktyg då du och dina kollegor ska se över er kommunikation och information.

för att göra informationen tillgänglig Den här checklistan är ett verktyg då du och dina kollegor ska se över er kommunikation och information. Checklista för att göra informationen tillgänglig När du kommunicerar och tar fram information finns det mycket du kan göra för att alla ska kunna ta del av dina budskap. För att informationen ska vara

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

Läs mer