Verkkosivuston WCAG 2.2 -saavutettavuusongelmien korjaaminen

1.1.1 Muu kuin tekstisisältö

Kaikkien kuvien, kuvakkeiden ja muiden ei-tekstuaalisten elementtien on sisällettävä tekstikuvaus, joka välittää saman tiedon tai toiminnon.

Esitysroolien ja piilotettujen tilojen korjaaminen koristeellisessa sisällössä

Koristeelliset grafiikat ja ei-tekstuaalinen sisältö, jotka eivät välitä merkityksellistä tietoa, tulisi piilottaa apuvälineteknologioilta, kuten ruudunlukijoilta. Näin apuvälineteknologioiden käyttäjät voivat keskittyä merkitykselliseen sisältöön.

Tunnista HTML-koodista koristeellinen sisältö, joka ei tarjoa merkityksellistä tietoa tai toiminnallisuutta.

1. Lisää koristeellisiin <svg>-elementteihin attribuutti aria-hidden="true" kyseiseen <svg>-elementtiin.

2. Lisää muulle koristeelliselle ei-tekstuaaliselle sisällölle, kuten pelkkänä reunuksena käytettävälle <img>-elementille, pelkästään ulkoasun muotoiluun käytettävälle <object>-elementille tai visuaalisiin tehosteisiin käytettävälle <area>-elementille attribuutti role="presentation".

3. Jos koristeellisella ei-tekstuaalisella elementillä on jo role-attribuutti, korvaa se attribuutilla role="presentation".

Esimerkki

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Pelkkä ääni ja pelkkä video (esitallennettu)

Kaikkeen esitallennettuun äänisisältöön tai videoon, jossa ei ole kuvaa tai ääntä, on liitettävä tekstitranskriptio, joka tarjoaa saman tiedon.

Puuttuvien äänitranskriptioiden korjaaminen

Äänisisällön tekstitranskriptio varmistaa, että kaikki käyttäjät, myös kuurot ja huonokuuloiset, saavat saman tiedon.

1. Etsi HTML-koodista <audio>-elementti.

2. Lisää <audio>-elementin jälkeen <p>-elementti.

3. Kirjoita <p>-elementtiin äänisisällön koko transkriptio tekstimuodossa.

Esimerkki

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Puuttuvan tekstityksen korjaaminen upotetuissa Vimeo-videoissa

Vimeo-videoissa on oltava tekstitys, jotta ne ovat saavutettavia kuuroille ja huonokuuloisille käyttäjille. Vimeossa tekstityksen voi lisätä videon asetuksista.

1. Avaa video sivustolla vimeo.com.

2. Kirjaudu sisään tilillä, joka omistaa videon.

3. Siirry kohtaan Asetukset.

4. Valitse Jakelu-välilehti ja avaa sitten Tekstitykset (tai vanhemmissa asetteluissa Lisäasetukset > Tekstitykset).

5. Etsi Tekstitykset/CC-osio.

6. Lähetä .vtt- tai .srt-tekstitystiedosto.

7. Tallenna muutokset ja varmista sitten videon esikatselulla, että tekstitys on käytössä.

Huomautus: Tekstitys näkyy automaattisesti upotetussa <iframe>-elementissä, jos se on otettu käyttöön Vimeossa.

Puuttuvan tekstityksen korjaaminen upotetuissa YouTube-videoissa

YouTube-videoissa on oltava tekstitys, jotta kuurot ja huonokuuloiset käyttäjät voivat saada puhutun sisällön käyttöönsä. YouTube tarjoaa vaihtoehtoina tekstityksen manuaalisen lähettämisen tai automaattisen tekstityksen.

1. Avaa video sivustolla youtube.com tilillä, joka omistaa videon.

2. Siirry kohtaan YouTube Studio ja valitse video, jota haluat muokata.

3. Napsauta vasemmassa valikossa kohtaa Tekstitykset.

4. Valitse tekstityksesi kieli.

