فرم عنصری است که به کاربر اجازه میدهد دادهها را در یک فیلد یا گروهی از فیلدها وارد کند. فرمها میتوانند به سادگی یک فیلد واحد یا به پیچیدگی یک عنصر فرم چند مرحلهای با چندین فیلد در هر صفحه، اعتبارسنجی ورودی و گاهی اوقات یک CAPTCHA باشند.
فرمها از دیدگاه دسترسیپذیری، یکی از دشوارترین عناصر برای ایجاد دسترسی صحیح در نظر گرفته میشوند، زیرا نیاز به دانش در مورد تمام عناصری که قبلاً پوشش دادهایم و همچنین قوانین اضافی مخصوص فرمها دارند. با کمی درک و صرف زمان، میتوانید یک فرم قابل دسترس برای خود و کاربرانتان ایجاد کنید.
فرمها آخرین ماژول مختص کامپوننت در این دوره است. این ماژول بر دستورالعملهای مختص فرم تمرکز خواهد کرد، اما تمام دستورالعملهای دیگری که در ماژولهای قبلی آموختهاید، مانند ساختار محتوا ، فوکوس صفحهکلید و کنتراست رنگ ، برای عناصر فرم نیز اعمال میشوند.
فیلدها
ستون فقرات فرمها، فیلدها هستند. فیلدها الگوهای تعاملی کوچکی مانند یک عنصر ورودی یا دکمه رادیویی هستند که به کاربران امکان میدهند محتوا را وارد کنند یا انتخابی انجام دهند. طیف گستردهای از فیلدهای فرم برای انتخاب وجود دارد.
توصیه پیشفرض این است که به جای ساختن چیزی سفارشی با ARIA، از الگوهای HTML از پیش تعیینشده استفاده کنید، زیرا برخی ویژگیها و توابع - مانند حالتهای فیلد، ویژگیها و مقادیر - ذاتاً در عناصر HTML تعبیه شدهاند. فیلدهای سفارشی نیاز دارند که ARIA را به صورت دستی اضافه کنید.
توصیه نمیشود — HTML سفارشی با ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
توصیه شده - HTML استاندارد
<form id="sundae-order-form">
<!-- form content -->
</form>
علاوه بر انتخاب الگوهای فیلد فرم که در صورت لزوم در دسترسترین باشند، باید ویژگیهای تکمیل خودکار HTML را نیز به فیلدهای خود اضافه کنید. افزودن ویژگیهای تکمیل خودکار، تعریف یا شناسایی دقیقتری از هدف را برای کاربران و فناوریهای کمکی (AT) فراهم میکند.
ویژگیهای تکمیل خودکار به کاربران اجازه میدهد تا ارائههای بصری را شخصیسازی کنند، مانند نمایش آیکون کیک تولد در فیلدی که ویژگی تکمیل خودکار تولد ( bday ) به آن اختصاص داده شده است. به طور کلی، ویژگیهای تکمیل خودکار، پر کردن فرمها را آسانتر و سریعتر میکنند. این امر به ویژه برای افرادی که دارای اختلالات شناختی و خواندن هستند و کسانی که از ابزارهای کمکی مانند صفحهخوانها استفاده میکنند، مفید است.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
در نهایت، فیلدهای فرم نباید هنگام دریافت فوکوس یا ورودی کاربر، تغییرات متنی ایجاد کنند، مگر اینکه قبل از استفاده از کامپوننت، به کاربر در مورد این رفتار هشدار داده شده باشد. به عنوان مثال، وقتی یک فیلد فوکوس دریافت میکند یا زمانی که کاربر محتوایی به فیلد اضافه میکند، فرم نباید به طور خودکار ارسال شود.
برچسبها
برچسبها در صورت نیاز به فیلد، کاربر را در مورد هدف آن فیلد مطلع میکنند و همچنین میتوانند اطلاعاتی در مورد الزامات فیلد، مانند قالب ورودی، ارائه دهند. برچسبها باید همیشه قابل مشاهده باشند و فیلد فرم را به طور دقیق برای کاربران توصیف کنند.
یکی از اصول اساسی فرمهای قابل دسترس، ایجاد ارتباط واضح و دقیق بین یک فیلد و برچسب آن است. این موضوع هم از نظر بصری و هم از نظر برنامهنویسی صادق است. بدون این زمینه، کاربر ممکن است نحوه پر کردن فیلدهای فرم را نفهمد.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
علاوه بر این، فیلدهای فرم مرتبط، مانند آدرس پستی، باید به صورت برنامهنویسی و بصری گروهبندی شوند. یک روش، استفاده از الگوی مجموعه فیلد و راهنما برای گروهبندی عناصر مشابه است.
توضیحات
توضیحات فیلدها از این نظر شبیه برچسبها هستند که برای ارائه زمینه بیشتر به فیلد و الزامات استفاده میشوند. اگر برچسبها یا دستورالعملهای فرم به اندازه کافی توصیفی باشند، توضیحات فیلد برای دسترسیپذیری لازم نیست.
با این حال، موقعیتهایی وجود دارد که اضافه کردن اطلاعات اضافی برای جلوگیری از خطاهای فرم مفید است، مانند ارائه اطلاعات در مورد حداقل طول ورودی برای فیلد رمز عبور یا گفتن به کاربر که از کدام قالب تقویم استفاده کند (مانند MM-DD-YYYY).
روشهای مختلفی وجود دارد که میتوانید برای اضافه کردن توضیحات فیلد به فرمهای خود استفاده کنید. یکی از بهترین روشها، اضافه کردن ویژگی aria-describedby به عنصر فرم، علاوه بر عنصر <label> است. صفحهخوان هم توضیحات و هم برچسب را میخواند.
اگر ویژگی aria-labelledby را به عنصر خود اضافه کنید، مقدار ویژگی، متن درون <label> شما را لغو میکند. مثل همیشه، حتماً کد نهایی را با تمام ATهایی که قصد پشتیبانی از آنها را دارید، آزمایش کنید.
خطاها
هنگام ایجاد فرمهای قابل دسترس، کارهای زیادی میتوانید انجام دهید تا از بروز خطاهای فرم توسط کاربران جلوگیری کنید. پیش از این در این ماژول، به مواردی مانند علامتگذاری واضح فیلدها، ایجاد برچسبهای شناسایی و افزودن توضیحات دقیق در صورت امکان پرداختیم. اما مهم نیست که فکر میکنید فرم شما چقدر واضح است، در نهایت، کاربر اشتباه خواهد کرد.
وقتی کاربری با خطایی در فرم مواجه میشود، اولین قدم این است که خطا را به او اطلاع دهید . فیلدی که خطا در آن رخ داده است باید به وضوح مشخص شود و خود خطا نیز باید به صورت متنی برای کاربر توضیح داده شود.
روشهای مختلفی برای نمایش پیامهای خطا وجود دارد، مانند:
- یک ماژول، درونخطی نزدیک به محل وقوع خطا
- مجموعهای از خطاها که در یک پیام بزرگتر در بالای صفحه گروهبندی شدهاند
هنگام اعلام خطاها حتماً به گزینههای keyboard focus و ARIA live region توجه کنید.
هر زمان که امکان داشت، به کاربر پیشنهاد دقیقی در مورد نحوه رفع خطا ارائه دهید. دو ویژگی برای اطلاعرسانی به کاربران در مورد خطاها وجود دارد.
- میتوانید از ویژگی required در HTML استفاده کنید. مرورگر بر اساس پارامترهای اعتبارسنجی وارد شده، یک پیام خطای عمومی نمایش میدهد.
- یا میتوانید از ویژگی aria-required برای به اشتراک گذاشتن یک پیام خطای سفارشی با ATها استفاده کنید. فقط ATها این پیام را دریافت میکنند، مگر اینکه کد اضافی اضافه کنید تا پیام برای همه کاربران قابل مشاهده باشد.
وقتی کاربر فکر کرد که همه خطاها برطرف شدهاند، به او اجازه دهید فرم را دوباره ارسال کند و در مورد نتایج ارسال خود بازخورد ارائه دهد. یک پیام خطا به کاربر میگوید که باید بهروزرسانیهای بیشتری انجام دهد، در حالی که یک پیام موفقیتآمیز تأیید میکند که همه خطاها را برطرف کرده و فرم را با موفقیت ارسال کرده است.
معیارهای موفقیت اضافی
WCAG 2.2 معیارهای موفقیت زیر را معرفی کرد که بر تجربیات فرمهای قابل دسترستر تمرکز دارند: