Soittolista­lukijan käyttöön­otto

Soittolistalukijaa käytetään lukemaan verkkosivulla olevien linkkilistojen sisältöä ääneen. Tällainen lista voi esimerkiksi olla tuoreimmat uutiset, uusimmat blogikirjoitukset tai muu vastaava listaus.

Käyttöönotto

1. Pyydä soittolistalukijan koodi Readitiltä.

2. Lisää lukijan koodi sivustollesi

Lisää soittolistalukija verkkosivuillesi liittämällä sinulle lähetetty koodi verkkosivusi lähdekoodiin, esimerkiksi <head>-osion loppuun.

    ...
    <script src="https://portal.aimater.com/static/reader/playlist/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js"></script>
</head>

3. Merkitse luettavat soittolistat sivustosi lähdekoodiin

Kaikkien luettavien linkkien tulee olla elementin sisällä, jossa on luokka 'aim-playlist'.

<div class="aim-playlist">
    <a href="article-1">
        Artikkeli 1
    </a>
    <a href="article-2">
        Artikkeli 2
    </a>
</div>

4. Merkitse luettava tekstisisältö linkkien taakse

Soittolistan merkitsemisen lisäksi sinun tulee merkitä jokaisen linkin taakse avautuvalle sivulle mitä tekstisisältöä sieltä luetaan ääneen. Tämä tapahtuu lisäämällä HTML-luokan 'aim-readable' luettavan elementin (tai elementtien) attribuutteihin.

<article class="aim-readable">
    Tämä artikkelin sisältö luetaan ääneen.
</article>

Linkin takana olevien elementtien merkkaaminen ääneenluettavaksi tapahtuu täysin samalla tavalla kuin normaalilla verkkosivulukijalla. Tarkemmat ohjeet löydät normaalin verkkosivulukijan ohjeista. Poikkeuksena normaaliin verkkosivulukijaan, soittolistalukija ei osaa ohittaa CSS:llä piilotettuja elementtejä. Piilota tällaiset elementit mieluummin hidden-attribuutilla.

5. Valmista

Nyt soittolistalukija lisätään sivullesi oikein soittolistaelementin yläosasaan, ja soittolistan linkkien sisältöä voi toistaa ääneen soittimen avulla.

Lisää ohjeita ja huomioita löydät seuraavasta Lisätietoja-osiosta.

Lisätietoja

Monta soittolistaa

Sivustollasi voi olla samanaikaisesti useita soittolistoja näkyvillä. Soittolistalukija lisätään jokaiselle soittolistalle erikseen. Vain yhtä soittolistaa voi kuunnella ääneen kerrallaan.

Dynaamiset soittolistat

Soittolistalukija tunnistaa automaattisesti, jos sivulle ilmestyy uusi 'aim-playlist'-elementti. Tälle soittolistalle luodaan uusi soittolistalukija. Myös sivustolta poistuvat soittolistat tunnistetaan.

Tämän lisäksi soittolistalukija tunnistaa, jos soittolistan sisälle tulee uusia linkkejä tai linkkejä poistetaan soittolistasta. Uudet linkit lisätään soittolistan loppuun.

Soittolistalukijan sijainti

Soittolistalukija asetetaan aim-playlist-elementin sisälle ensimmäiseksi elementiksi.

<div class="aim-playlist">
    <div class="aim-playlist-host">
        <!-- Tämä soittolistalukija asetetaan sivulle. -->
    </div>
    <a href="article-1">...</a>
    <a href="article-2">...</a>
</div>

Ohitettavat linkit

Soittolistalukija lukee kaikki linkit, jotka ovat elementin 'aim-playlist' sisällä. Jos haluat ohittaa jonkun linkin, voit lisätä kyseiselle elementille luokan aim-skip.

<div class="aim-playlist">
    <a href="article-1">...</a> <!-- Luetaan -->
    <a href="article-2" hidden>...</a> <!-- Luetaan -->
    <a href="article-3" class="aim-skip">...</a> <!-- Ohitetaan -->
</div>

Käyttö normaalin verkkosivulukijan kanssa

Voit ottaa soittolistalukijan käyttöön yhdessä normaalin verkkosivulukijan kanssa. Sinulla voi olla aim-readable-elementtejä samalla sivulla aim-playlist-elementtien kanssa. Lisäksi suosittelemme ottamaan normaalin lukijan käyttöön linkkien taakse. Tällöin käyttäjä voi käydä kuuntelemassa linkkejä myös yksitellen.