Tillgänglighetsanpassning SiteVision För att göra webbplatsen mer tillgänglig i SiteVision har vi samlat några tips. Tipsen gäller hur man kan ställa in centrala inställningar i SiteVision, vilka moduler man kan lägga till för att öka tillgängligheten, hur man kan tänka när man skapar mallar, samt lite övriga tips. Tips för centrala inställningar Tipsen följer ordningen på flikarna under Egenskaper för webbplats. Allmänt, Fliken Inställningar Kodstandard: Här kan man ställa in kodstandarden för webbplatsen. Standard är html 4.01 men här kan man ändra till xhtml om man vill. Ökad tillgänglighet! Vägledningen 24-timmarswebben anger i avsnitt 3.1.3 att man skall använda html eller xhtml för att publicera information. Dock säger de i avsnitt 10.4 att man skall sträva efter att alltid använda de senaste standarderna där det är möjligt, vilket då betyder xhtml. Allmänt, Fliken metadata/metadata mallar Metadata: Här kan man ställa in metadata av typen DC.Source. Ökad tillgänglighet! Använd metadata på så många sidor som möjligt (avsnitt 4.6.2) Följande bör enligt 24- timmarsvägledningen vara med: <link rel= "schema.dc" href="http://purl.org/dc/elements/1.0/" /> <meta name="dc.identifier" scheme="url" content= http://www.statskontoret.se /> <meta name="dc.title" content="statskontoret /> <meta name="dc.creator" content="strid Sandberg, Veronica" /> <meta name="dc.publisher" content="statskontoret /> <meta name="dc.description" content="statskontoret är ett stabsorgan till regeringen med uppgift att stödja regeringen i arbetet med att utvärdera, ompröva, styra och effektivisera statlig och statligt finansierad verksamhet /> <meta name="dc.date.modified" scheme="w3cdtf" content="2004-07-26 /> <meta name="dc.date.created" scheme="w3cdtf" content="2003-01-01 /> <meta name="dc.type" content="text /> <meta name="dc.format" scheme="imt" content="text/html /> <meta name="dc.language" scheme="rfc1766" content="sv" /> De två översta (schema.dc och DC.Identifier 1 ) samt de tre nedersta (DC.Type, DC.Format och DC.Language) skriver systemet ut automatiskt. Övriga metadatadefinitoner bör sättas upp: DC.Title titel, vi rekommenderar att man sätter upp denna på Metadata mallar för att undvika krock med nyhetsmodulens DC.Title som används vid rubriken. Aktivera denna på alla mallar utom arkivmallarna. DC.Creator skapad av, lägg till metadata av typen Systemvärde -> Skapad av -> Användarens hela namn DC.Publisher organisationens namn, lägg till metadata av typen Textfält. Fyll i förifylld text: namn på organisationen. DC.Description beskrivning, vi rekommenderar att man sätter upp denna på Metadata mallar för att undvika krock med nyhetsmodulens DC.Description som används vid ingressen. Aktivera denna på alla mallar utom arkivmallarna. 1 Detta fält hämtar värdet från den primära adressen på webbplatsen. Kontrollera att den primära adressen stämmer under "Webbplatsinställningar". Senselogic Tillgänglighetsanpassning SiteVision 1 (6)
Metadata mallar -> lägg till metadata av typen Textfält. Aktivera detta värde på alla mallar utom nyhetsmallen (och/eller övriga arkivmallar). Växla över till Sidmallar, välj Egenskaper och fliken Metadatafält. Klicka på plusknappen och lägg till beskrivning. Aktivera denna på alla mallar utom arkivmallarna. DC.Date.Modified senast ändrad datum, lägg till metadata av typen Systemvärde - >Senast ändrad datum DC.Date.Created skapad datum, lägg till metadata av typen Systemvärde - >Skapad datum OBS! Kom ihåg att kryssa i rutan Skriv ut i HTML-koden som <META>taggar under fliken Avancerat när man lägger till metadatadefinitionerna. Använd DC (Dublin Core) för de metadata som skrivs ut i HTML-koden. Övriga metadatanamn får inte innehålla mellanslag, å-ö eller konstiga tecken. Fyller man inte i något namn på metadata, valideras inte koden. Allmänt, Fliken Prenumeration Prenumeration: Här kan man ställa in så att besökarna på webbplatsen kan prenumerera på information. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 2.2.6) skall man göra det möjligt att prenumerera på information. Webbplatsinställningar, Fliken Webbplats Webbplatsspråk: Här ställer man in sv/no/en som webbplatsspråk. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.1.8) skall man ange webbplatsens huvudsakliga språk. Webbplatsinställningar, Fliken Webbplatsresurser Generell felsida: Här kan man ställa in en egen felsida istället för webbläsarens felsida om en sida saknas. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.2.9) skall man göra det lätt att sig vidare om sidan inte finns. De rekommenderar att man skapar en egen 404-sida med förklarande text samt en länk till startsidan. Webbplatsinställningar, Fliken Avancerade inställningar Följ riktlinjer för WAI 1: Fyller man i detta alternativ så blir man påmind om att lägga till beskrivningar på bilder, länkar och tabeller av systemet. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall verktyget påminna användaren att ange alternativa beskrivningar (avsnitt 8.2.8). Vägledningen anger också att man skall förtydliga innebörden av en tabell i text (avsnitt 4.3.1). Ange title-text för otydliga länkar (avsnitt 5.2.2). Förhindra HTML i text och tabell: Fyller man i detta alternativ kan man inte fylla i kod i text-och tabellmodulen. Detta för att förhindra att redaktören lägger till kod som inte är kontrollerad att den validerar. Ökad tillgänglighet! 24-timmarsvägledningen anger att man skall validera koden (avsnitt 4.8.1). Om man anger egen HTML-kod, kontrollera att koden validerar tex på http://validator.w3.org Använd CSS-kolumner: Fyller man i detta alternativ blir layouten uppbyggd av css-kolumner istället för tabeller. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall man inte använda tabeller för layout, utan CSSkolumner (avsnitt 4.1.12). Flytta style-information till CSS-fil: I SiteVision separerar vi innehåll från design i redigeringsläget. Vid visningsläge slås dessa dock ihop. Om man vill att dessa skall vara separerade även i visningsläge fyller man i detta alternativ. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall man separera innehåll från design (avsnitt 4.2.2). Titelinställningar: Här bestämmer man hur webbsidornas titel skall se ut (som visas i webbläsarens övre vänstra hörn). I SiteVision skriver den ut sidnamnet följt av webbplatsens namn som standard. Senselogic Tillgänglighetsanpassning SiteVision 2 (6)
Ökad tillgänglighet! 24-timmarsvägledningen rekommenderar att alla sidor skall ha en titel (avsnitt 4.6.1). Titeln bör bestå av en del som beskriver den aktuella sidan dels namnet på avsändande organisation. Webbplatsinställningar, Fliken Länkhantering Visa ikon brevid externa länkar: En ikon med ett fönster och en pil uppåt till höger visas. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.2.1) skall man göra länkbeskrivningar så tydliga som möjligt. Visa ikon brevid länkar som öppnas i nytt fönster: En ikon med dubbla fönster öppnas. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.2.3) skall man också ange när en länk öppnas i ett nytt fönster. Därför kan det vara bra att aktivera dessa ikoner. Visa ikon brevid kända filtyper: Ikoner visas för filtyperna.doc,.pdf,.xls,.ppt. Ökad tillgänglighet! Enligt WCAG skall besökaren uppmärksammas när en länk leder till ett dokument av annat format än HTML, i anslutning till länken. Visa filbeskrivning och storlek bredvid kända filtyper: Namnet på filtyperna samt filtypens storlek skrivs ut om de är kända (.doc,.pdf,.xls,.ppt) Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.2.1) skall man göra länkbeskrivningar så tydliga som möjligt. Webbplatsinställningar, Fliken Alias Alias: Alias är en kortlänk i SiteVision. Ökad tillgänglighet! Enligt 24-timmarsvägledningen (avsnitt 5.2.7) skall man skapa en kortlänk om en URL ska skrivas i tryckt material. Webbplatsinställningar, Fliken Snabbkommandon Snabbkommandon: Snabbkommandon är sätt att snabbt komma till vissa sidor på webbplatsen med några få knapptryckningar på tangentbordet. 24-timmarsmyndigheten ger en vägledning om vilka tangenter som skall användas till vad: S Hoppa direkt till textinnehållet på sidan 0 Om webbplatsen, tillgänglighetsinformation 1 Startsida 2 Nyheter 3 Webbkarta 4 Sökfunktion 5 FAQ 6 Hjälp 7 Kontakt Hur man aktiverar dessa snabbkommandon beror på vilken webbläsare och/eller vilket operativsystem som används. I Internet Explorer på Windows aktiverar man snabbkommandot Startsida med ALT+1 efterföljt av Enter. OBS! För att man skall få snabbkommandot S att fungera får man skapa en extern länk till namnet på innehållsytan. T.ex. om innehållsytan på sidorna heter Mittenspalt skapar man en extern länk till #Mittenspalt. Ökad tillgänglighet! Snabbkommandon skall skapas för viktiga funktioner enligt 24-timmars vägledningen avsnitt 4.2.11. Utseende, fliken Formatmallar Relativa mått: Här ställer man in att formatmallarna skall vara av relativa mått (em). Markera formatmallen som heter BODY (följer med som standard, annars skapa en ny formatmall som heter så). Klicka på Egenskaper. Gör följande: 1. Fyll i storlek i em. För att räkna ut från pixlar till em: Senselogic Tillgänglighetsanpassning SiteVision 3 (6)
11px/15.94 0.7em Skriv detta i fältet Storlek. Inget mellanrum och med punkt. 2. Se till att rutan Omskalbar är ikryssad. 3. Under fliken Länkegenskaper skall alla fyra vara ikryssade och satta till 100%. 4. Under fliken Avancerat skall Används för BODY vara satt till Ja, 5. Nu skall alla andra formatmallar baseras på denna. Markera tex Brödtext och klicka på knappen Egenskaper. Fyll i denna i procent till BODY. Om denna skall vara motsvarande 11px sätter man den till 100%. För att säkna ut tex 18px: 18/15.94/0.7(eller vad man satte BODY till) = 1.61 dvs 161% 6. Upprepa och sätt alla andra formatmallar i procent i förhållande till BODY. Ökad tillgänglighet! Enligt (avsnitt 4.2.5) bör webbplatsen vara uppbyggd av relativa mått så att det går att storleksförändra teckenstorleken i webbläsaren. Rubriknivåer: Markera de formatmallar som skall ha rubriknivå h1-h6. Gör så här: 1. Markera en formatmall som skall vara rubrik och klicka på knappen Egenskaper 2. Välj fliken Avancerat. Märk formatmallen med rätt rubriknivå under alternativet Används för rubriknivå. Ökad tillgänglighet! Rubriknivåer skall användas för att ange dokumentstrukturen. Länkar: Ställ in hur länkar skall bete sig för respektive formatmall. När man skapar formatmallar i SiteVision, se till att länkar är understrukna. Skapa en egen formatmall för menyn som ej behöver understrukna länkar. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.1) skall man vara konsekvent i navigering, utformning och presentation. Man skall skilja rubriker från länkar och se till att länkar beter sig konsekvent på webbplatsen. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.6) bör länkar med vissa undantag vara understrukna. Dock kan man göra undantag för menyer och dylikt (där man förstår att vad som är klickbart). Typsnitt: I SiteVision finns fem olika typsnitt att välja på: Arial, Verdana, Times, Georgia och Courier. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.14) skall man ge webbplatsen en typografi som underlättar läsningen. Man bör begränsa antalet typsnitt på webbplatsen. Typsnitt för skärm ger bäst resultat tex Verdana, Georgia och Trebuchet. Radavstånd: Standard i SiteVision är normal. För att ändra detta, markera en formatmall, välj Egenskaper och Radavstånd. Tänk på att använda samma enhet som formatmallarna. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.15) skall man ge webbplatsen ett radavstånd som underlättar läsningen. Grundinställningen i webbläsarna visar ett radavstånd på 120 procent, om inte annat angetts i stilmallarna. Om spalterna är breda kan det behövas öka till 130-150 procent. Utseende, fliken Webbplatsfärger Kontraster: När man lägger till webbplatsfärger, tänk på att det skall vara tillräckliga kontraster. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.17) skall man använda tillräckliga kontraster mellan bakgrundsfärg och förgrundsfärg. Du kan kolla kontrasterna här med ett program som heter Colour Contrast Analyser 1.0: http://www.visionaustralia.org.au/info.aspx?page=628 Aktivera högkontrastfärg: Om man låter besökaren själv välja att se webbplatsen i högkontrastfärger så måste an sätta upp dessa här. Tex gul bakgrund med svart text. Glöm inte att kontrollera hur webbplatsen ser ut efter att du ställt in färgerna. Ökad tillgänglighet! Krävs för att användaren skall kunna ställa in kontrast i modulen Anpassa webbplatsen. Enligt 24-timmarsriktlinjerna (avsnitt 4.2.4) bör man ha möjlighet att göra personliga inställningar för tex teckenstorlek, kontrastverkan. Senselogic Tillgänglighetsanpassning SiteVision 4 (6)
Tips moduler SiteVision Här tipsar vi om vilka moduler som bör användas eller hur moduler bör användas för att skapa en mer tillgänglig webbplats. Bildmodulen Bildbeskrivning: Bilder som läggs till skall ha en beskrivning (alt-text) om det inte är en dekorationsbild. Om det är en ren dekorationsbild är det bättre att välja alternativet Använd inte bildbeskrivningstext för då blir det alt= i koden, vilket innebär att hjälpmedel för funktionshindrade hoppar över bilden. Fyll alltid i en beskrivning om: bilden innehåller text fyll då i vad som står i texten i beskrivningen bilden har någon funktion tex om den är en länk fyll då alltid i vad bilden gör i beskrivningen bilden tillför en känsla som skall förmedlas Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.1.11) skall samtliga meningsbärande grafiska objekt beskrivas med alt-text. Alt-texten bör begränsas till max 150 tecken. Tabellmodulen A-Ö-lista Tabellbeskrivning: Alla människor förstår inte information uppställt i tabellform, därför bör man också ange en beskrivning av tabellens innehåll i ren text. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.3.1) bör man förtydliga innebörden av en tabell i text. Framhäv rad-och kolumnrubriker grafiskt: Markera rubrikerna med en annan formatmall eller fet stil så att man skiljer rubrikerna från innehåll. Underlätta läsningen genom att varannanradsfärga tabellen. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.3.2) bör man framhäva rad och kolumn-rubriker grafiskt så att användaren kan skilja dem från de datauppgifter som presenteras i tabellen. Definiera tabellrubriker: Även kodmässigt måste man ange vilka celler som är tabeller. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.3.3) bör man skilja på dataceller och rubrikceller. Enligt 24-timmarsriktlinjerna (avsnitt 4.3.4) bör man koppla ihop dataceller med rubrikceller. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna enligt (avsnitt 4.1.7) bör man ha en innehållsöversikt, ett komplement till den ordinarie navigeringen tex en A-Ö lista. Flernivålänk Meny Webbkarta Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.2) skall man hjälpa besökaren att förstå var de är på webbplatsen tex genom en länkstig (vår flernivålänk ). Modulen Meny är den enda av SiteVisions menymoduler som är kodad som en lista och inte en tabell. Använd gärna färg, ikoner, indrag för att förtydliga menyn. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.1.13) skall man inte göra listor med hjälp av tabeller eller grafiska objekt. Enligt 24-timmarsriktlinjerna (avsnitt 4.1.2) skall man hjälpa användarna att förstå vart de är på webbplatsen. Detta kan man göra genom att använda en meny med indragningar, skiftningar i färg samt markera val. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.7) bör man ha en innehållsöversikt, ett komplement till den ordinarie navigeringen tex en webbkarta. Senselogic Tillgänglighetsanpassning SiteVision 5 (6)
Sök Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.7.1) så bör webbplatsen ha en sökfunktion. Gör inställningar i sökmodulen för att visa tydliga träffar. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.7.5) bör man erbjuda tydliga träffsidor, visa inte onödig information som hur lång tid sökningen tog, visa sammanhanget där sökordet hittades, begränsa träffsidan till 10 träffar. Anpassa webbplatsen Använd denna modul för att besökaren skall kunna ändra textstorlek, radavstånd, teckensnitt ock kontrast. För att kunna ändra textstorlek och radavstånd krävs att BODY-formatmallen ha rutan Omskalbar ikryssad eller att alla formatmallar har denna ikryssad. För att kunna ändra kontrast krävs att man ställt in högkontrastfärger. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.2.4) bör man ha möjlighet att göra personliga inställningar för tex teckenstorlek, kontrastverkan. FAQ-lista Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.7) bör man ha en innehållsöversikt, ett komplement till den ordinarie navigeringen tex en FAQ. Nyhetsmodulen Publicera organisationens nyheter i en nyhetsmodul som man exponerar ut via RSS. Under fliken RSS i nyhetsmodulen ställer man in inställningar för att skapa en RSS-källa. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 2.2.9) skall man dra nytta av möjligheterna att tillhandahålla syndikerat material till andra webbplatser. Övriga tips vid mallbygge Tänk på detta när ni skapar mallar eller sidor på webbplatsen. Bygg dynamiska mallar för att besökaren skall kunna ändra bland annat teckenstorlek. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.2.1) skall man bestämma skärmupplösning utifrån era användare. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.8) skall alla sidor skall ha en länk till startsidan och andra viktiga sidor för orienteringen (tex sök och webbkarta) Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.16) skall man ge webbplatsen en spaltbredd som underlättar läsningen. Låt alltid löpande text ha ojämn högerkant. Spaltbredden bör vara max 70 tecken lång eller anpassa sig till fönsterstorleken. Datum när sidan senast uppdaterades bör komma tidigt på sidan. Övriga tips Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.9) så skall man kalla startsidan för startsida. För att få en mer enhetligt namn på förstasida, hem, start, startsida så har man enats om att döpa den till startsida. Om ni skriver egen kod: Testa alltid att validera koden! Kontrollera om ni skall skriva html eller xhtml. Glöm ej fnuttar ( ) när ni lägger till ett attribut Glöm ej alt och title-beskrivningar. Senselogic Tillgänglighetsanpassning SiteVision 6 (6)