5. Napsauta Lisää ja valitse jokin seuraavista:

   • Lähetä tiedosto (.vtt- tai .srt-tiedostoille)

   • Automaattinen synkronointi (liitä koko transkriptio ja anna YouTuben ajoittaa se)

   • Kirjoita manuaalisesti

6. Tarkista ja julkaise tekstityksesi.

1.3.1 Informaatio ja suhteet

Kaikki asettelun, muotoilun tai visuaalisen rakenteen kautta välitetty tieto on oltava saatavilla myös tekstinä tai koodattuna siten, että apuvälineteknologiat voivat ymmärtää sen.

Puuttuvien ARIA-maamerkkiroolien korjaaminen sivun rakenteessa

Maamerkkiroolit auttavat ruudunlukijoiden käyttäjiä hahmottamaan sivun asettelun ja siirtymään nopeasti keskeisiin osiin.

1. Etsi HTML-koodista rakenteelliset elementit (esim. <div>, <section>, <form>).

2. Lisää sopiva ARIA-maamerkkirooli role-attribuutilla (esim. role="main", role="navigation", role="form"). Lue lisää sopivasta maamerkkiroolista.
   Huomautus: Lisää ARIA-rooleja vain, jos elementillä ei jo ole sisäänrakennettua maamerkkiroolia (esim. <nav> toimii jo roolina navigation).

Esimerkki

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Puuttuvan fieldset-elementin tai ryhmän korjaaminen samannimisille syötekentille

Samannimiset valintapainikkeet tai valintaruudut on ryhmiteltävä, jotta niiden suhde on selkeä. Tämä auttaa ruudunlukijoita käyttäviä käyttäjiä ymmärtämään, että kentät kuuluvat yhteen.

1. Etsi HTML-koodista valintapainike- tai valintaruutukentät, joilla on sama name-attribuutti.

2. Kääri liittyvät kentät <fieldset>-elementin sisään.

3. Lisää <legend> ryhmän kuvaukseksi <fieldset>-elementin ensimmäiseksi elementiksi.

Vaihtoehtoisesti kääri kentät säilöelementtiin, jolla on role="group" tai role="radiogroup", ja anna nimiö käyttämällä attribuuttia aria-labelledby tai aria-label.

Esimerkki

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

Puuttuvan yläelementin korjaaminen <li>-elementeille

Kun listakohteet sijoitetaan listaelementin sisään, ruudunlukijat tunnistavat ryhmitellyn sisällön oikein.

1. Etsi HTML-koodista <li>-elementit, joita ei ole kääritty <ul>- tai <ol>-elementtiin.

2. Kääri <li>-elementit <ul>-elementtiin (luettelomerkeille) tai <ol>-elementtiin (numeroidulle luettelolle).

Esimerkki

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Kuvauslistojen (DL) rakenneongelmien korjaaminen

Kuvauslistoilla esitetään toisiinsa liittyvien tietojen pareja, kuten termi ja sen selitys. Kun lista ei ole rakenteeltaan oikein, ruudunlukijat saattavat lukea sisällön väärässä järjestyksessä tai hämmentää käyttäjiä.

1. Etsi HTML-koodista liputetut <dl>-elementit.

2. Sijoita <dl>-elementin sisällä termi <dt>-elementin sisään.

3. Sijoita <dt>-elementin sisällä kuvaus <dd>-elementin sisään.

4. Poista kaikki muut suoraan <dl>-elementin sisään sijoitetut elementit, ellei niitä ole kääritty <dt>- tai <dd>-elementin sisään.

Esimerkki

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Kuvauslistaan (DL) kuulumattomien määritelmätermien (DT) ja määritelmäkuvausten (DD) korjaaminen

Määritelmätermien (<dt>) ja määritelmäkuvausten (<dd>) on aina sisällyttävä kuvauslistaan (<dl>). Kun <dt>- tai <dd>-elementtejä käytetään <dl>-elementin ulkopuolella, ruudunlukijat saattavat lukea sisällön väärässä järjestyksessä tai hämmentää käyttäjiä.

1. Etsi HTML-koodista liputetut <dt>- tai <dd>-elementit.

