Asenna mille tahansa sivustolle

Paneeli toimii millä tahansa sivustolla: kotisivukoneella tehdyllä, käsin kirjoitetulla, julkaisujärjestelmällä tehdyllä tai React-sovelluksella. Lisäät sivujesi head-osaan yhden rivin, tarkistat että se näkyy ja vahvistat verkkotunnuksen. Tässä oppitunnissa ovat tarkat ohjeet jokaiselle alustalle ja ratkaisut tavallisimpiin pulmiin.

1. Lisää sivusto OMAan

1. Avaa Sovellukset ja Accessiboss.
2. Paina Lisää sivusto, kirjoita osoite, esimerkiksi yourbrand.fi, ja paina uudelleen Lisää sivusto.
3. Sivusto aukeaa Yleiskatsaus-osioon. Uudella sivustolla on oletuspaneeli valmiiksi julkaistuna, joten tagi toimii heti, kun lisäät sen.

Kirjoita osoite ilman https://-alkua ja ilman www-osaa. Sivusto kattaa osoitteen ja sen www-muodon. Toisella aliverkkotunnuksella oleva kauppa, kuten kauppa.yourbrand.fi, on oma sivustonsa.

2. Kopioi tagisi

Avaa Asennus-osio. Kohdassa Skriptitagisi on yksi rivi, jossa on oma avaimesi. Avain alkaa abs_site_. Se on julkinen eikä salaisuus.

<script async src="https://oma.lanetti.fi/embed/accessiboss.js" data-key="abs_site_avaimesi"></script>

Liitä se jokaiselle sivulle juuri ennen </head>-tagia. Pidä async mukana, niin tagi ei koskaan hidasta sivusi latautumista.

3. Lisää se alustallesi

Valikot on nimetty alla niin kuin alustat ne nyt nimeävät. Jos valikko on siirtynyt, etsi asetusta nimeltä custom code, code injection tai head code. Osa alustoista näyttää valikot vain englanniksi.

WordPress ja WooCommerce

Katso seuraava oppitunti: Lisää Accessiboss WordPressiin.

Shopify

1. Avaa Shopifyn hallinnassa Verkkokauppa ja Teemat.
2. Avaa nykyisen teemasi vierestä ...-valikko ja valitse Muokkaa koodia.
3. Avaa kohdasta Layout tiedosto theme.liquid.
4. Liitä tagi riville juuri </head>-tagin yläpuolelle ja paina Tallenna.

Wix

1. Avaa sivustosi hallintapaneelista Asetukset ja Lisäasetukset-kohdasta Mukautettu koodi.
2. Paina Lisää mukautettu koodi ja liitä tagi.
3. Anna koodille nimi, valitse Kaikki sivut ja lataus kerran, ja sijoita se kohtaan Head.
4. Paina Käytä. Wix sallii mukautetun koodin sivustoilla, joilla on oma verkkotunnus.

Squarespace

1. Avaa Settings, sitten Developer tools (vanhemmilla sivustoilla Advanced) ja Code injection.
2. Liitä tagi kenttään Header.
3. Paina Save. Code injection vaatii paketin, johon se kuuluu.

Webflow

1. Avaa Site settings ja välilehti Custom code.
2. Liitä tagi kenttään Head code ja paina Save.
3. Julkaise sivusto. Mukautettu koodi näkyy vain julkaistulla sivustolla, ei Designerissa.

Tavallinen HTML

Liitä tagi jokaisella sivulla juuri </head>-tagin yläpuolelle. Jos sivuillasi on yhteinen ylätunnistetiedosto tai pohja, lisää se sinne kerran.

<head>
  <meta charset="utf-8">
  <title>Sivusi</title>
  <script async src="https://oma.lanetti.fi/embed/accessiboss.js" data-key="abs_site_avaimesi"></script>
</head>

Google Tag Manager

1. Paina säilössäsi Uusi tagi ja valitse Mukautettu HTML.
2. Liitä tagi.
3. Valitse kohdassa Käynnistys Kaikki sivut.
4. Tallenna, paina Lähetä ja julkaise säilö.

React ja Next.js

Vitellä tai Create React Appilla tehdyssä yhden sivun sovelluksessa liitä tagi tiedostoon index.html, <head>-osan sisään. Paneeli elää sovelluksesi ulkopuolella, joten uudelleenpiirrot ja reittien vaihdot eivät poista sitä.

Next.js:n App Routerissa laita tagi juuriasetteluun app/layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html lang="fi">
      <head>
        <script async src="https://oma.lanetti.fi/embed/accessiboss.js" data-key="abs_site_avaimesi" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Routerissa laita sama rivi <Head>-osaan tiedostossa pages/_document.tsx. Tavallinen <script> päätyy sivun lähdekoodiin, joten skriptitagin tarkistus löytää sen. Jos lataat sen next/script-komponentilla, vahvista verkkotunnus DNS:llä tai meta-tagilla.

4. Tarkista, että tagi näkyy

1. Avaa sivustosi selaimessa siinä osoitteessa, jonka lisäsit.
2. Palaa Asennus-osioon ja paina Tarkista uudelleen. Vihreä rivi kertoo, milloin tagi viimeksi nähtiin.
3. Sivustosi kulmassa näkyy nyt myös paneelin painike. Kokeile paneelia painamalla sitä.

5. Vahvista, että verkkotunnus on sinun

Tarkistukset ja esikatselu toimivat vain vahvistetuilla sivustoilla. Valitse kohdassa Vahvista, että verkkotunnus on sinun yksi tapa ja paina Tarkista:

6. Tietosuojaselosteesi

