Erişilebilirlik Temelleri — Gözü Kapalı Para Gönderebilir misin?

Bir arkadaşın sana telefonda bir formu okuyor ve sen ona söyleyerek dolduruyorsun. O yalnızca kâğıtta yazanı okuyabilir. Kâğıtta yazmayan bir şeyi, ne kadar renkli olursa olsun, sana anlatamaz.

Herkes fareyle gezmiyor

Bazı kullanıcılar sayfayı bir ekran okuyucu?Terimin tanımını açscreen readerSayfayı sesli okuyan ya da Braille ekrana aktaran yazılım (NVDA, VoiceOver). Görüntüye değil, HTML'deki rol, ad ve duruma bakar.Sözlükte gör → ile dinler, bazıları yalnızca klavyeyle gezer. İkisi de ekrandaki görüntüye değil, HTML’in kendisine bakar.

Bu yüzden erişilebilirlik çoğu zaman ek bir iş değildir. Doğru HTML etiketini seçmek, işin büyük kısmını kendiliğinden yapar.

Önce doğru etiket

Bir kontrolün okunan adına erişilebilir ad?Terimin tanımını açaccessible nameBir kontrolün ekran okuyucuda okunan adı. label for, düğmenin yazısı, aria-label ya da aria-labelledby'dan gelir.Sözlükte gör → denir. Kutunun yanındaki yazı bir span ise kutuya bağlı değildir; <label for> onu bağlar ve kutunun adı olur.

Tıklanan bir şey için <button> kullanmak, odaklanmayı, Enter ve Space ile çalışmayı ve “düğme” rolünü bedavaya getirir.

Renk tek başına konuşmaz

Hatalı tutarı yalnızca kırmızı çerçeveyle göstermek, görmeyen biri için hiçbir şey göstermemektir. Renk körlüğü olan biri için de çoğu zaman öyledir.

Hata metnini yaz ve ARIA?Terimin tanımını açARIAHTML'e rol, ad ve durum bilgisi ekleyen öznitelikler (aria-label, aria-invalid). Davranış eklemez; aynı işi yapan HTML öğesi varsa o tercih edilir.Sözlükte gör → ile kutuya bağla: aria-invalid="true" kutunun hatalı olduğunu, aria-describedby hatanın ne olduğunu söyler. Bu sitenin simülatörleri de her durumu renkle birlikte bir simge ve bir yazıyla gösterir.

Kendin gör

1. Varsayılanla oynat. Kutular adsız, hata sessiz, Gönder’e ulaşılamadı.
2. “button kullan”ı aç. Tab artık Gönder’de duruyor.
3. Etiketleri aç. Kutular adlarıyla okunuyor.
4. Hatayı yazıyla bağla. “Geçersiz, bakiye yetersiz” duyuldu.
5. İkona ad ver. “Düğme” yerine “Kapat, düğme”.

Tuzaklar

ARIA’yı her yere serpmek. ARIA’nın ilk kuralı: aynı işi yapan bir HTML öğesi varsa onu kullan. div role="button" yazmak, klavye davranışını sana bırakır; button hepsini hazır verir.

Odak çerçevesini silmek. outline: none yazıp yerine bir şey koymamak, klavye kullananın nerede olduğunu görmesini engeller. Çerçeveyi sevmiyorsan :focus-visible ile güzelleştir.

Placeholder’ı etiket sanmak. Yazmaya başlayınca kaybolur, rengi de genellikle soluktur. Kutunun adı görünür bir label’da olsun.

Aşağıdaki örnek bir bankacılık uygulamasının para gönderme formundan: her kontrolün adı var, hata duyuluyor, her şey klavyeyle çalışıyor.

1
interface TransferFormProps {
2
  balance: number;
3
  onSend: (iban: string, amount: number) => void;
4
}
5

6
export function TransferForm({ balance, onSend }: TransferFormProps) {
7
  const [iban, setIban] = useState('');
8
  const [amount, setAmount] = useState('');
9
  const tooMuch = Number(amount) > balance;
10

11
  return (
12
    <form
13
      onSubmit={(event) => {
14
        event.preventDefault();
15
        if (!tooMuch) onSend(iban, Number(amount));
16
      }}
17
    >
18
      <label htmlFor="iban">Alıcı IBAN</label>
19
      <input id="iban" value={iban} onChange={(e) => setIban(e.target.value)} autoComplete="off" />
20

21
      <label htmlFor="amount">Tutar</label>
22
      <input
23
        id="amount"
24
        inputMode="decimal"
25
        value={amount}
26
        onChange={(e) => setAmount(e.target.value)}
27
        aria-invalid={tooMuch}
28
        aria-describedby={tooMuch ? 'amount-error' : undefined}
29
      />
30
      {tooMuch && (
31
        <p id="amount-error" className="error">
32
          ✕ Bakiye yetersiz
33
        </p>
34
      )}
35

36
      <button type="submit">Gönder</button>
37
    </form>
38
  );
39
}

1
interface CloseButtonProps {
2
  onClose: () => void;
3
}
4

5
export function CloseButton({ onClose }: CloseButtonProps) {
6
  return (
7
    <button type="button" onClick={onClose} aria-label="Kapat">
8
      <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
9
        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" />
10
      </svg>
11
    </button>
12
  );
13
}

1
/* Never remove the focus ring; make it fit the design instead. */
2
:focus-visible {
3
  outline: 2px solid #daa520;
4
  outline-offset: 2px;
5
}

1
it('announces the error and lets the keyboard reach Send', async () => {
2
  render(<TransferForm balance={100} onSend={vi.fn()} />);
3

4
  await userEvent.type(screen.getByLabelText('Tutar'), '250');
5

6
  expect(screen.getByLabelText('Tutar')).toHaveAccessibleDescription('✕ Bakiye yetersiz');
7
  expect(screen.getByRole('button', { name: 'Gönder' })).toBeInTheDocument();
8
});

Kendini sına