فرم‌های دسترس‌پذیر: فهرست بازبینی

فرم تماس ساده‌ترین بخش سایت به نظر می‌رسد و بیشترین اشکال دسترس‌پذیری را دارد. این نوشته فهرست چیزهایی است که در بازبینی‌ها بیش از همه دیده‌ایم.

برچسب، نه متن راهنما

متن راهنمای داخل کادر با شروع تایپ ناپدید می‌شود و صفحه‌خوان آن را برچسب نمی‌داند. برچسب بیرونی بگذارید.

<label for="phone">شماره‌ی تماس</label>
<input id="phone" name="phone" type="tel"
       inputmode="numeric" autocomplete="tel"
       aria-describedby="phone-hint" required />
<p id="phone-hint">با کد شهر یا به‌صورت موبایل، بدون فاصله.</p>

خطا را کنار میدان بگویید

• پیام خطا را به میدان با aria-describedby ببندید.

• تنها با رنگ خطا را نشان ندهید.

• فوکوس را به نخستین میدان خطادار ببرید.

• پیام را مشخص بنویسید: «شماره باید یازده رقم باشد»، نه «ورودی نامعتبر».

• برچسب بیرونی برای همه‌ی میدان‌ها

• پیام خطای متنی و مرتبط

• ترتیب فوکوس منطقی

• آزمون با صفحه‌خوان

برای ساختار کلی فرم‌ها خدمات طراحی سایت را ببینید.