دسترس‌پذیری؛ چرا و چگونه؟

مقدمه

دسترس‌پذیری یا Accessibility، میزان و درجه آسان بودنِ دسترسی و یکی از قسمت‌های تجربه‌ی کاربری است و محدود به فضای وب نیست. اما متاسفانه در محیط‌های آنلاین، دسترس‌پذیری از توجه قابل‌ملاحظه‌ای برخوردار نیست.
دسترس‌پذیری شامل المان‌های متعددی است و ساعت‌ها میشود راجع به آن صحبت کرد و کتاب خواند. این مقاله تلاش میکند توسعه‌دهندگان را ترغیب به در نظر گرفتن اهمیت فوق‌العاده‌ی این مورد مهم کند.

اهمیت استفاده صحیح از HTML

اسکرین‌ریدرها استایل‌دهی و کدهای پویاساز جاوااسکرپیت را متوجه نمیشوند. بنابراین شناخت و استفاده‌ی صحیح از HTML نظیر موارد ذیل، در بهبود دسترس‌پذیری کمک کننده هستند:

• استفاده از تگ‌های معنایی HTML5 (مانند nav / section / article )
• قرار دادن ویژگی alt جهت تصاویر
• تعیین زبان صفحه با ویژگی lang در تگ html
• استفاده از ویژگی title جهت توضیحات بیشتر یک المان

با رعایت نکات فوق (بیشتر بخوانید) که هم به انسجام بیشتر توسعه کمک میکند و هم راهنمایی خوبی برای اسکرین‌ریدرها خواهد بود و مهمتر از همه گامی بلند در افزایش دسترس‌پذیری است، نائل خواهیم شد.

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

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

در ری‌اکت و اصولا SPAها بدلیل اینکه اسکرین‌ریدرها قادر به پیگیری تغییرات صفحه نیستند میتونیم از Refها استفاده کنیم که دسترسی مستقیم به DOM دارد و پس از ری‌اکشن و رندر و ظاهر شدن در صفحه آنرا انتخاب و فوکس کنیم. همچنین از پراپرتی tabIndex هم استفاده میکنیم که مطمئن بشیم با tab دسترس پذیر میشه.

<p ref={message} tabIndex="0">Successfully Submitted</p>

مثال فوق رندر شرطی پس از کلیک روی دکمه‌ی ارسال را نمایش میدهد.

استفاده از تکنیک پرش ناوبری

فرض کنید کاربری با محدودیت‌های دسترسی روبروست و فقط با کیبورد میتواند در یک صفحه‌ی چند قسمته حرکت کند. در چنین حالتی باید امکان مخفی قرار دهیم که کاربر بتواند بجای پیمایش کلیه تب‌ها به سکشن‌های مهم دسترسی داشته باشد. بنابراین از سودوکلاس(pseudo-class) focus در CSS استفاده میکنیم و به شیوه‌ای از نمایش آنرا مخفی میکنیم و آنگاه که کاربر در حال پیمایش ناوبری است با تب کیبورد به آن میرسد، آنرا نمایش میدهیم و طبیعتا با کلید Enter به قسمت مدنظر کاربر را هدایت میکنیم.

position: absolute;

transform: translateY(-200%);

transition: transform 0.3s;

&:focus {

  transform: translateY(0%);

}

استفاده از رویدادهای صحیح

در استفاده از رویدادها هم باید دقت بیشتری به‌خرج داد و مثلا برای باز و بسته شدن یک منوی بازشونده از رویدادهایی نظیر (خارج شدن از المان) و (آمدن روی المان) استفاده کنیم.

تست میزان دسترس‌پذیری

دم‌دست‌ترین ابزار موجود Lighthouse است که در قسمت DevTools مرورگر کروم قابل دسترس است. در واقع این ابزار غیر از گزارشاتی که جهت دسترس‌پذیری ایجاد میکنند، گزارشاتی در خصوص SEO و PWA و ... هم ارائه میدهد. این ابزار معیار و محک خوبی است که یک وب اپلیکیشن چقدر به میزان دسترس‌پذیری کاربرانش اهمیت میدهد.

مطالعه بیشتر

جهت مطالعات بیشتر در این حوزه و کسب آخرین دستاوردها و گزارشات به وبسایت Webaim.org مراجعه نمایید.

نتیجه‌گیری

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