قابلیت دسترسی‌پذیری : ورودی‌ها و برچسب‌ها - قسمت اول

به نظر می رسد بسیاری از توسعه دهندهای فرانت اند درباره قابلیت دسترسی‌پذیری چیزی نمی دانند یا شاید هم به آن اهمیتی نمی‌دهند. بله درست است، پیاده سازی این مسئله در سازمانی که واقعا روی دسترسی‌پذیری تمرکزی ندارند کار بسیار سختی است. اما این مسئله یکی از وظایف و کارهایی است که باید توسعه دهنده یا طراح همیشه در طراحی‌هایش در نظر داشته باشد. 

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

حتی با وجود اینکه ممکن است سال‌های زیاد فرم های ورودی مختلفی ساخته باشید اما با این واقعیت ممکن است روبرو شوید که هیچکدام آنها قابلیت دسترسی‌پذیری نداشته اند. خوشبختانه، شما امروز می توانید این قاعده را به نفع خودتان تغییر دهید.

برای ساختن فرم های ورودی مناسب شما باید از برچسب ها آگاه باشید. قرار دادن برچسب هایی که منحصرا برای یک فرم ورودی در نظر گرفته شده است یکی از راه های بسیار مناسب برای ساختن فرم ها با قابلیت دسترسی‌پذیری بالا است. در نظر داشته باشید که برچسب ها از طریق یک آی‌دی به فرم مربوطه متصل می شوند. Screen Readerها هیچوقت برچسب هایی که همزمان به یک فرم متصل شده اند را پشتیبانی نمی کنند. 

خب ممکن است که در حالت عادی شما همیشه فرم ها را به صورت زیر مشاهده کنید:

<label>Name:</label>

<input type=”text” name=”textfield”>

مطمئنا فکر می کنید که این فرم برای مناسب است و درست کار می کند اما این صرفا برای افرادی درست است که از هیچ ابزار کمکی در مشاهده وبسایت استفاده نمی کنند. در هر حال چنین فرمی نباید در طراحی‌تان وجود داشته باشد. با انجام یک کار بسیار ساده ما از فرم ها و برچسب ها به درستی می توانیم استفاده کنیم. به مثال زیر توجه کنید:

<label for=”name”>Name:</label>

<input id=”name” type=”text” name=”textfield”>

تنها با اضافه کردن for=”name” به برچسب مورد نظر و قرار دادن آی‌دی مربوط به ورودی این مشکل را توانستید حل کنید. حال این ورودی ها قابلیت دسترسی‌پذیری بالایی دارند و همراه با آن ویژگی های دیگر نیز درست می کنند. حال اگر کاربر روی برچسب نوشته شده کلیک کند به صورت خودکار روی ورودی نیز کلیک کرده و می تواند در ورودی کلمات مورد نظر خود را بنویسد. این مسئله برای افرادی که از ناتوانی ها و معلولیت هایی رنج می برند بسیار مفید است به خصوص زمانی که بخواهند روی یک چک باکس یا رادیو باکس کلیک کنند. خوبی این موضوع اینجاست که آنها می توانند برای بقیه المنت های دیگر صفحه نیز از این موارد استفاده کنند. به مثال زیر نگاهی بیاندازید:

<fieldset>

<legend>Select your pizza toppings:</legend>

<input id=”ham” type=”checkbox” name=”toppings” value=”ham”>

<label for=”ham”>Ham</label><br>

<input id=”pepperoni” type=”checkbox” name=”toppings” value=”pepperoni”>

<label for=”pepperoni”>Pepperoni</label><br>

<input id=”mushrooms” type=”checkbox” name=”toppings” value=”mushrooms”>

<label for=”mushrooms”>Mushrooms</label><br>

<input id=”olives” type=”checkbox” name=”toppings” value=”olives”>

<label for=”olives”>Olives</label>

</fieldset>

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

منبع