Verkkosivut käyttävät linkkejä kävijöiden lähettämiseen uuteen tai lisäsisältöön. Linkit voivat olla tekstiä ja kuvia. Linkit ovat tehokkaita siirtymistyökaluja, ja niiden rakenteen on oltava asianmukainen, jotta niistä saadaan paras mahdollinen kokemus.

Verkkosisällön helppokäyttöisyysohjeet (Web Content Accessibility Guidelines, WCAG) ovat erityisiä vaatimuksia, joilla varmistetaan, että sisältö on kaikkien käytettävissä. WCAG 2.2 AA -ohjeiden mukaan linkeissä on ilmoitettava linkin tarkoitus, jotta kävijät voivat päättää, haluavatko he noudattaa sitä. Linkit tarvitsevat tunnistettavan tekstin, joka kertoo, mihin linkki vie.

Mitä tunnistettava teksti tarkoittaa?

Linkeillä on yleensä kaksi tietoa:

  • URL-osoite: tämä on verkko-osoite, johon linkki lähettää kävijät, kun he valitsevat linkin.
  • Näyttöteksti: Tämä Näkyvä teksti, joka kertoo kävijöille, mitä he voivat odottaa löytävänsä, jos he valitsevat linkin.

Tästä linkistä voit katsoa parhaat käytännöt: Linkkien parhaat käytännöt. HTML-lähdekoodissa parhaiden käytäntöjen linkki näyttää tältä:<a href="#best-practices">Best practices for links</a>

Kun näyttöteksti tai <a>-tunnisteiden välinen teksti puuttuu, linkistä puuttuu tunnistettava oleva teksti. Tunnistettava teksti on teksti, joka kertoo vierailijoille linkin tarkoituksen.

Kyseessä on pieni ongelma, kun linkeissä ei ole tunnistettavaa tekstiä. Paranna käyttökokemusta korjaamalla pienet ongelmat. Puuttuvat tai epämääräisellä tekstillä varustetut linkit voivat tehdä siirtymisestä epäselvää ja aiheuttaa turhautumista apuvälineitä käyttäville käyttäjille.

Miten apuvälineiden käyttäjät avaavat linkkejä, jotka linkittävät sivun alareunaan

Ally auttaa sinua tunnistamaan, kun linkeistä puuttuu tekstiä, ja kertoo, miten ne korjataan. Ally tekee seuraavat tarkistukset:

  • Onko hyperlinkin <a>-tunnisteiden välissä tekstiä?
  • Onko <a>-tunnisteiden välinen teksti piilossa?
  • Onko linkkeinä käytettävillä kuvilla vaihtoehtoisia kuvauksia?

Jos linkki ei läpäise mitään tarkistusta, Ally merkitsee linkin ongelmaksi.

Etsi Allyn avulla linkkejä, joista puuttuu tekstiä

Allyn helppokäyttöisyysraportin avulla voit etsiä ja korjata sivuston helppokäyttöisyysongelmia. Napsauta raportin linkkiä ja kirjaudu sisään. Avaa raportti ja katso Helppokäyttöisyysongelmat-taulukon ongelmaluetteloa.

Helppokäyttöisyysongelmat-taulukko näkyy sekä Yleiskatsaus- että Ala-välilehdissä. Aloita Ala-välilehdestä ja katso, onko siinä mitään alakohtaisia ongelmia.

Linkit, joista puuttuu tunnistettava teksti, merkitään pieneksi ongelmaksi. Käytä helppokäyttöisyysongelmien taulukon pienten ongelmien välilehteä, kun haluat tarkastella pienten ongelmien luetteloa. Valitse ongelmat, jotka liittyvät linkkeihin, joissa ei ole tunnistettavaa tekstiä.

Jos aloitat Yleiskatsaus-välilehdestä, valitse ensin ongelma ja sitten ala, jolla ongelma ilmenee.

Valitse alan otsikoihin liittyvien ongelmien luettelosta ongelmallisen kohteen vieressä oleva helppokäyttöisyysarvon ilmaisin. Sisältöeditorin palautepaneeli avautuu.

Esikatsele linkit löytääksesi puuttuvat tekstit

Allyn palautepaneelissa voit esikatsella sisältöä sekä saada yksityiskohtaista palautetta ja ohjeita helppokäyttöisyysongelmien korjaamiseen. Esikatselun avulla voit tarkastella linkkejä ja tunnistaa ne, joista puuttuu tekstiä.

Esikatselu korostaa, missä asiakirjassa kohdissa on erityisiä helppokäyttöisyysongelmia. Korostukset näyttävät kerrallaan yhden ongelmatyypin kaikki esiintymät. Esimerkiksi puuttuvien linkkien kohdalla esikatselu korostaa jokaista kohtaa, jossa tämä ongelma ilmenee.

Esikatselutyökalut

Esikatselutyökalujen avulla voit selata asiakirjassa olevia ongelmia.

  • Käy esikatselu läpi sivu kerrallaan.
  • Selvitä, montako kertaa tietty ongelma ilmenee.
  • Voit siirtyä korostetusta ongelmasta suoraan seuraavaan.
  • Voit piilottaa tai näyttää korostukset.
  • Voit suurentaa tai pienentää esikatselun sisältöä.
  • Jos ongelma on liitetiedostossa, lataa alkuperäinen tiedosto.

Lisää linkkiteksti Allyn ohjeiden mukaan

Ally olettaa, että tunnet HTML-koodauksen perusteet ja osaat käyttää tarvittavaa sisällönhallintajärjestelmää (CMS). Jotta voisit noudattaa ohjeita, sinun on osattava muokata verkkosivua CMS-järjestelmän HTML- tai lähdekoodissa.

Esikatselun lisäksi Ally antaa vaiheittaiset ohjeet ongelman korjaamiseen. Ally järjestää tämän palautteen päätöspuuksi. Lue ohjeet ja vastaa kehotteisiin. Lue, mikä ongelma on, miksi se on merkityksellinen ja miten asian voi korjata.

Valitse linkkitekstin korjausohjeiden kohta, niin saat vaiheittaiset ohjeet.

Tekstin lisääminen linkkeihin

Voit korjata verkkosivujesi linkkien tekstejä usein eri tavoin.

  • HTML: Allyn vaiheittaisten ohjeiden avulla voit etsiä ja korjata linkkitekstiä HTML-muodossa. Etsi verkkosivu, jolla linkki on. Muokkaa sivua. Lisää HTML-koodiin teksti <a>-tunnisteiden väliin. Tallenna sivu.
  • RTE: Joissakin CMS-järjestelmissä on RTE (Rich Text Editor) -editori, joka voi tarjota helppokäyttöisiä tapoja korjata linkkejä. Etsi linkki verkkosivulta. Valitse linkki ja lisää tekstiä CMS-työkaluilla. Tallenna sivu.

w3schools-sivustolla voit perehtyä tarkemmin HTML-koodiin ja CSS-tyyleihin.

Linkkien parhaat käytännöt

  • Linkin tekstin pitäisi olla merkityksellinen. Kerro kävijöille, minne he ovat menossa. Kuvaile, mitä käyttäjä näkee, kun hän valitsee linkin.
    • Vältä tekstiä Napsauta tätä- ja Katso lisää -tekstejä tai muita liian yleisluontoisia tekstejä. Ne eivät kerro kävijöille, mitä heidän pitäisi odottaa, kun he valitsevat linkin. Joissakin apuvälinetekniikoissa on työkalu, joka luettelee sivulta pelkät linkit. Yllä mainituilla linkkiteksteillä ei ole merkitystä, kun ne poistetaan sivun kontekstista ja näytetään luettelossa.
    • Vältä URL-osoitteita näkyvänä linkkitekstinä. URL-osoite ei ehkä ole kuvaava. Näytönlukijat lukevat myös URL-osoitteen jokaisen kirjaimen erikseen, mikä voi olla turhauttavaa vierailijoille.
  • Linkin tekstin on oltava yksilöllinen. Jokaisen linkin tulee olla yksilöllinen sivun muille linkeille. Toistuva linkkiteksti voi olla hämmentävää, kun se poistetaan sivun kontekstista ja näytetään linkkien luettelotyökalussa.
  • Linkkien pitäisi erottua näkyvästi. On oltava selvää, että se on linkki. Jos et pidä linkin tyylistä, voit päivittää mallin.

    • Erota linkit ympäröivästä tekstistä tavalla, joka ei perustu pelkästään väriin. WCAG 2.1–1.4.1

      Linkin ulkoasu määritetään usein sivuston tyylioppaassa, ja se voi heijastaa brändäystä. Ennen kuin teet muutoksia, tarkista asia sivuston tyylioppaasta ja sivuston ylläpitäjältä.

  • Kerro käyttäjille, avautuuko linkki uuteen ikkunaan. Linkkien avaaminen uudessa ikkunassa voi olla sekavaa. Kerro käyttäjille, kun lähetät heitä uuteen ikkunaan tai välilehteen.
  • Älä käytä kuvaa HTML-muodossa luotavan kohteen esittämiseen. Älä esimerkiksi käytä painikkeen kuvaa varsinaisen painikkeen sijasta. Älä käytä taulukon kuvaa HTML-lähdekoodissa luodun taulukon sijaan.

Miten aputekniikoiden käyttäjät käyttävät linkkejä?

Oikeat linkit, jotka sisältävät linkin, ja mielekkään linkkitekstin mahdollistavat paljon paremman kokemuksen kaikille. Hyvin muodostetut linkit ovat tehokkaita siirtymistyökaluja, joiden avulla käy selvästi ilmi mitä on odotettavissa. Näkövammaisille on kuitenkin olennaista, että heille on asianmukaiset linkit.

Linkit, joissa on yksilöllistä ja merkityksellistä tekstiä, voivat tarkoittaa nopeaa siirtymistä monille käyttäjille.

  • Näytönlukuohjelman käyttäjien ei tarvitse kuunnella koko sivua. He voivat halutessaan kuunnella linkkejä ja olla vuorovaikutuksessa niiden kanssa.
  • Puheentunnistuksen käyttäjät ovat yhteydessä linkkeihin sanomalla linkin, jonka he haluavat valita ääneen.

Oikein muodostetut linkit voivat olla monille käyttäjille helpompia nähdä ja olla vuorovaikutuksessa.

  • Vain näppäimistöllä käyttävät käyttäjät, jotka eivät ehkä pysty käyttämään hiirtä, voivat siirtyä sivun elementteihin, kuten linkkeihin.
  • Värisokeat käyttäjät eivät ehkä näe värien vaihtelua, mutta voivat nähdä alleviivatun linkin.