برچسب فرم در RTL؛ جایی که بیشتر اشتباه می‌کنیم
ارتباط برچسب، فیلد و پیام خطا در رابط فارسی اغلب از ظاهر جلوتر است. این یادداشت از HTML شروع می‌کند.
دسترس‌پذیری
در بسیاری از فرم‌های فارسی، فاصله و تراز درست به‌نظر می‌رسد، اما صفحه‌خوان‌ها ترتیب اشتباهی را اعلام می‌کنند. ریشه معمولاً در نبود ارتباط معنایی است، نه در CSS.
اول برچسب را به فیلد وصل کنید
هر ورودی باید id داشته باشد و برچسب با htmlFor به همان شناسه اشاره کند. اگر فقط ظاهر را با فاصله تنظیم کنید، کاربر صفحه‌خوان ارتباط را از دست می‌دهد.
- برچسب کوتاه و مشخص بنویسید؛ از تکرار placeholder خودداری کنید.
- پیام خطا را با `aria-describedby` به همان فیلد وصل کنید.
- بعد از ارسال ناموفق، فوکوس را به اولین فیلد نامعتبر ببرید.
یک الگوی ساده
<Field data-invalid={Boolean(error)}>
<FieldLabel htmlFor="mobile">شماره موبایل</FieldLabel>
<Input id="mobile" inputMode="tel" aria-invalid={Boolean(error)} />
{error ? <FieldError>{error}</FieldError> : null}
</Field>اگر فقط یک چیز را درست کنید، اتصال برچسب و فیلد بیشترین بازگشت را دارد.
در موبایل، تست واقعی با صفحه‌خوان یا حداقل با کیبورد، سریع‌تر از حدس زدن از روی ظاهر نتیجه می‌دهد.