قابلیت دسترسی‌پذیری دکمه‌ها

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

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

دکمه‌ها

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

یکی از قواعدی که هنگام ساختن دکمه‌ها باید به آن توجه کرد این است که آنها باید از طریق کلید tab قابل دسترس باشند. اینکار تنها با اضافه کردن خاصیت tabindex=”0” به سادگی انجام می شود. جدای از آن می توانید با استفاده از خاصیت role برای هرکدام از دکمه ها نقش و قاعده تعیین کنید.

به صورت عمومی سه نوع دکمه وجود دارند که توسط WAI-ARIA پشتیبانی می‌ شوند:

• دکمه های معمولی
• دکمه های انتخابی
• دکمه های منو

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

دکمه های انتخابی یا toggle دکمه هایی هستند که به صورت کلی دارای دو حالت روشن و خاموش هستند. برای اینکه این دکمه ها توسط ابزارهای کمکی به خوبی مورد استفاده قرار بگیرند و قابلیت تعامل با آنها را داشته باشد شما باید از خاصیت  aria-pressed استفاده کنید. موضوع بسیار مهمی که باید در نظر بگیرید این است که با کلیک کردن روی برچسب یکی از این دکمه ها مقدار آن تغییری نمی کند. درحالت هایی خاصیت aria-pressed لزومی ندارد که استفاده شود. این حالت زمانی است که برچسب معیار تغییر حالت های دکمه های انتخابی باشد.

دکمه‌های منویی به دکمه هایی گفته می شود که با کلیک روی آنها منویی ظاهر می شود به حالت پیشفرض این منوها وقتی صفحه لود می شود مخفی هستند. شما می توانید با قرار دادن خاصیت aria-haspopup به ابزارهای کمکی بفهمانید که این دکمه یک دکمه منویی است. این خاصیت می تواند نوع و موجودیت المنت های پاپ‌اپ تعاملی را نشان دهند، به عنوان مثال می توان به منو‌ها و یا دیالوگ باکس ها اشاره کرد که می توانند از طریق یک المنت دیگر قابل دسترس باشند.

آگاه باشید که بسیاری از تکنولوژی های کمکی از کیبورد برای تعامل برقرار کردن با یک دکمه استفاده می کنند. المنت محلی <button> به صورت پیشفرض از انتخاب کردن یک المنت توسط دکمه enter یا space پشتیبانی می کنند اما اگر شما از حالت محلی آن استفاده نمی کنید لازم است که دسترسی‌پذیری آن را با دکمه های ذکر شده امتحان کنید.

<!-- Accesible button as a div -->
<div tabindex="0"
   role="button"
   id="action">
  Buy stuff
</div>

<!-- Accesible toggle button as an <a>-element -->
<a tabindex="0"
 role="button"
 id="toggle"
 aria-pressed="false">

      Mute 

  <svg aria-hidden="true">
    <use xlink:href="images/mute.svg#icon-sound">
  </svg>
</a>
  
<!-- Native and accesible button -->
<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
  Call to action
</button>

در پایان: همیشه بعد از قرار دادن دکمه ها در یک صفحه وب مطمئن شوید که آن توسط دکمه های enter یا space قابلیت انتخاب دارند و می شود از طریق دکمه tab بین آنها پیشمایش انجام داد. 

منبع