3 نکته برای در دسترس قرار دادن برنامه ی وب برای افراد معلول

سلام من اینجام تا باهم به بحث شیرین دسترسی پذیری (Accessibility) بپردازیم. یکی از زمینه های اصلی ای که در زمان طراحی باید در نظر بگیریم "دسترسی" هست. Accessibility یه مفهوم طراحیه که به ویژه افراد معلول رو مورد توجه قرار میده تا دیزاینی که ایجاد می کنیم نه تنها قابل استفاده باشه بلکه همه ی کاربرای بالقوه رو توی خودش جا بده.

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

طبق اعلام سازمان بهداشت جهانی‌، حدود 15٪ از جمعیت جهان تحت تأثیر دائمی نوعی از معلولیت قرار دارند. یعنی بیش از یک میلیارد نفر در جهان که عدد بزرگیه. جدای از اون 70٪ افراد جامعه به طور موقت و 100٪ جامعه به طور لحظه ای دچار معلولیت می شن (مثلا توی خیابون هستید دو تا دستاتون پر از وسیله هست و موبایلتون زنگ میخوره. لحظه ای که شما نمی تونید به خاطر وسیله ها تماس رو وصل کنید و جواب بدید به اصطلاح می گیم دچار معلولیت لحظه ای شدید). 

به طور عمده 5 نوع معلولیت وجود داره که روی رابط های کاربری تأثیر می ذاره.

1. ناتوانی در خواندن (دیسلکسیا، دیسکلکولیا)
2. ناتوانی های بینایی (نابینایی، کم بینایی،کوررنگی)
3. ناتوانی های شناختی
4. ناتوانی های حرکتی )مشکلات استخوانی، عضلانی، پارکینسون)
5. ناتوانی های شنوایی (ناشنوایی، کم شنوایی)

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

در ادامه مواردی که باعث میشه دسترسی پذیری سایت و یا محصول ما بالا بره رو بررسی می کنیم: 

1. دسترسی پذیری تضاد رنگی یا کنتراست (Contrast)

دستورالعمل های دسترسی به محتوای وب (WCAG) راهنماهایی خاصی رو منتشر می کنه که با رعایتشون می تونیم تجربه  ی کاربری بهتری رو برای همه کاربرا در سراسر جهان فراهم کنیم. طبق WCAG 2.0 ، سه سطح انطباق برای دسترسی وجود داره:

A: ضروری - اگر این سطح برآورده نشه، ممکنه محتوا قابل خوندن یا کاراییش کامل نباشه.

AA: پشتیبانی ایده آل - این سطح برای وب سایت های دولت اتحادیه ی اروپا و ارگان های عمومی مورد نیازه.

AAA: پشتیبانی ایده آل - این سطح برای قسمت هایی از وب سایت ها و برنامه های وب هست که به مخاطب های متخصص خدمات ارائه می ده.

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

برای متن های معمولی:

حداقل سایزpt 12 (16px) با وزن Regular یا سنگین تر

 برای متن های بزرگ:

حداقل سایزpt 18 (24px) یا pt 14 (px18.66)  وزن bold 

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

تصویر 1  (نمونه ای از  نمودارها یا برچسب های کور رنگی)

زمانی که در حال طراحی هستیم، همیشه باید یک تم رنگی متناسب ارائه بدیم. این تم رنگی ای که ایجاد می کنیم باید برای همه ی کاربرا مناسب باشه و محتوایی که با این رنگ ها استفاده می کنیم باید قابل خوندن و سازماندهی باشه. رنگ ها نباید خیلی روشن و تاریک باشن. اطلاعات مهم باید با کنتراست بالا نمایش داده بشن. همون طور که WCAG  عزیز قبلا اعلام کرده، نسبت کنتراست باید از 1: 1 تا 21: 1 باشه. این نسبتای کنتراست رومی تونیم با استفاده از افزونه های Figma ، Sketch یا Adobe XD به طور عملی بررسی کنیم. من از سایت هایی مثل Contrastchecker  Coolors , Contrast ratio , و Accessible colors کمک می گیرم.

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

