Ohjeet verkkosivulukijan käyttöönottoon
Verkkosivulukijaa käytetään lukemaan verkkosivun staattista sisältöä ääneen – esimerkiksi blogitekstejä tai ohjeita. Verkkosivulukija ei tue dynaamisesti muuttuvan sisällön lukemista.
Käyttöönotto
1. Säädä lukijan asetukset asiakasportaalissa
Siirry asiakasportaaliin osoitteeseen https://portal.aimater.com/ ja kirjaudu sisään. Avaa yläpalkista Verkkosivulukija-sivu. Säädä lukijan asetukset sinulle sopivaksi esikatselua hyväksi käyttäen ja tallenna asetukset. Kopioi lukijan uusi koodi sivun alaosasta.
2. Lisää lukijan koodi sivustollesi
Lisää lukijan koodi verkkosivuillesi liittämällä kopioitu skriptin koodi verkkosivusi lähdekoodiin, esimerkiksi <head>-osion loppuun.
...
<script src="https://portal.aimater.com/static/reader/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js"></script>
</head>
3. Merkitse luettava tekstisisältö lähdekoodiin
Lisää verkkosivuillasi HTML-luokka 'aim-readable' luettavan elementin (tai elementtien) attribuutteihin.
<article class="aim-readable">
Tämä artikkelin sisältö luetaan ääneen.
</article>
Nyt lukijan pitäisi näkyä sivulla oikein ja verkkosivun sisältöä voi toistaa ääneen soittimen avulla.
Lisää ohjeita ja huomioita löydät seuraavasta Lisätietoja-osiosta.
Lisätietoja
Ääneenluettavat elementit
Kaikki ääneenluettava tekstisisältö tulee olla elementin sisällä, jossa on luokka 'aim-readable'. Lisää luokka vain ylimmälle mahdolliselle elementille, ei sisäkkäisille elementeille. Voit lisätä luokan myös sisaruselementeille. Esimerkiksi:
<article class="aim-readable">
<h1>...</h1>
<p>...</p>
<p>...</p>
</article>
<div class="author aim-readable"></div>
Ohitetut elementit
Jos haluat, että jotain 'aim-readable'-elementin sisällä olevaa tekstiä ei lueta ääneen, lisää ohitettavalle elementille luokka 'aim-skip'.
Lukija ohittaa jo oletuksena kaikki hidden- tai aria-hidden-attribuutilla varustetut elementit. Tämän lisäksi kaikki <button>-, <canvas>-, <nav>- ja <script>-elementit ohitetaan.
Jos haluat pakottaa lukijan lukemaan jotain oletuksena ohitettua sisältöä, voit lisätä sille elementille luokan 'aim-include'.
Esimerkiksi:
<article class="aim-readable">
<nav class="aim-include">...</nav> <!-- Luetaan -->
<h1>...</h1> <!-- Luetaan -->
<p>...</p> <!-- Luetaan -->
<div class="aim-skip">...</div> <!-- Ohitetaan -->
<button>...</button> <!-- Ohitetaan -->
</article>
Lukijan sijainti
Oletussijainti
Oletuksena lukija etsii ensimmäisen 'aim-readable'-elementin sisältä ensimmäisen otsikon, ja asettaa soittimen kyseisen otsikon alapuolelle.
<article class="aim-readable">
<h1>Artikkelin otsikko</h1>
<aside class="aim-player-container">
<!-- Tämä soitin asetetaan sivulle. -->
</aside>
...
</article>
Jos yhtään otsikkoa ei löydy heti 'aim-readable'-elementin alusta, asetetaan soitin suoraan 'aim-readable'-elementin alkuun.
<article class="aim-readable">
<aside class="aim-player-container">
<!-- Tämä soitin asetetaan sivulle. -->
</aside>
...
</article>
Itse määritetty sijainti
Jos haluat itse määrittää minne soitin asetetaan, pystyt asiakasportaalin asetuksissa syöttämään soittimen kohde-elementin id:n. Tällöin soitin asetetaan elementin sisään, jolla on kyseinen id.
<article class="aim-readable">...</article>
<div id="my-player-container">
<aside class="aim-player-container">
<!-- Tämä soitin asetetaan sivulle. -->
<!-- Toistaa audiota ylemmästä 'aim-readable'-elementistä. -->
</aside>
</div>
Voit myös määrittää soittimen kohde-elementin id:n suoraan HTML-koodissa. Tämä tehdään asettamalla 'aim-readable'-elementille attribuutti data-aim-player-target-element, jossa annetaan kohde-elementin id.
<article class="aim-readable" data-aim-player-target-element="my-player-container">...</article>
<div id="my-player-container">
<aside class="aim-player-container">
<!-- Tämä soitin asetetaan sivulle. -->
<!-- Toistaa audiota ylemmästä 'aim-readable'-elementistä. -->
</aside>
</div>
Multimedianäppäimet
Lukija tukee multimedianäppäinten käyttöä audion toistossa, kun audiota aletaan toistamaan. Esimerkiksi multimedianäppäimistöstä löytyvä Play- tai Pause-painike toimii oikein.
Räätälöity soitin
Jos et halua käyttää valmista audiosoitinta, soittimen ulkoasua voidaan myös räätälöidä. Ota tällöin yhteyttä a.i.materiin.
Varoitukset
Dynaamista sisältöä ei tueta
Lukijaa ei ole tarkoitettu lukemaan dynaamisesti muuttuvaa sisältöä. Tekstisisältö 'aim-readable'-elementin sisältä poimitaan vain kerran alussa ja myöhempiä muokkauksia tekstisisältöön ei tunnisteta.
Tekstin korostus single-page applicationissa (SPA)
Tämä varoitus koskee sinua, jos käytät Angularia, Reactia, Vueta tai jotain muuta SPA-frameworkia.
Tekstin korostus tehdään muokkaamalla HTML-dokumenttia. Tämä saattaa aiheuttaa virheitä SPA-frameworkissa, kun tekstin korostus on päällä. Virhe tapahtuu, koska joitain frameworkin renderöimiä elementtejä väliaikaisesti poistetaan HTML-dokumentista. Alkuperäiset elementit palautetaan dokumenttiin, kun korostus poistetaan. Testaa sovelluksesi huolellisesti, jos käytät verkkosivulukijaa SPA-frameworkin kanssa.