# Painikkeilla on oltava tunnistettava teksti

<https://www.fixreports.com/fi/issues/button-name>

WCAG 4.1.2 Nimi, rooli, arvo · Taso A

Joillakin painikkeilla ei ole saavutettavaa nimeä, joten ruudunlukijan käyttäjät kuulevat vain ”painike”.

## Mitä tämä sääntö tarkistaa
Varmistaa, että painikkeilla on tunnistettava teksti.

## Miksi sillä on merkitystä
WCAG 4.1.2 edellyttää, että jokaisella säätimellä on nimi. Nimettömiä painikkeita ovat usein määrän säätimet, sulkemispainikkeet ja karusellin nuolet.

## Miten se korjataan
### Millä tahansa sivustolla
1. Etsi painikkeet, joilla ei ole nimeä. Yleensä ne ovat painikkeita, joissa näkyy pelkkä kuvake.
2. Lisää näkyvä teksti, visuaalisesti piilotettu teksti tai aria-label, joka kertoo, mitä painike tekee (esimerkiksi aria-label="Close" tai aria-label="Increase quantity").

### Shopifyssa
1. Etsi painikkeet, joilla ei ole nimeä. Yleensä ne ovat painikkeita, joissa näkyy pelkkä kuvake.
2. Lisää näkyvä teksti, visuaalisesti piilotettu teksti tai aria-label, joka kertoo, mitä painike tekee (esimerkiksi aria-label="Close" tai aria-label="Increase quantity").

### WooCommercessa ja WordPressissä
1. Etsi painikkeet, joilla ei ole nimeä. Yleensä ne ovat painikkeita, joissa näkyy pelkkä kuvake.
2. Lisää näkyvä teksti, visuaalisesti piilotettu teksti tai aria-label, joka kertoo, mitä painike tekee (esimerkiksi aria-label="Close" tai aria-label="Increase quantity").

## Miten korjaus tarkistetaan
- Skannaa kyseiset sivut uudelleen.
- Tarkista painikkeet ruudunlukijalla.

## Lähteet
- axe-core-säännön dokumentaatio (Deque): https://dequeuniversity.com/rules/axe/4.13/button-name
- Understanding WCAG 4.1.2: kriteerin selitys (W3C): https://www.w3.org/WAI/WCAG22/Understanding/name-role-value