بهینه سازی صفحه خوان ها (screen readers) یه استراتژی موفقه که می تونه مورد استفاده قرار بگیره. ویژگی های  تبدیل نوشتار به گفتار که محتوای یه صفحه رو به کاربران کم بینا القا می کنه کاملاً کاربردی و مفیده. تهیه ی عناصر دیداری مثل تصاویر، آیکون ها یا فیلم ها با متن های جایگزین یا یه توضیح کوچیک، روش خوبیه چون در این صورت به کاربرای کم بینا کمک می کنه تا مطالب رو بهتر درک کنن. (تصویر 2)

تصویر ۲  (نمونه ای صفحه خوان برای دسترسی پذیری کاربرانی که دارای معلولیت بینایی هستند).

علاوه بر مواردی که قبلا گفته شد، با استفاده از ابزارهای مفید زیر می تونیم کیفیت رنگ ها و کنتراست اون ها باهم رو بسنجیم تا طراحیامون از منظر رنگ، دسترسی پذیری بالایی داشته باشن:

Color Oracle : افزونه برای مک و ویندوز

WhoCanUse : اپلیکیشن مبتنی بر وب در مرورگر

Stark : افزونه برای فیگما

2.دسترس پذیر بودن منطقه ی قابل کلیک

 1-2 حالت تمرکز  (Focus State)

 حالت تمرکز  (Focus State) رو برای گروه های دکمه (Button groups)، دکمه های رادیویی (Radio Buttons)، چک باکس ها (Check box)، تب ها (Tabs) و قسمت های ورودی (Inputs) اضافه کنید.

جنبه ی اصلی دکمه های عملکرد (Action buttons) حالت تمرکز  (Focus State) هست. حالت های تمرکز  یک جنبه ی دیداریه که می تونه برای راهنمایی کاربر استفاده بشه. این کار، برای ناوبری (Navigation) صفحه کلید زمانی مفیده که کاربر از کلید Tab روی صفحه کلید برای پیمایش در  رابط کاربری استفاده می کنه. برای این که کاربر هنگام پیمایش بدونه در حال حاضر کجاست، می تونیم از افکت (Effect) سایه یا افکت هایلایت (Highlight Effect) اطراف دکمه برای این کار استفاده کنیم. (تصویر 3)

تصویر 3 (دسترس پذیر بودن منطقه قابل کلیک)

2-2 همیشه از اثر شناور  (Hover Effect) در  وب استفاده کنید.

Hover یه افکت کاربردی برای کاربرامون هست. می تونیم افکت Hover رو به دکمه ها یا آیکون ها اضافه کنیم و این برای کاربرایی با ناتوانی های شناختی، روان هست. برای هر دکمه عملکرد (CTA) ، می تونیم از افکت های Hover استفاده کنیم تا به کاربر اطلاع بدیم که در حال حاضر کدوم دکمه رو کلیک می کنه. می تونیم کنتراست رنگ دکمه رو برای هر دو حالت Hover تغییر بدیم. اما این تأثیرات باید به خوبی تفکیک بشن. مثلا؛ کنتراست رو می تونیم برای Hover روشن یا تیره کنیم. (تصویر 4)

تصویر 4 ( استفاده از اثر شناور در وب سایت)

3-2 استفاده از افکت فشرده (Pressed Effect)

استفاده از 'Pressed Effect' روش خوبیه تا کاربر بدونه در حال حاضر روی کدوم دکمه کلیک می شه. این افکت برای کاربرایی مفید و کاربردیه که ناتوانی شناختی دارن، تا وقتی گزینه ای رو انتخاب می کنن تأیید بشن. با افزودن انیمیشن به دکمه می تونیم این تأیید رو نمایش بدیم. (تصویر 5)

