صفحه‌کلید و دسترس‌پذیری؛ مسیر قابل‌استفاده بساز

همه با ماوس کار نمی‌کنند

کاربر باید با Tab به لینک‌ها و کنترل‌ها برسد، با Enter لینک را باز کند و دکمه را با Enter یا Space فعال کند. از a برای مقصد و button برای عمل استفاده کن؛ div قابل‌کلیک این رفتارها را خودکار ندارد.

ترتیب منطقی عناصر در HTML معمولاً بهترین ترتیب فوکوس است. با tabindex مثبت مثل 1 و 2 ترتیب ساختگی نساز. tabindex="0" عنصر را وارد ترتیب طبیعی می‌کند؛ tabindex="-1" آن را از پیمایش Tab خارج می‌کند اما فوکوس برنامه‌ای را ممکن می‌سازد. بدون نیاز، عناصر معمولی متن را فوکوس‌پذیر نکن.

<a href="#main-content">رفتن به محتوای اصلی</a>
<nav aria-label="منوی اصلی">
  <a href="index.html">خانه</a>
  <a href="register.html">ثبت‌نام</a>
</nav>
<main id="main-content" tabindex="-1">
  <h1>کارگاه HTML</h1>
  <p>محتوای اصلی صفحه.</p>
</main>

این لینک پرش کمک می‌کند منوی تکراری دور زده شود. نشانهٔ فوکوس را با CSS حذف نکن. متن لینک، تیترها، labelها و خطاهای فرم باید روشن باشند. معنا را فقط با رنگ یا جایگاه بیان نکن؛ مثلاً «ورودی ایمیل الزامی است» بهتر از «کادر قرمز را پر کن» است.

آزمایش دستی: دستت را از ماوس بردار و کل صفحه را طی کن. آیا همیشه می‌دانی فوکوس کجاست و کنترل چه کاری انجام می‌دهد؟