2. Varmista, että jokainen <dt> ja <dd> on sijoitettu <dl>-elementin sisään. Jos sisältö ei ole osa kuvauslistaa, korvaa <dt> ja <dd> sopivalla elementillä (esim. <h2>, <h3>, <p>).

Esimerkki

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Taulukoiden scope-attribuutin virheellisen käytön korjaaminen

Kun taulukossa käytetään scope-attribuuttia, se on määritettävä vain otsikkosoluille (<th>), jotta niiden yhteys tietosoluihin määritellään selkeästi. Virheelliset tai puuttuvat scope-arvot voivat estää avustavia teknologioita yhdistämästä otsikoita oikein taulukon tietoihin.

1. Etsi HTML-koodistasi merkitty scope-attribuutti tai taulukkoelementit.
2. Päivitä scope-attribuutti siten, että:
   1. scope-attribuutti määritetään vain <th>-elementeille.
   2. Jokaisella <th>-elementillä on sopiva scope-arvo, kuten col, row, colgroup tai rowgroup.
   3. scope-attribuutin arvo kuvaa tarkasti taulukon rakennetta ja suhteita.

Esimerkki

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Taulukoiden headers-attribuutin virheellisen käytön korjaaminen scope-attribuutin avulla

Taulukoissa on oltava taulukon tietosoluja (<td>), joita taulukon otsikot (<th>) kuvaavat. Taulukot, joissa on otsikoita mutta ei tietosoluja, eivät tarjoa avustaville teknologioille mielekkäitä yhteyksiä ja voivat aiheuttaa hämmennystä ruudunlukuohjelmien käyttäjille.

Etsi HTML-koodistasi merkityt taulukkoelementit, jotka sisältävät <th>-elementtejä mutta eivät vastaavia <td>-elementtejä.

Päivitä taulukon rakenne siten, että:

1. Jokainen taulukko sisältää vähintään yhden tietoja sisältävän <td>-elementin.

2. <th>-elementtejä käytetään vain silloin, kun ne kuvaavat todellisia taulukon tietoja.

3. Pelkästään asettelua tai esitystä varten käytetyt taulukot eivät sisällä <th>-elementtejä.

4. Jos taulukko ei sisällä tietoja, poista taulukko tai korvaa se muulla kuin taulukkomerkinnällä.

Esimerkki

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Virheellisen ARIA-ryhmittelyn korjaaminen ”group”-roolille

ARIA-roolien oikea käyttö auttaa ruudunlukuohjelmia ymmärtämään sivun rakenteen, mikä helpottaa vammaisten käyttäjien sisällössä liikkumista ja sen käyttämistä.

1. Etsi HTML-koodista elementti, jossa on role="group".

2. Sisällytä elementtiin vähintään yksi interaktiivinen ohjauselementti (esim. <input>, <textarea> tai <select>).
   Huomautus: Lue lisää siitä, mikä interaktiivinen ohjauselementti kannattaa sisällyttää. Jos sopivia interaktiivisia ohjauselementtejä ei ole, harkitse role="group"-attribuutin korvaamista sopivammalla ARIA-roolilla tai -rakenteella.

Esimerkki

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Virheellisen ARIA-ryhmittelyn korjaaminen ”radiogroup”-roolille

ARIA-roolien oikea käyttö auttaa ruudunlukuohjelmia ymmärtämään sivun rakenteen, mikä helpottaa vammaisten käyttäjien sisällössä liikkumista ja sen käyttämistä.

1. Etsi HTML-koodista elementti, jossa on role="radiogroup".

2. Sisällytä elementtiin vähintään yksi valintapainike (esim. <input type="radio"> tai role="radio").

Esimerkki

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Virheellisen ARIA-ryhmittelyn korjaaminen ”checkbox”-roolille

ARIA-roolien oikea käyttö auttaa ruudunlukuohjelmia ymmärtämään sivun rakenteen, mikä helpottaa vammaisten käyttäjien sisällössä liikkumista ja sen käyttämistä.

