حتما دیدید توی بعضی پیاده رو ها توی خیابون یه سری رمپ وجود داره، یا روی دکمه های آسانسور برجستگی هایی هست، شبیه خط بریل. خب میتونید حدس بزنید که هدفشون چیه.
وقتی یه محصول طراحی میشه باید فکر همه جاشو کرد. محصول باید برای همه قابل استفاده باشه. حتی افرادی با ناتوانی های فیزیکی مثل کور رنگی، کم بینایی، نابینایی، ناشنوایی و معلولیت های حرکتی.
متاسفانه این موضوع داخل کشور ما به اندازه کشور های دیگه پر اهمیت نیست و میبینیم که خیلی از محصولات و معابر برای افراد ناتوان مناسب سازی نشده. یادمه یه بار توی مترو میرداماد ۱ یا ۲ لاین آسانسور مخصوص افراد با صندلی چرخدار وجود داشت ولی همه مردم بعد از پیاده شدن از قطار هجوم میاوردن که سوار آسانسور بشن. از این بحث که بگذریم، ولی به عنوان یه برنامه نویس وب باید بدونیم که بهتره سعی کنیم وبسایت مون رو برای افرادی با این ناتوانی ها مناسب سازی کنیم.
در کل این موضوع رو بهش میگیم Accessibility و بسیار موضوع پر اهمیتی هست. اینقدر پر اهمیت که اگر شما مالک یک محصول در کشوری مثل کانادا باشید ولی بحث Accessibility رو رعایت نکنید ملزم به پرداخت جریمه های سنگین هستید! مقایسه کنید که با اینجا که اصلا توجیه نیستن دوستان...
خب یه مروری بکنم، پس کلا مناسب سازی محصول (چه فیزیکی و چه دیجیتالی) برای افرادی با ناتوانی هایی که اسم بردم رو بهش میگیم Accessibility یا دسترسی پذیری. حالا تو این مطلب میخوام توضیح بدم که چطوری میشه اندازش گرفت، چطوری میشه بهترش کرد و به چه چیزایی اصلا باید توجه کرد.
برای اینکه یه سنس بهتری نسبت به بحث Accessibility داشته باشیم، چند تا نمونه از وب و دنیای واقعی براتون میارم:
حتی شاید میشه میزان پیچ درب بطری های آب معدنی، زاویه قرار گرفتن دستگیره لیوان و رنگ آمیزی تابلو های اعلان و ... هم توی اینا گذاشت ولی چون این موضوعات که اشاره کردم بیشتر شاید بتونیم بگیم تجربه کاربری بیشتر توشون دخیل هست تا دسترسی پذیری، توی این دسته بندی قرار شون نمیدم.
پس اگه دور و برمون رو نگاه کنیم میتونیم ببینیم که موضوع بسیار پر اهمیتی هست. ولی بحث ما بیشتر راجع به وب و فرانت اند هست و میخوایم ببینیم توی این Context این ماجرای Accessibility چطور اتفاق میوفته و چه استاندارد هایی داره.
توی دنیای وب استاندارد هایی برای دسترسی پذیری بوجود اومده و در واقع اشاره دارن به Guideline هایی برای رعایت یک سری نکات. عبارت انگلیسیش میشه Web Content Accessibility Guidelines که به اختصار میشه WCAG که گرید های مختلفی هم داره.
هدف ما به عنوان برنامه نویس های فرانت اند سادست: دنبال کردن این Guideline ها. جایی کار ما سخت میشه که اونا رو باید پیاده کنیم در عین اینکه به تجربه کاربری لطمه وارد نشه، همچنین به طرح اصلی وفادار باشه، مشکلی برای SEO پیش نیاد و در کل هر کاربری بتونه به راحت ترین شکل ممکن با اپلیکیشن ما کار کنه.
گرید های مختلف WCAG اینا هستن: A و AA و AAA که یه طورایی میزان سختگیری شون رو تغییر میده، از A که میشه ساده ترین و تا AAA (تریپل A) که سختگیرانه ترین حالت هست. اگر اپلیکیشن شما امتیاز خوبی از Guideline های WCAG AAA دریافت کنه یعنی سرویس شما دسترسی پذیری بسیار بالایی داره و این اتفاق خیلی خوبیه.
به طور کلی میتونیم موضوع Accessibility یا دسترسی پذیری رو به ۴ اصل مهم خرد کنیم، در مجموع با رعایت نکات این ۴ اصل میتونیم با اطمینان بیشتری بگیم که سرویس ما دسترس پذیری خوب داره:
در ادامه با تک تک این مفاهیم به صورت جزیی آشنا میشیم که پایه های اصلی تمام اصول و تکنیک های دسترسی پذیری هستند.
محسوس و مشهود بودن (Perceivable)
گذاشتن توضیحات برای تصاویر (چه از طریق alt و چه از طریق تگ های مربوط به تصویر مثل figure و figcaption). از این طریق مرورگر یا Screen reader میتونه محتوای تصویر رو طبق توضیحاتی که شما براش قرار دادید بخونه به جای اینکه اسم فایل که قطعا چیز بی معنی ای هست رو بخواد بخونه. علاوه بر اون به SEO سایت شما هم کمک میکنه.
قرار دادن زیرنویس برای ویدئو ها. (بیشتر مربوط به کانتنت میشه) این مورد هم کمک میکنه افراد ناشنوا راحت از محتوا استفاده کنن.
توضیحات متنی (یا حتی نسخه متنی) برای محتوا های صوتی. (بیشتر مربوط به کانتنت میشه) خیلی مطالب و مقاله هایی که توی ویرگول یا مدیوم هستند دارای یه نسخه صوتی کنارش هستند.
ارائه محتوا به طوری که از نظر مفهومی مطابق با منظورش باشه، یعنی چی؟ یعنی اینکه مثلا اگر شما روی صفحه میخوای یه دکمه داشته باشی که کاربر روش کلیک کنه از المان button استفاده کنی نه اینکه یه div بذاری و بهش بدی. از این نمونه ها خیلی زیاده. به طور کل میشه گفت همون Semantic HTML رو انجام بدیم.
استفاده از رنگ هایی که کنتراست بالایی دارند. استاندارد های WCAG AA که میزان مینیمم رو عدد ۳ و AAA که مینیمم ۴.۵ هست رو میتونید ببینید. البته ابزار گوگل بهتون برای انتخاب رنگ هم میتونه کمک کنه ولی معمولا این تصمیمات باید تو مرحله دیزاین درنظر گرفته بشه. حتی بعضی وقت ها دیدم که Mode هایی برای افراد کم بینا و کور رنگ هم در نظر میگیرن. مثال زیر رو از دنیای بازی ها میزنم:
از این بخش که بگذریم میرسیم به مورد بعدی:
عمل پذیر بودن (Operable)
این مورد بیشتر به این اشاره داره که اجزای سیستم کار کنن و درست کار کنن. مثال خیلی ساده اش میشه همین که شما روی صفحه که هستید، از طریق کی‌برد دکمه Tab که میزنید یه هایلایت میاره دور اون المان که الان حالت focus داره و با دکمه space شما میتونید عمل کلیک رو انجام بدید. یعنی اگر یک نفر با یک ناتوانی خاص باشه، میتونه به کمک دکمه tab روی المان های مختلف focus کنه، از طریق screen reader براش خونده بشه که روی چه المانی هست، بعد از اطمینان با دکمه space کلیک کنه روش.
برای اینکه این هایلایت صورت بگیره توی CSS ما پراپرتی به نام outline داریم:
میتونیم به کمک همون outline که گفتم استایل این حالت رو عوض کنیم، مثلا dashed border باشه یا هر رنگی دلمون میخواد. ولی احتمالا خیلی اوقات شما کلا این پراپرتی رو none ست کردید! خودتونم دلیلش رو میدونید. (چون به نظر میاد که طرح رو داره زشت میکنه)
این شد استایل دادنش، از اون مهم تر باید توی html به کمک tabindex هم ترتیب اش رو مشخص کنید که با چه ترتیبی بعد از زدن دکمه tab روی اون المان focus بشه و حتی با عدد منفی کاری کنید که اصلا قابل انتخاب شدن با tab نباشه.
مهمه که همه المان ها هم استایل حالت focus داشته باشن علاوه بر اینکه outline داشته باشن.
از طرف دیگه برای المان هایی که حالت کروسل یا اسلایدر دارن، سرعت تغییر کردن توشون به اندازه کافی باشه. اگر قابلیت pause هم داشته باشه که خیلی بهتر. حالا به هر نحو، مثلا کاربر بیاد روی همون اسلاید وایسه، اسلایدر همونجا متوقف بشه. اینطوری به کاربرانی که شاید سرعت خوندنشون پایین تره اجازه میدیم که بتونن راحت تر از محتوا استفاده کنن.
حالا نمیدونم این گیف رو شما با تکرار میبینید یا نه (loop رو داره یا نه) ولی من اینو از سایت ورزش ۳ برداشتم، مشکلی که داره اینه که انقد محتوا فلش فلش میشه و پرش داره که کاربر رو عصبی میکنه. باید از استفاده از این شکل محتوا هم پرهیز بشه تا جای ممکن. اینو مطمئن نیستم ولی شنیدم که حتی این شکل محتوا میتونه یکی از عوامل ایجاد حملات سرع هم بشه.
قابل فهم بودن (Understandable)
هر المانی توی صحفه باید با یک هدف مشخص و درست قرار گرفته باشه و نشان دهنده اکشنی باشه که انجام میده. این نمونه مخصوصا توی دکمه ها و آیکان ها خییلی پر اهمیته. آیکان ها تا جای ممکن باید نشون بدن چه منظوری دارند.
همینطور المان ها باید به صورت درست چیده بشن که برای کاربرا گنگ نباشن.
موضوع مهم دیگه ارائه توضیحات کافی و لازم برای فرم هاست:
میتونیم ببینیم که فرم خیلی شفاف و هدفش معلومه، کنتراست ها مناسبه، حالت focus و عملیات هایی که توسط کی‌برد انجام میشه خیلی تر و تمیزه و input اصلی تو صفحه هم label مناسب داره و در آخر suggestion مرتبط و خوبی رو خود chrome داره انجام میده که کار رو به سادگی تمام میکنه.
بحث راجع به این موضوع میتونه خیییلی مفصل باشه ولی مطلب خیلی خیلی داره طولانی میشه و هنوز کلی چیز دیگه مونده. راجع به این موضوع تا دلتون بخواد مطلب و ویدئو و مقاله هست که توصیه میکنم حتما دنبال کنید.
برای اینکه چیزی از قلم نیوفته یه سری نکته که شاید یادم رفته باشه هم اینجا اشاره میکنم:
خب شما همه این کار ها رو که گفتیم هم انجام بدین، باز هم در نهایت باید بتونید تست شون کنید که مطمئن بشید کیفیت کافی رو داره. من یه سری از ابزار های معروف رو براتون معرفی میکنم. شما به نظرم با هر کدوم راحت تر هستین کار کنید.
ابزاری هست که اگر شما مرورگر کروم داشته باشید، روی خودش هست و نیاز به نصب چیزی نیست. علاوه بر اینکه Accessibility رو اندازه گیری میکنه تو موارد دیگه هم کمک تون میکنه. یه امتیازی هم بهتون میده.
من خودم بیشتر از همین استفاده میکنم ولی بعضی های دیگه هم هستند که خوبن:
علاوه بر این ابزار ها، کلی کار دیگه هم میشه به صورت میدانی انجام داد، مثلا اگرررر بتونید اپلیکیشن تون رو برای افراد دارای ناتوانی بفرستید و ببینید چطور باهاش کار میکنن، چه مشکلاتی برمیخورن، چه پیشنهاد هایی میدن. البته این یه قسمت خوبیش باز هم مربوط میشه به تیم پروداکت ولی بهرحال...
حتی میتونید Survey بذارید برای اینکار، البته من ندیدم خیلی این اتفاقا توی دنیای وب بیوفته ولی بهرحال چیزایی هست که میتونید در نظرتون داشته باشید.
سعی کردم تا جایی که میشه موضوعات رو کامل و شفاف توضیح بدم، اگر موردی بود که احساس کردید از قلم افتاده یا بهش اشاره نشده، یا اشتباه گفتم حتما بهم بگید. همچنین میتونید از طریق لینکدین باهام در ارتباط باشید.