تصویر5 (استفاده از Pressed effect )

4-2 استفاده از پیمایش ها در اطراف برنامه باید آسون باشه

یکی از راه های ارتباط سریع کاربرا با وب سایت یا اپلیکیشن، ارائه ی پیمایش وب سایت (navigation) عالیه. استفاده از کنتراست بالا و استایلی که از صفحه ای به صفحه دیگه سازگار باشه مهمه.

علاوه بر این، می تونیم از نویگیشن (Breadcrumb) استفاده کنیم تا به کاربر کمک کنه که بدونه توی این فرایند کجای وب سایت قرار داره. برای مثال، در نمونه ای مثل اتمام خرید، می تونیم با نشون دادن هر مرحله ای که انجام داده و مراحلی که برای انجام اون در نظر گرفته شده است، به کاربر کمک کنیم.

سازگاری در پیمایش جنبه ی دیگه ایه که باید روی اون تمرکز کنیم. داشتن یک Header و Footer ثابت با اطلاعات مفید برای کاربر راهی برای بهبود ثبات (consistency) هست. (تصویر 6)

تصویر 6  (استفاده از نویگیشن آسان)

5-2 از برچسب ها و دستورالعمل ها برای فیلدها و نمادهای ورودی (Inputs) استفاده کنید

یکی از اصلی ترین اشتباهایی که یه طراح مرتکب می شه، استفاده از متن Placeholders به عنوان برچسب فرم هست. (یعنی عنوان رو به جای اینکه بیرون input قرار بدن، داخل input قرار میدن). این شکل، ظاهر مینیمالیستی خوبی برای فرم ایجاد می کنه و یه روند جدید و مدرنه که توسط خیلی از افراد استفاده می شه اما متنی که داخل Placeholder قرار میگیره کنتراست خیلی کمی داره و خوندنش برای کاربر ی با نقص بینایی سخته. علاوه بر این، وقتی که کاربر textbox رو برای تایپ انتخاب می‌کنه، متن Placeholder با اون چیزی که تایپ می کنه جایگزین می‌شه. این یه روش خوبه که همیشه به کاربر اطلاع میده که چه چیزی رو باید تایپ کنه. وقتی که فرد input رو پر می کنه، عنوان‌ ها از بین می ره و کاربر فراموش می کنه که چه چیزی روتایپ کنه، باید هر چیزی که تایپ کرده رو لغو کنه تا عنوان نمایش داده بشه و بتونه بخونه و براش یادآوری بشه.

تمام عنوان هایی که برای کاربر قابل مشاهده هستن باید با رنگ پس زمینه شون کنتراست بالایی داشته باشن تا برای خواندن واضح و راحت باشن. علاوه بر این، باید زمان کافی برای پر کردن فرم یا تکمیل هر کار دیگری، به کاربر اختصاص بدیم، این برای کاربرایی که دارای ناتوانی شناختی هستن مفید و کاربردیه. پیام های هشدار تکراری می تونن کاربرایی رو که برای تصمیم گیری به زمان نیاز دارن تا مطالب رو بخونن و درک کنن، ناامید کنه.(تصویر ۷)

تصویر 7 ( از برچسب ها و دستورالعمل ها برای فیلدها و نمادهای ورودی)

3- دسترسی به محتوای مشترک

1-3 تایپوگرافی را بهینه کنید

• قانون شست (The Rule of Thumb)

برای برنامه های تلفن همراه، "The Rule of Thumb" مفهومی کاملاً  کاربردیه. این مفهوم اصولی رو بیان می کنه که برای سازماندهی یه طرحِ راحت، باید رعایت بشه چون کاربرای برنامه های تلفن همراه از انگشت شست برای تعامل با برنامه استفاده می کنند. در این مفهوم، اندازه قلم ارائه شده برای برنامه های تلفن همراه 16 پیکسل در نظر گرفته شده.

• هم ترازی (Alignment)

