Əlçatanlıq

Siçansız istifadəni sına

Tab ilə növbəti idarəetməyə, Shift + Tab ilə əvvəlkinə keç. Düymələri Enter və Space ilə sına. Fokus göstəricisini aradan qaldırma; istifadəçi harada olduğunu görməlidir.

<label for="book-title">Kitabın adı</label>
<input id="book-title" name="title" required />
<button type="submit">Kitabı əlavə et</button>

Nümunə

Kliklənən div əvəzinə yerli button seçmək bir çox klaviatura davranışını hazır verir. Xəta haqqında yalnız qırmızı rənglə deyil, mətnlə də məlumat ver. Avtomatik yoxlamalar faydalıdır, amma əl ilə sınağı əvəz etmir.

Əlavə qeydlər və mənbələr

İnterfeysini müxtəlif ehtiyacları olan insanlar üçün istifadəyə yararlı et.

Niyə vacibdir?

Klaviatura, ekran oxuyucu və böyüdülmüş mətnlə istifadə əsas ehtiyacdır.

Əvvəlki biliklər

React əsasları

Bu mövzuda

Səhifəni yalnız klaviatura ilə gəz
Forma etiketləri və xəta mesajlarını yoxla
Kontrastı və görünən fokusu yoxla
Semantik HTML-i lazımsız ARIA-dan üstün tut

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Düyməni klaviatura ilə işlə

Fokusun görünməsini və aktivləşməni ayrı addımlar kimi yoxla.

Prosesi son vəziyyətə çatdır.

Fokus yoxdur
Fokus görünür
Düymə işlədi

Fokus yoxdur

Düyməyə klaviatura ilə çat.

<button type="button">Aç</button>

Bu məşq prosesi modelləşdirir.

Özün sına

React layihəni siçan olmadan sına. Əlçatmaz düymələri düzəlt, formaya etiket və xəta mesajı əlavə et.

Nəticəni necə yoxlayım?

Bütün əməliyyatlar klaviatura ilə edilir; fokus itmir və məlumat yalnız rənglə çatdırılmır.

Gözlənilən nəticə

Tab ilə input və düyməyə çatmaq, Enter ilə göndərmək mümkündür.
Boş ad üçün fokus sahəyə qayıdır, əlaqəli xəta səsləndirilir; düzgün adla salam mesajı görünür.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Native düymələr və formalar klaviatura davranışını təmin edir. Xəta sahə ilə aria-describedby vasitəsilə əlaqələndirilir.

App.jsx

import { useState } from 'react';
import './styles.css';
export default function App() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  function submit(event) {
    event.preventDefault(); setMessage('');
    if (!name.trim()) { setError('Adını yaz.'); document.getElementById('name').focus(); return; }
    setError(''); setMessage(`Salam, ${name.trim()}!`);
  }
  return <form onSubmit={submit} noValidate>
    <label htmlFor="name">Ad</label><input id="name" value={name} onChange={event => setName(event.target.value)} aria-invalid={!!error} aria-describedby={error ? 'name-error' : undefined} />
    {error && <p id="name-error" role="alert">{error}</p>}<button>Göndər</button><p role="status">{message}</p>
  </form>;
}

styles.css

:focus-visible{outline:3px solid #214e80;outline-offset:3px}button,input{font:inherit;min-height:44px}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.