تشکیل می دهد

فرم عنصری است که به کاربر اجازه می دهد داده ها را در یک فیلد یا گروهی از فیلدها ارائه دهد. فرم ها می توانند به سادگی یک فیلد واحد یا به پیچیدگی یک عنصر فرم چند مرحله ای با چندین فیلد در هر صفحه، اعتبارسنجی ورودی و گاهی اوقات یک CAPTCHA باشند.

فرم‌ها یکی از سخت‌ترین عناصر برای درست شدن از منظر دسترس‌پذیری در نظر گرفته می‌شوند، زیرا به دانش تمام عناصری که قبلاً پوشش داده‌ایم و همچنین قوانین اضافی مختص فرم‌ها نیاز دارند. با کمی درک و زمان، می توانید یک فرم در دسترس برای شما و کاربرانتان ایجاد کنید.

Forms آخرین ماژول کامپوننت خاص در این دوره است. این ماژول بر روی دستورالعمل‌های خاص فرم تمرکز می‌کند، اما تمام دستورالعمل‌های دیگری که در ماژول‌های قبلی درباره آن‌ها آموخته‌اید، مانند ساختار محتوا ، فوکوس صفحه‌کلید و تضاد رنگ ، برای عناصر فرم نیز اعمال می‌شود.

زمینه های

ستون فقرات فرم ها فیلدها هستند. فیلدها الگوهای تعاملی کوچکی هستند، مانند یک عنصر ورودی یا دکمه رادیویی، که به کاربران اجازه می دهد محتوا را وارد کنند یا انتخاب کنند. انواع مختلفی از فیلدهای فرم برای انتخاب وجود دارد.

توصیه پیش‌فرض این است که به جای ساختن چیزی سفارشی با ARIA از الگوهای تثبیت‌شده HTML استفاده کنید، زیرا ویژگی‌ها و ویژگی‌های خاصی - مانند حالت‌های فیلد، ویژگی‌ها و مقادیر - ذاتاً در عناصر HTML ساخته شده‌اند، در حالی که باید ARIA سفارشی را به صورت دستی اضافه کنید.

آریا

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

HTML

<form id="sundae-order-form">
  <!-- form content -->
</form>

علاوه بر انتخاب در دسترس ترین الگوهای فیلد فرم، در صورت امکان، باید ویژگی های تکمیل خودکار HTML را نیز به فیلدهای خود اضافه کنید. افزودن ویژگی‌های تکمیل خودکار به عوامل کاربر و فناوری‌های کمکی (AT) امکان تعریف دقیق‌تر یا شناسایی هدف را می‌دهد.

ویژگی‌های تکمیل خودکار به کاربران اجازه می‌دهد تا ارائه‌های بصری را شخصی‌سازی کنند، مانند نمایش نماد کیک تولد در یک فیلد که ویژگی تکمیل خودکار تولد ( bday ) به آن اختصاص داده شده است. به طور کلی، ویژگی های تکمیل خودکار، پر کردن فرم ها را آسان تر و سریع تر می کند. این به ویژه برای افراد مبتلا به اختلالات شناختی و خواندن و کسانی که از ATها مانند صفحه‌خوان‌ها استفاده می‌کنند مفید است.

<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هایی که قصد پشتیبانی از آنها را دارید آزمایش کنید.

خطاها

هنگام ایجاد فرم‌های قابل دسترس، کارهای زیادی می‌توانید انجام دهید تا از خطاهای فرم توسط کاربران جلوگیری کنید. قبلاً در این ماژول، ما به وضوح فیلدهای علامت‌گذاری، ایجاد برچسب‌های شناسایی و افزودن توضیحات مفصل در صورت امکان را پوشش دادیم. اما مهم نیست که چقدر فرم شما واضح است، در نهایت کاربر اشتباه می کند.

هنگامی که کاربر با یک خطای فرم مواجه می شود، اولین قدم این است که خطا را مشخص کند . فیلدی که در آن خطا رخ داده باید به وضوح مشخص شود و خود خطا باید به صورت متنی برای کاربر توضیح داده شود.

روش‌های مختلفی برای نمایش پیام‌های خطا وجود دارد، مانند:

یک مودال بازشو، درون خطی نزدیک به جایی که خطا رخ داده است
مجموعه ای از خطاها که در یک پیام بزرگتر در بالای صفحه گروه بندی شده اند

هنگام اعلام خطا حتما به فوکوس صفحه کلید و گزینه های ARIA live region دقت کنید.

در صورت امکان، به کاربر پیشنهاد دقیقی در مورد نحوه رفع خطا ارائه دهید. دو ویژگی برای آگاه کردن کاربران از خطاها وجود دارد.

می توانید از ویژگی HTML مورد نیاز استفاده کنید. مرورگر یک پیام خطای عمومی را بر اساس پارامترهای اعتبار سنجی فایل ارائه می دهد.
یا می توانید از ویژگی aria-required برای به اشتراک گذاشتن یک پیام خطای سفارشی شده با AT ها استفاده کنید. فقط ATها پیام را دریافت خواهند کرد مگر اینکه کد اضافی اضافه کنید تا پیام برای همه کاربران قابل مشاهده باشد.

هنگامی که کاربر فکر می کند همه خطاها برطرف شده اند، به او اجازه دهید فرم را دوباره ارسال کند و درباره نتایج ارسال خود بازخورد ارائه دهد. یک پیام خطا به کاربر می‌گوید که به‌روزرسانی‌های بیشتری برای انجام دادن دارند، در حالی که یک پیام موفقیت تأیید می‌کند که آنها همه خطاها را برطرف کرده‌اند و فرم را با موفقیت ارسال کرده‌اند.

درک خود را بررسی کنید

دانش خود را از فرم های در دسترس تست کنید

کدام یک از پاسخ های زیر در دسترس ترین ورودی فرم است؟

Email address: <input type="email" required>

هیچ برچسبی وجود ندارد که «آدرس ایمیل» را با ورودی مرتبط کند.

<label>Email address: <input type="email" required></label>

این ویژگی ویژگی تکمیل خودکار را ندارد، که تعریف یا شناسایی هدف را به عوامل کاربر و فناوری‌های کمکی (AT) ارائه می‌کند.

<label>Email address: <input type="email" required autocomplete="email"></label>

این یک برچسب فیلد قابل دسترسی است، اما در این لیست قابل دسترسی ترین نیست.

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

ویژگی aria-describedby زمینه اضافی را به خطایی اضافه می کند که کاربر ممکن است در صورت عدم پر کردن فیلد به درستی دریافت کند. در حالی که این ویژگی مورد نیاز نیست، ممکن است برای کاربران AT مفید باشد.