Suomi

Opi, miten ohituslinkit parantavat verkkosivujen saavutettavuutta erityisesti näppäimistön ja ruudunlukijoiden käyttäjille maailmanlaajuisesti. Toteuta ohitusnavigointi ja luo inklusiivisempi verkkokokemus.

Ohituslinkit: Näppäimistöllä navigoinnin parantaminen globaalin saavutettavuuden edistämiseksi

Nykypäivän digitaalisessa maailmassa verkkosivujen saavutettavuuden varmistaminen kaikille käyttäjille on ensisijaisen tärkeää. Yksi näennäisen pieni mutta syvällisesti vaikuttava ominaisuus verkkokehityksessä on ohituslinkkien, eli navigoinnin ohituslinkkien, käyttö. Nämä usein huomiotta jäävät linkit parantavat merkittävästi selauskokemusta käyttäjille, jotka turvautuvat näppäimistöllä navigointiin, ruudunlukijoihin ja muihin avustaviin teknologioihin, hyödyttäen globaalia yleisöä, jolla on moninaisia tarpeita.

Mitä ohituslinkit ovat?

Ohituslinkit ovat sivun sisäisiä linkkejä, jotka tulevat näkyviin, kun käyttäjä ensimmäisen kerran selaa verkkosivua sarkainnäppäimellä. Niiden avulla käyttäjät voivat ohittaa toistuvat navigointivalikot, ylätunnisteet tai muut sisältölohkot ja siirtyä suoraan pääsisältöalueelle. Tämä on erityisen tärkeää käyttäjille, jotka navigoivat näppäimistöllä tai ruudunlukijalla, sillä pitkien navigointielementtien toistuva läpikäynti voi olla työlästä ja aikaa vievää. Kuvittele esimerkiksi käyttäjä, joka selaa monikielistä uutisportaalia. Ilman ohituslinkkejä hänen täytyisi selata läpi useita kielivaihtoehtoja, lukuisia kategorioita ja erilaisia mainoksia ennen kuin hän pääsee varsinaisiin uutisiin.

Miksi ohituslinkit ovat tärkeitä?

Ohituslinkkien tärkeys perustuu niiden kykyyn parantaa:

Kuka hyötyy ohituslinkeistä?

Vaikka ohituslinkit on suunniteltu ensisijaisesti vammaisille käyttäjille, niiden hyödyt ulottuvat laajemmalle yleisölle, mukaan lukien:

Ohituslinkkien toteuttaminen: Käytännön opas

Ohituslinkkien toteuttaminen on suhteellisen yksinkertainen prosessi, joka voi parantaa merkittävästi verkkosivuston saavutettavuutta. Tässä on vaiheittainen opas:

1. HTML-rakenne:

Ohituslinkin tulisi olla sivun ensimmäinen kohdistettava elementti, joka ilmestyy ennen ylätunnistetta tai navigointivalikkoa. Se osoittaa tyypillisesti sivun pääsisältöalueeseen.


<a href="#main-content" class="skip-link">Siirry pääsisältöön</a>
<header>
  <!-- Navigointivalikko -->
</header>
<main id="main-content">
  <!-- Pääsisältö -->
</main>

Selitys:

2. CSS-muotoilu:

Aluksi ohituslinkin tulisi olla visuaalisesti piilotettu. Sen tulisi tulla näkyviin vain, kun se saa kohdistuksen (esim. kun käyttäjä siirtyy siihen sarkainnäppäimellä).


.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #333;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Selitys:

3. JavaScript (valinnainen):

Joissakin tapauksissa saatat käyttää JavaScriptiä lisätäksesi dynaamisesti ohituslinkkejä tai parantaaksesi niiden toiminnallisuutta. Hyvin jäsennelty HTML- ja CSS-toteutus on kuitenkin yleensä riittävä.

4. Sijoitus ja kohde:

5. Selkeä ja ytimekäs teksti:

Ohituslinkin tekstin tulisi selkeästi ilmaista sen kohde. Yleisiä esimerkkejä ovat:

Monikielisillä verkkosivustoilla tarjoa käännetyt versiot ohituslinkin tekstistä palvellaksesi globaalia yleisöä. Esimerkiksi sivustolla, joka on suunnattu sekä englannin- että espanjankielisille käyttäjille, voisit käyttää tekstejä ”Skip to main content” ja ”Saltar al contenido principal”.

6. Testaus:

Testaa ohituslinkki huolellisesti näppäimistöllä ja ruudunlukijalla varmistaaksesi, että se toimii odotetusti. Eri selaimet ja avustavat teknologiat voivat tulkita toteutuksen eri tavoin. Harkitse testaamista eri ruudunlukijoilla, kuten NVDA, JAWS ja VoiceOver. Testaa myös eri käyttöjärjestelmissä (Windows, macOS, Linux, Android, iOS) varmistaaksesi johdonmukaisen toiminnan.

Edistyneempiä huomioita

Useat ohituslinkit:

Vaikka yksi ohituslinkki pääsisältöön on usein riittävä, harkitse lisäohituslinkkien lisäämistä muihin sivun keskeisiin osioihin, kuten alatunnisteeseen tai hakupalkkiin, erityisesti monimutkaisissa asetteluissa. Tämä voi entisestään parantaa navigointia vammaisille käyttäjille.

Dynaaminen sisältö:

Jos verkkosivustosi lataa sisältöä dynaamisesti, varmista, että ohituslinkki pysyy toimivana ja osoittaa oikeaan paikkaan sisällön lataamisen jälkeen. Tämä voi vaatia href-attribuutin päivittämistä tai JavaScriptin käyttöä ohituslinkin kohteen säätämiseksi.

ARIA-attribuutit:

Vaikka ne eivät aina ole välttämättömiä, ARIA-attribuutit voivat tarjota lisätietoa avustaville teknologioille. Voit esimerkiksi käyttää aria-label-attribuuttia antaaksesi kuvaavamman selitteen ohituslinkille.

Saavutettavuuden testaustyökalut:

Hyödynnä saavutettavuuden testaustyökaluja tunnistaaksesi mahdolliset ongelmat ohituslinkkisi toteutuksessa. Työkalut, kuten WAVE, axe DevTools ja Lighthouse, voivat auttaa sinua varmistamaan WCAG-ohjeiden noudattamisen. Monet näistä työkaluista ovat saatavilla selainlaajennuksina tai komentorivityökaluina, mikä mahdollistaa saumattoman integroinnin kehitysprosessiisi.

Esimerkkejä todellisesta maailmasta

Tässä on joitakin esimerkkejä siitä, miten ohituslinkit on toteutettu suosituilla verkkosivustoilla:

Vältettävät yleiset virheet

Ohituslinkit ja hakukoneoptimointi (SEO)

Vaikka ohituslinkit hyödyttävät pääasiassa saavutettavuutta, ne voivat välillisesti edistää hakukoneoptimointia (SEO). Parantamalla käyttäjäkokemusta ja helpottamalla käyttäjien (ja hakukoneroottien) pääsyä pääsisältöön, ohituslinkit voivat vaikuttaa positiivisesti sitoutumismittareihin ja hakukonesijoituksiin.

Saavutettavuuden tulevaisuus

Verkon kehittyessä saavutettavuudesta tulee yhä tärkeämpää. Ohituslinkit ovat vain yksi pieni mutta keskeinen osa inklusiivisemman ja saavutettavamman verkkokokemuksen luomista kaikille. Ajan tasalla pysyminen uusimmista saavutettavuusohjeista ja parhaista käytännöistä on olennaista verkkokehittäjille ja suunnittelijoille, jotka haluavat rakentaa sivustoja, jotka ovat saavutettavia kaikille käyttäjille heidän kyvyistään tai sijainnistaan riippumatta.

Yhteenveto

Ohituslinkit ovat yksinkertainen mutta tehokas työkalu verkkosivujen saavutettavuuden parantamiseen ja käyttäjäkokemuksen kohentamiseen näppäimistön ja ruudunlukijoiden käyttäjille sekä vammaisille henkilöille ympäri maailmaa. Toteuttamalla ohituslinkkejä voit luoda inklusiivisemman ja saavutettavamman verkkoympäristön, joka hyödyttää kaikkia käyttäjiä. Niiden toteuttamiseen käytetty aika osoittaa sitoutumista inklusiivisuuteen ja eettisiin verkkokehityskäytäntöihin. Se on pieni investointi, joka tuottaa merkittävää hyötyä käyttäjätyytyväisyyden ja saavutettavuusvaatimusten täyttymisen kannalta.

Ohituslinkit: Näppäimistöllä navigoinnin parantaminen globaalin saavutettavuuden edistämiseksi | MLOG