1. Etsi HTML-koodista <input type="checkbox"> tai elementti, jossa on role="checkbox".

2. Kääri valintaruudut säiliöelementtiin ja määritä sille role="group".

3. Lisää elementtiin, jossa on aria-labelledby, aria-label- tai role="checkbox"-attribuutti kuvaamaan valintaruuturyhmän tarkoitusta.

Esimerkki

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Virheellisen ARIA-ryhmittelyn korjaaminen ”radio”-roolille

ARIA-roolien oikea käyttö auttaa ruudunlukuohjelmia ymmärtämään sivun rakenteen, mikä helpottaa vammaisten käyttäjien sisällössä liikkumista ja sen käyttämistä.

1. Etsi HTML-koodista <input type="radio"> tai elementti, jossa on role="radio".

2. Ryhmittele valintapainikkeet sellaisen elementin sisään, jossa on role="radiogroup".

3. Lisää elementtiin aria-labelledby- tai aria-label-attribuutti kuvaamaan valintapainikeryhmän tarkoitusta.

Esimerkki

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Puuttuvan aria-level-arvon korjaaminen otsikkoroolien yhteydessä

ARIA-otsikkoroolien on sisällettävä selkeyden vuoksi määritetty otsikkotaso.

1. Etsi HTML-koodista elementti, jolla on attribuutti role="heading".

2. Lisää role-attribuutin jälkeen aria-level-attribuutti, jonka arvo on väliltä 1–6 (esim. aria-level="2").

Esimerkki

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Puuttuvien taulukon otsikoiden korjaaminen

Taulukon otsikot auttavat ruudunlukuohjelmia ymmärtämään, mitä kukin sarake tai rivi tarkoittaa. Jos taulukossa ei ole otsikoita, avustavat teknologiat eivät voi antaa käyttäjille oikeaa asiayhteyttä.

1. Etsi HTML-koodistasi <table>-elementti ja tunnista ensimmäinen rivi. Tämän rivin tulisi määritellä taulukon otsikot (esim. ”Nimi”, ”Ikä” jne.).

2. Jos ensimmäisellä rivillä käytetään <td>-elementtejä (taulukon tietoja), muuta jokainen <td> muotoon <th> (taulukon otsikko) osoittaaksesi, että nämä solut ovat otsikoita.

3. Lisää scope="col" jokaiseen <th>-elementtiin, jos kyseessä on sarakeotsikko, tai scope="row", jos kyseessä on riviotsikko.

Esimerkki

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Virheellisen luettelorakenteen korjaaminen

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Meta viewport -tunnisteen suuntaongelmien korjaaminen

Viewport-asetukset, jotka lukitsevat näytön suunnan tai estävät zoomauksen, voivat vaikeuttaa sisällön lukemista ja käyttöä. Kun sekä pysty- että vaakasuunta sekä zoomaus sallitaan, käyttäjät saavat joustavuutta laitteensa ja henkilökohtaisten tarpeidensa mukaan.

1. Etsi HTML-koodistasi meta name="viewport"-tunniste.
2. Poista kaikki suuntarajoituksiin liittyvät attribuutit, kuten orientation=portrait tai orientation=landscape.
3. Poista kaikki zoomauksen estävät attribuutit, kuten maximum-scale=1 tai user-scalable=no.
4. Tallenna muutokset ja lataa sivu uudelleen.

Esimerkki

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

CSS-suuntaongelmien korjaaminen

CSS-mediakyselyt, jotka lukitsevat sisällön pysty- tai vaakasuuntaan, voivat rajoittaa sitä, miten käyttäjät käyttävät sivua. Näiden rajoitusten poistaminen antaa sisällön mukautua molempiin suuntiin.

1. Etsi CSS-koodistasi suuntaa rajoittavat mediakyselyt, kuten:
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Poista nämä suuntakohtaiset mediakyselyt, jotta sisältö voi mukautua vapaasti molempiin suuntiin.
3. Tallenna muutokset ja lataa sivu uudelleen.

Esimerkki:

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Syötteen tarkoituksen tunnistaminen