نحوه اتصال ARIA برای خطاهای فرم
اکثر فرمها برای کاربران بینا به خوبی کار میکنند، اما برای افرادی که از فناوریهای کمکی استفاده میکنند، با مشکل مواجه میشوند. یک کاربر بینا حاشیه قرمز و پیام خطا را میبیند، اما کاربر صفحهخوان (screen reader) اغلب چیزی نمیشنود.
شما میتوانید این مشکل را با استفاده از دو ویژگی (attribute) ARIA و یک ناحیه زنده (live region) کوچک برطرف کنید. این تغییر کمتر از ۵۰ خط کد نیاز دارد.
در اینجا نحوه اتصال خطاها به ورودیها (inputs) آورده شده است.
۱. استفاده از aria-describedby
ورودی باید به عنصر خطا اشاره کند. ویژگی aria-describedby را به ورودی خود اضافه کنید و مقدار آن را برابر با ID عنصر div مربوط به خطا قرار دهید.
مثال:
- ID ورودی:
email-input - ID خطا:
email-error - کد:
aria-describedby="email-error"
این کار به صفحهخوان میگوید که وقتی کاربر روی ورودی تمرکز (focus) میکند، پیام خطا را بخواند. اگر متن راهنما (help text) نیز دارید، میتوانید چندین ID را اضافه کنید.
۲. استفاده از aria-invalid
این ویژگی به کاربر میگوید که ورودی اشتباه است. زمانی که خطا ظاهر میشود، aria-invalid را روی true تنظیم کنید و زمانی که خطا برطرف شد، آن را روی false قرار دهید.
یک اشتباه رایج این است که یک div نگهدارنده (wrapper) را قرمز کنید، اما aria-invalid را فقط روی ورودی قرار دهید. این کار باعث عدم تطابق میشود. اطمینان حاصل کنید که استایلهای بصری و ویژگیهای ARIA شما هر دو یک عنصر واحد را هدف قرار میدهند.
۳. افزودن یک ناحیه زنده (live region)
اگر در حالی که کاربر هنوز در حال تایپ است خطایی ظاهر شود، ممکن است متوجه آن نشود. از aria-live="polite" روی div خطای خود استفاده کنید.
aria-live="polite"به صفحهخوان میگوید که خطا را در یک توقف طبیعی اعلام کند.- از
"assertive"استفاده نکنید مگر اینکه وضعیت اضطراری باشد. خطاهای فرم وضعیت اضطراری نیستند.
۴. مدیریت اعتبارسنجی ناهمگام (async validation)
اگر نام کاربری یا آدرس را در پسزمینه بررسی میکنید، کاربران باید بدانند که سیستم در حال کار است.
- الگوی A: در حالی که بررسی در حال انجام است، از
aria-busy="true"روی ورودی استفاده کنید. - الگوی B: از یک ناحیه زنده مخفی برای اعلام بهروزرسانیهای وضعیت مانند
"Verifying username..."استفاده کنید.
الگوی B در صفحهخوانهای مختلف قابل اعتمادتر است.
تست کردن الزامی است. ابزارهای خودکار مفید هستند اما نمیتوانند جایگزین تست دستی شوند. از NVDA در ویندوز یا VoiceOver در macOS استفاده کنید.
چکلیست تست شما:
- با کلید Tab وارد فیلد شوید. برچسب (label) باید اعلام شود.
- یک مقدار نامعتبر وارد کنید. خطا باید اعلام شود.
- دوباره با Tab به فیلد برگردید. برچسب باید همراه با خطا اعلام شود.
- خطا را اصلاح کنید. پیام خطا باید برطرف شود.