Paneeli tallentaa kävijän valinnat vain kävijän omaan selaimeen, koska kävijä pyysi sitä. Näkemyksemme mukaan tämä ei edellytä evästebanneria. Päätät tästä itse omalla sivustollasi. Accessibossin ehdoissa kerrotaan, mitä paneeli tallentaa ja mitä palvelimillemme saapuu. Jos haluat mainita paneelin tietosuojaselosteessasi, voit kopioida jonkin näistä teksteistä. Samat tekstit ovat kopioitavina Asennus-sivulla kohdassa Tietosuojaselosteesi.

Suomeksi

Sivustollamme on saavutettavuuspaneeli. Jos muutat sen asetuksia, kuten tekstikokoa tai kontrastia, valintasi tallentuvat vain omaan selaimeesi, jotta ne ovat käytössä seuraavalla käynnilläsi. Ne tallennetaan, koska pyysit sitä. Niitä ei lähetetä meille eikä paneelin tarjoajalle Lanetille, ja voit poistaa ne paneelin palautuspainikkeella tai tyhjentämällä selaimesta tämän sivuston tiedot. Paneelin näyttämiseksi selaimesi lataa sen tiedostot Lanetin palvelimilta. Palvelimet saavat IP-osoitteesi kuten mikä tahansa verkkosivusto ja säilyttävät sen käyttölokeissaan tietoturvan vuoksi noin viisi viikkoa. Lisätietoja: https://www.lanetti.fi/legal/privacy

På svenska

Vår webbplats har en tillgänglighetspanel. Om du ändrar dess inställningar, till exempel textstorlek eller kontrast, sparas dina val bara i din egen webbläsare, så att de gäller vid ditt nästa besök. De sparas för att du bad om det, de skickas inte till oss eller till panelens leverantör Lanetti, och du kan ta bort dem med panelens återställningsknapp eller genom att rensa webbläsarens data för denna webbplats. För att visa panelen laddar din webbläsare dess filer från Lanettis servrar, som tar emot din IP-adress som alla webbplatser och sparar den i sina åtkomstloggar i ungefär fem veckor av säkerhetsskäl. Mer information: https://www.lanetti.fi/legal/privacy

In English

This site offers an accessibility panel. If you change its settings, such as text size or contrast, your choices are saved only in your own browser, so that they apply on your next visit. They are saved because you asked for them, they are not sent to us or to the panel's provider, Lanetti, and you can remove them with the panel's reset button or by clearing your browser's data for this site. To show the panel, your browser loads its files from Lanetti's servers, which receive your IP address like any website and keep it in their access logs for about five weeks for security. More information: https://www.lanetti.fi/legal/privacy

Tiukka Content-Security-Policy

Useimmat sivustot eivät tarvitse mitään. Jos sivustosi lähettää tiukan käytännön, salli nämä lähteet:

script-src https://oma.lanetti.fi
connect-src https://oma.lanetti.fi
font-src https://oma.lanetti.fi
img-src data:

img-src data: tarvitaan vain isoa osoitinta varten. Jos käytäntösi perustuu nonceen, kuten script-src 'nonce-...' 'strict-dynamic', laita nonce tagiin: <script async nonce="..." src="..." data-key="...">. Tagin lisäämät tiedostot saavat saman noncen. Tyylit eivät tarvitse mitään lisää. Jos sivustosi käyttää Trusted Types -rajoitusta, salli käytännön nimi accessiboss.

Vianetsintä

Tagia ei näy

• Avaa jokin sivustosi sivu tavallisessa selainikkunassa. Koodin tallentaminen ei riitä, sillä tarkistus tarvitsee käynnin.
• Avaa juuri se osoite, jonka lisäsit. www lasketaan samaksi sivustoksi, muut aliverkkotunnukset eivät.
• Oman selaimesi sisällönestäjä voi pysäyttää tagin. Kokeile toisella selaimella tai yksityisessä ikkunassa.
• Välimuistit näyttävät yhä vanhaa sivua. Tyhjennä välimuisti välimuistilisäosasta, palveluntarjoajalta tai CDN:stä ja käy sivulla uudelleen.
• Aika päivittyy enintään kymmenen minuutin välein, joten odota hetki ennen kuin painat Tarkista uudelleen toisen kerran.

Vahvistus skriptitagilla ei onnistu

Tarkistus lukee osoitteiden https://yourbrand.fi/ ja https://www.yourbrand.fi/ lähdekoodin sellaisena kuin se lähetetään, ennen kuin yksikään skripti on ajettu. Se epäonnistuu, jos tagin lisää myöhemmin tagien hallinta tai JavaScript, jos etusivu vaatii kirjautumisen, näyttää huoltosivun tai bottitarkistuksen tai ei vastaa https-yhteydellä. Käytä näissä tapauksissa DNS-tietuetta.

Painike jää toisen elementin taakse

Avaa Studio ja kytke päälle Väistä chat-kuplia ja evästepalkkeja, tai valitse toinen kulma. Oppitunti Sijoita painike chatin viereen näyttää miten.

CSP-virheitä selaimen konsolissa

Viesti kuten "Refused to load the script" tai "Refused to connect" kertoo, mikä direktiivi esti meidät. Lisää yllä olevasta listasta vastaava rivi. Jos fontit eivät lataudu, tarkista font-src.

Muutokset eivät näy

Kävijät saavat uuden julkaisun noin viiden minuutin kuluessa. Selain pitää viimeksi näkemänsä asetukset ja näyttää ne ensin, sitten se hakee uudet, joten lataa sivu vielä kerran. Jos poistit tai lisäsit tagin, tyhjennä myös sivujen välimuisti.

Mitään ei näy

Katso Yleiskatsaus. Jos siinä lukee, että paneeli on kytketty pois, kytke se takaisin Asennus-osiosta. Tarkista myös Studiosta, ettei painiketta ole piilotettu kyseisellä laitteella.

Seuraavaksi: Lisää Accessiboss WordPressiin