ترازبندی همیشه باید در طراحی مورد استفاده قرار بگیره. محتوای بدون تراز، ناتموم به نظر می رسه و برای کاربر جذاب نخواهد بود. می تونیم از تراز وسط، چپ یا راست استفاده کنیم. بهتره از تراز کردن Justify برای وب سایت استفاده نشه چون طبق گفته دیوید کاداوی، خوندن چنین محتوایی برای کاربر دشوارتر خواهد بود.

• استفاده از فضای مناسب خط

فاصله ی خط معمولاً با توجه به اندازه قلم به صورت درصد اندازه گیری می شه و برای فاصله خط از 120٪ - 145٪ استفاده می شه. اگر دونستن درصد برای شما سخته، 120٪ برابر با em 1.2 هست. می شه از طریق تبدیل تقریبی از Points به Pixels به این مورد اشاره کرد. فاصله ی خیلی کم و خیلی زیاد خطوط از  هم، در محتوا مشکل ایجاد می کنه. توانایی کاربر برای خوندن درست محتوا باید منطقه متمرکز اصلی ما طراح ها در این زمینه باشه.

• استفاده از پاراگراف ها

وقتی محتوای زیادی در یک صفحه داریم، اون رو به چند پاراگراف تقسیم می کنیم که دارای 70-80 کاراکتر در هر صفحه باشه تا برای کاربر قابل خوندن باشه. زمان برخورد با فاصله ی پاراگراف، فضای پاراگراف 1.5 برابر مقدار فاصله ی خطه که در محتوا استفاده می کنیم. وقتی این مفاهیم رو برای محتوای طرح بهینه کنیم، خوندنش برای کاربر خیلی راحت میشه. (تصویر 8)

تصویر8 ( استفاده از پاراگراف ها)

2-3 پشتیبانی از کلیدهای میانبر

دسترسی به صفحه کلید هم عامل مهمیه که باید مورد توجه قرار بگیره. کاربرایی که در تأثیر معلولیت های حرکتی و اختلالات بینایی قرار دارن و به صفحه خوان ها متکی هستن، برای اهداف ناوبری (Navigation) به صفحه کلید نیاز دارند. میان برهای صفحه کلید یکی از جنبه هاییه که می تونه برای یه صفحه ی وب پشتیبانی بشه. کلیدهای میان بر مثل "Tab" برای حرکت به مورد UI بعدی، Ctrl + S یا Cmd + S برای ذخیره، یا حتی کلید "Esc" برای لغو برخی از کلیدهای میان بر که بیشتر استفاده می شه. می تونیم از جلوه های بصری مثل رنگ با کنتراست بالا یا سایه ی درخشان استفاده کنیم تا به کاربر اطلاع بدیم که در اون لحظه در صفحه ی وب چیه. همون طور که کاربر از راه صفحه وب حرکت می کنه، ما باید یه نظم منطقی طراحی کنیم که برای کاربر مفهوم باشه. یادمون باشه برای طراحی در دسترس، باید میان برهای صفحه کلید برای یه وب سایت پشتیبانی بشن و نکته ی دیگه اینکه بیشتر کاربرا از کلید "Tab" برای پیمایش در یک صفحه وب استفاده می کنن. (تصویر9)

تصویر9 (پشتیبانی از کلیدهای میانبر)

3-3 طراحی واکنش گرا (Responsive)

بهینه سازی دیزاینی که طرح رو متناسب با دستگاه تنظیم می کنه، یکی از جنبه های کاربردی طراحیه که بهش طراحی واکنش گرا (Responsive) می گیم. انعطاف پذیری سایت کلیدِ راحتی کاربر در سایت ماست. این به سازماندهی محتوا با توجه به طرح های موبایل و دسکتاپ کمک می کنه که برای کاربرامون مناسب باشه. (تصویر 10)

تصویر 10 (طراحی واکنش گرا)

نتیجه

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