Länkar

Skapa en länk när du vill hänvisa besökaren till andra sidor (på vår egen webb) eller till andra webbplatser (när kommunen inte är ansvarig) för att få mer information. Så skriver du en bra länk! Tips på hur du skriver en bra länk hittar du i checklistan för webbskribenter . Formulera länkarna tydligt Formulera länken så tydligt så att man förstår var man hamnar när man klickar på den. Tänk på länken som en etikett eller skylt för landningssidan. Till exempel "Mer information hittar du på länsstyrelsens webbplats". Skriv aldrig bara "Klicka här" eller "Läs mer", och länka inte heller bara ordet "här" i en löpande text. Sådana länkar ger ingen vägledning alls. Låt länken ha en stor träffyta, så att besökaren inte klickar på något annat av misstag. Av samma skäl bör du inte lägga länkar för nära varandra. Placering av länkar Vi följer rekommendationerna från webbriktlinjer.se . Låt sammanhanget och syftet med länken avgöra var den ska placeras på sidan. Länken kan antingen ligga i brödtexten eller utanför brödtexten, till exempel på en egen rad eller samlas i boxen Mer information som ligger längst ner på sidan. Generellt sett är det bättre att samla relevanta länkar på en plats utanför löptexten, för att inte läsningen ska störa den redan så flyktiga besökaren. Men vissa texter har ju enbart till uppgift att just skicka läsaren vidare till exempelvis fördjupad information, och då är det praktiskt att placera länken i texten. Öppna i nytt fönster eller inte? Vi följer rekommendationerna från webbriktlinjer.se   och länkar på vår webbplats ska öppnas i samma fönster oavsett om de går till en intern sida, annan webbplats eller till ett dokument. Relaterade länkar och dokument window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Boxen Mer information visas alltid längst ner på sidan när det finns innehåll i den. Du kan ha länkar till interna sidor, externa webbplatser och dokument. Du skapar boxen genom att: Klicka på kugghjulet i verktygsfältet. Gå till Egenskaper. Skrolla ner och öppna fliken Undersida. Gå till fältet som heter Mer information. Klicka på + Lägg till under rutan och välj Länk. Skriv namnet på länken i översta rutan. Välj vilken länktyp du vill lägga till (intern sida är alltid förvalt). Väljer du intern sida, pekar du ut sidan i innehållsträdet. Väljer du extern länk, fyller du i länkadressen. Väljer du fil, pekar du ut filen i filarkivet eller laddar upp en ny fil i arkivet och väljer den. Klicka OK. Klicka OK. För att se ändringen på sidan, uppdatera webbsidan (F5) Länkar i löpande text window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Du skapar en länk i löpande text genom att: Skriva länktexten. Markera texten. Gå till länkikonen uppe i verktygsfältet. Välj vilken typ av länk du vill använda. Fyll i fälten. Klicka Ok. Intern länk Extern länk Länk till en fil Punktlista stylad länk window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Om du har flera länkar relaterade till sidan du arbetar med kan du samla relaterade länkar i en så kallad Punktlista (Stylad länk). Passar särskilt bra i en plusbox. Du hittar Punktlista (Stylad länk) under ikonen "Punktlistor" i verktygsfältet. Exempel: Kommunens verksamhet styrs genom ett antal olika lagar, allra främst Kommunallagen . Andra lagar som styr verksamheten är: Socialtjänstlagen Skollagen Tryckfrihetsförordningen Offentlighets- och sekretesslagen Förvaltningslagen Dataskyddsförordningen Plan- och bygglagen Miljöbalken Lag om skydd mot olyckor Ankarlänkar window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Skapa ankarlänk Ankarlänkar kan användas för att länka inom en sida. Istället för att en länk bara går till en viss sida så kan en länk peka på ett speciellt område på sidan. Markören hoppar då direkt till det stycket på sidan när man klickar på länken. Gör så här för att skapa en ankarlänk: Markera texten som ska länkas. Klicka på ikonen Länkar och välj Intern sida i listan. En ny vy öppnas med länktypen Intern sida . För interna sidor visas hela strukturen på webbplatsen. Du får då markera den sida du vill länka till eller söka efter sidan. Bocka sedan i rutan "Använd ankare" som visas under strukturen. Då visas de moduler som finns på sidan (=ankare). Har du infogat egna ankare syns även dessa. Peka ut den modul / det ankare som du vill länka till. Klicka OK . Vyn försvinner. Om flera moduler används som automatiska ankare på samma sida, måste de ha unika namn – annars kan länkarna till de krocka. Plusbox med ankarlänk på brödtext window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Plusbox med ankarlänk (brödtext) Klicka på textmodulen Högerklicka på den nyinlaggda modulen och välj dekoration -> "Ankarlänk med plusbox" Nu är den redo att bli länkad till. Gå till "huvudsidan" och skapa en länk -> välj intern sida -> leta reda på sidan och textmodulen som du lagt dekorationen på Publicera båda sidorna Vid klick på länken på huvudsidan ska du nu flyttas till den andra sidan, scrollas ned till sidan där plusboxen finns och den ska vara öppen. Plusbox med ankarlänk på layout window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Plusbox med ankarlänk (layout) (om man till exempel vill ha text och bild i en plusbox behövs denna version) Lägg till en layout Högerklicka på layouten och byt namn på modulen ( det namn layouten har får blir rubriken för plusboxen) Högerklicka igen på layouten och välj dekoration -> "Ankarlänk med plusbox" Gå ur redaktörsläget och ta muspekaren till din plusbox Högerklicka på plusboxen ( kan ej göras i redigeringsläge ) och välj "kopiera länk" Gå till huvudsidan där du ska ha länken Skapa ny länk och välj "Extern sida" Klistra in länken Publicera båda sidorna Vid klick på länken på huvudsidan ska du nu flyttas till den andra sidan, scrollas ned till sidan där plusboxen finns och den ska vara öppen. Fler länktips När länken är en bild – kom ihåg alt-texten Länkade bilder ska beskrivas i bildens alt-text. Personer som använder hjälpmedel när de surfar får då alt-texten uppläst och kan förstå vad bilden föreställer. Du ska i första hand beskriva länkens mål och sedan bildens motiv. Ge länkarna olika namn Länkar till olika sidor ska ha olika länknamn. Om du gör tvärtom och skriver likadana länknamn till två olika sidor får du tillgänglighetsfel vid publicering. Länka telefonnummer och e-postadress Om du skriver ett telefonnummer eller en e-postadress tänk på att alltid göra de till klickbara länkar. Det underlättar för besökare som surfar via mobil (över hälften av våra besökare). De kan klicka på telefonnumret och ringa upp direkt.