دسترسی‌پذیری

دسترسی‌پذیری درباره ساخت یک رابط است که برای بیشترین تعداد افراد ممکن در بیشترین شرایط ممکن کار کند. همه ما به امکاناتی که تجربیات قابل دسترس ارائه می‌دهند تکیه می‌کنیم:

• ناوبری با صفحه‌کلید
• عناصر خوانا و قابل تغییر اندازه
• اهداف لمس بزرگ
• زبان واضح و ساده

چک‌لیست

قبل از push کردن کد؟ حداقل کار خود را با این لیست بررسی کنید:

• آیا عناصر تعاملی صفحه قابل فوکوس با صفحه‌کلید هستند؟
• آیا همه عناصر توسط خواننده صفحه قابل اعلام هستند؟
• آیا عناصر متنی خوانا و قابل مقیاس‌بندی هستند؟
• آیا می‌توانم از این در یک دستگاه کوچکتر و/یا قدیمی‌تر استفاده کنم؟

مدیریت فوکوس

همه عناصر تعاملی صفحه باید با صفحه‌کلید قابل دسترسی باشند. آن‌ها همچنین باید بازخورد بصری در هنگام انتخاب از طریق حالت focus-visible ارائه دهند. ما از استایل‌های فوکوس یکنواخت مانند inset-focus استفاده می‌کنیم تا کاربران این حالت را فوراً تشخیص دهند.

<TableCell>
  <p>{name}</p>
  <button
    className={cn('absolute inset-0', 'inset-focus')}
    onClick={(event) => handleNavigation(name, event)}
  >
    <span className="sr-only">رفتن به جزئیات</span>
  </button>
</TableCell>

همچنین امکاناتی مانند پشتیبانی از کلیدهای ctrl و meta برای باز کردن در تب جدید را در نظر بگیرید. هر کاری که می‌توانید با ورودی ماوس انجام دهید باید با صفحه‌کلید قابل تکرار باشد.

پشتیبانی از خواننده صفحه

عناصر متنی به طور پیش‌فرض توسط خوانندگان صفحه پشتیبانی می‌شوند. تصاویر البته باید با تگ‌های alt توصیف شوند.

کمتر واضح است که عناصر scaffolding که فقط از نظر بصری معنا دارند، زمانی که با محتوای دیگر جفت می‌شوند. برای مثال: یک ستون جدول برای اقدامات ممکن است برچسب بصری اقدامات نداشته باشد زیرا هدف آن برای یک فرد بینا واضح است. برای رفاه همه، این ستون باید با متن sr-only عنوان‌گذاری شود:

<TableHead>
  <span className="sr-only">اقدامات</span>
</TableHead>

کنتراست رنگ

اطمینان حاصل کنید که نسبت کنتراست بین متن و پس‌زمینه حداقل 4.5:1 برای متن عادی و 3:1 برای متن بزرگ است.

// خوب ✅
<div className="bg-background text-foreground">متن با کنتراست مناسب</div>

// بد ❌
<div className="bg-background text-foreground/30">متن با کنتراست کم</div>

اندازه اهداف لمس

برای دستگاه‌های لمسی، اطمینان حاصل کنید که اهداف تعاملی حداقل 44x44 پیکسل هستند:

// خوب ✅
<button className="h-11 min-w-11">دکمه</button>

// بد ❌
<button className="h-6 w-6">دکمه کوچک</button>

برچسب‌های فرم

همیشه برچسب‌های فرم را با input ها مرتبط کنید:

// خوب ✅
<label htmlFor="email">ایمیل</label>
<input id="email" type="email" />

// یا با استفاده از Label component
<Label htmlFor="email">ایمیل</Label>
<Input id="email" type="email" />

پیام‌های خطا

پیام‌های خطا باید واضح و قابل دسترسی باشند:

<div role="alert" aria-live="polite">
  <p className="text-destructive">این فیلد الزامی است</p>
</div>