دسترسی‌پذیری چیست و چرا باید به آن توجه کنیم؟

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

چه تعداد از افراد را از استفاده کردن از محصول خود، محروم می‌کنیم؟

• طبق آمار سازمان ملل بیش از یک میلیارد نفر یا حدود 15 درصد از جمعیت جهان با نوعی از معلولیت زندگی می‌کنند.
• طبق خبرگزاری مجلس شورای اسلامی بیش از ۱۱ میلیون معلول در کشور داریم.
• ایرنا: 520 هزار ناشنوا و كم شنوا در ایران داریم و سالانه 1500 ناشنوای جدید در كشور متولد می‌شود.
• ایسنا: روزانه 15 کودک ناشنوا و کم‌شنوا در ایران متولد می‌شوند.
• یک نفر از هر 4 سالمند، مبتلا به اختلالات ناشنوایی است.
• 285 میلیون کم‌بینا و نابینا و 39 میلیون نابینای مطلق در جهان وجود دارد.

شناخت ناتوانی‌های شایع:

به طورکلی بهتر است بعضی از معلولیت‌های شایع را با هم بشناسیم تا آن‌ها را در طراحی دسترس‌پذیر در نظر بگیریم:

• ناتوانی در شنوایی: کم شنوایی، ناشنوایی
• ناتوانی در بینایی: نابینایی، ضعف‌های مختلف بینایی، کوررنگی، دوبینی
• ناتوانی در گفتار: لکنت زبان
• ناتوانی‌ در حرکت: لرزش اندام، شکستگی، نقص عضو
• ناتوانی شناختی و آموزشی: اختلال در توجه، کندذهنی، اوتیسم، حافظه کوتاه مدت ضعیف، خوانش پریشی، بیش‌فعالی
• ناتوانی در افراد سالمند: علاوه بر ناتوانی‌های بالا، عدم داشتن سواد یا آشنایی با تکنولوژی
  

بعضی از ناتوانی‌ها به واسطه موقعیت ایجاد می‌شوند:

• راننده‌ درحال رانندگی چطور از نقشه‌خوان موبایل خود استفاده می‌کند؟
• کودکان چطور از یک محصول استفاده می‌کنند؟
• صفحه موبایل در نور زیاد در یک محیط باز چطور دیده می‌شود؟
• کاربر در یک محیط خیلی شلوغ چطور می‌شنود؟
• افراد در نبود اینترنت پر سرعت چطور با محصول کار می‌کند؟

آشنایی با کاربران ناتوان در بینایی:

شایع‌ترین ناتوانی در بینایی که در بازخورد از طراحی شما بسیار تاثیر دارد "کوررنگی" است که برخلاف تصور عام (که این افراد همه چیز را سیاه و سفید می‌بینند) اکثرا رنگ‌ها را می‌بینند اما به درستی رنگ را تشخیص نمی‌دهند:

• سبز‌کوری و سبز دشوار‌بینی(Deuteranomalia): رنگ سبز را دشوار و همه چیز را به صورت رنگ‌پریده‌ می‌بینند.
• قرمز دشواربینی و قرمزکوری(Protanopia): تشخیص رنگ قرمز از زرد و سبز را ندارند و همه چیز را با تم سبز می‌بینند.
• آبی‌کوری(Tritanopia): اختلال نادری که آبی و سبز را با هم اشتباه می‌کنند و متمایل به سبز و صورتی می‌بینند.
• تک رنگ‌بینی(MonoChromacy): همه چیز را سیاه و سفید می‌بنند.
• رنگین‌بینی: این اختلال هم نادر است و در آن فرد اشیای رنگی را به رنگ دیگر و اشیای بی‌رنگ را رنگین می‌بیند.

چند پیشنهاد‌ ساده برای طراحی دسترس پذیر:

پیشنهاد اول:

ابتدا باید پروتکل جهانی "WCAG" یا Web Content Accessibility Guidelines را مطالعه کنیم و تغییرات لازم را برا اساس این استانداردها تا جای ممکن بوجود آوریم.

پروتکل WCAG چیست؟

• راهنمای (WCAG) فهرستی جامع از دستورالعمل‌هایی برای بهبود دسترسی کاربران به وب است.
• این راهنما توسط کنسرسیوم جهانی وب (W3C) مانند یک استاندارد رسمی بین‌المللی منتشر شده‌است.
• به طور مفصل در مورد عناصر طراحی مانند رنگ، کنتراست‌ها، سایز، طراحی در موبایل، معماری‌اطلاعات، سیستم ناوبری، UX Writng و…. دستورالعمل‌هایی دارد.
• هدف این پروتکل علاوه بر بهبود دسترسی کل کاربران، برای دسترسی بیشتر افراد کم توان یا ناتوان در بینایی و شنوایی، افراد دارای معلولیت شناختی و حرکتی به تصویب رسیده‌است.

پیشنهاد دوم:

ابزارهایی برای بررسی دسترسی‌پذیری وجود دارد که براساس پروتکل‌ WCAG به رنگ، سایز، کنتراست و… در طراحی شما امتیاز (A، AA، AAA) به ترتیب (بد، متوسط و خوب) می‌دهند یا در مواقعی موفق یا عدم موفقیت طرح شما را به لحاظ دسترس‌پذیری بررسی می‌کنند و گاهی راه‌حل هایی را به عنوان پیشنهاد به همراه دارند.

پیشنهاد سوم:

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

پیشنهاد چهارم:

اگر کاربران به واسطه انتخاب رنگ با محصول شما ارتباط دارند حتما باید از فیلترهای رنگی استفاده کنید و نام رنگ‌ها را بنویسید. این موضوع بیشتر در فروشگاه‌ها به کار می‌آید تا کاربر به راحتی بتواند رنگ مورد نظر خود را خریداری کند. بهتر است از نام‌گذاری سلیقه‌ای مثل کالباسی یا انگوری و… خودداری کنیم و یک اسم حقیقی با کدرنگ انتخاب کنیم.

پیشنهاد پنجم:

اگر در طراحی خود شرایط تغییر رنگ‌ها را نداریم می‌توانید، رنگ‌ها را به واسطه بافت، طرح و سایز از هم قابل تفکیک کنید کاری که Trello با طراحی نوارهایش کرد.

پیشنهاد ششم:

در حالت طوسی یا Gray طراحی خود را حتما بررسی کنید که تمام اجزا از هم قابل تفکیک باشد. این موضوع در “گوگل‌مپ” به خوبی دیده‌می‌شود.

پیشنهاد هفتم:

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

پیشنهاد هشتم:

استفاده کردن از اشکال ساده و قابل مفهوم برای اکشن‌ها و توضیح اشکال و آیکون‌ها بسیار به افراد کمک می‌کند، در تصویر زیر آیکون‌های نوار پایین در شش پلتفرم معروف کنار هم ارزیابی شده :

• حداقل دسترس‌پذیری(دایره قرمز)
• دسترس‌پذیری کم(مربع زرد)
• دسترس‌پذیری خوب(مثلث سبز)

همانطور که می‌بینید در پلتفرم "لینکدین"، هم نام اکشن زیر آیکون‌ها آمده، هم از رنگ برای حالت انتخاب‌، استفاده‌شده‌، هم شکل آیکون‌ها بسیار ساده طراحی شده‌است.

پیشنهاد نهم:

مقیاس‌پذیری(Product Scalability) یا خدماتی که یک محصول در حالت نبود اینترنت در اختیار کاربر می‌گذارد نمودی از طراحی دسترس‌پذیر است. برای مثال در دسترس بودن “گوگل‌مپ” در حالت آفلاین یک نمونه‌ آن است، نمونه‌های دیگر آن را در تصویر زیر در پلتفرم‌های شناخته‌شده ببینید:

پیشنهاد دهم:

برای ناتوان‌هایی که لرزش دست، محدودیت حرکتی یا قطع عضو دارند:

1. امکانی را فراهم کنیم تا کاربران بتوانند از طریق کیبورد به هدایت وب سایت بپردازند و بدون نیاز به موس از بخشی به بخش دیگر از وب سایت منتقل شوند.

2. سایز و نواحی اطراف حساسیت یک دکمه را بیشتر کنیم.

3. بین دکمه‌ها و کادرهای نزدیک به هم، فاصله مناسب را ایجاد کنیم.

پیشنهاد یازدهم:

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

پیشنهاد دوازدهم:

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

نکته: هرچیزی که کاربر باید بداند همه را در آن صفحه به کاربر بگویید از استفاده کردن لینک‌های کمکی مانند جزییات بیشتر برای دانستن جزییات یا قوانین بسیار مهم، جلوگیری کنید.

پیشنهاد سیزدهم:

توجه به UX Writing در تمام خطاها و پیام‌ها و محتوای متنی که مفصل در مقالات قبلی درباره آن توضیح دادیم، به طراحی دسترسی‌پذیر نیز کمک می‌کند، برای مثال:

1. در متن خطاها و پیام‌ها به کاربر واضح بگویید که چه اتفاقی افتاده‌است و برای رفع مشکل چه راه حلی وجود دارد؟
2. جای خطا و پیام‌ها را طوری انتخاب کنید که حتما دیده شود.

3. علاوه بر متن خطاها و پیام ها از علایم هشدار و رنگ نیز استفاده کنید.

دیگر پیشنهاد‌ها برای دسترسی پذیری:

• چند زبانه کردن محصول
• استفاده کردن از فرمان‌های صوتی
• وجود alt text یا همان توضیحات برای عکس‌ها و ویدیوها در زمانی که عکس‌ها و ویدیوها لود نمی‌شوند.
• برای کسانی که مشکل بینایی دارند بهتر است امکان بزرگنمایی در صفحات را ایجاد کنیم.
• اگر محتوای ویدیویی دارید برای کاربران ناشنوا به فکر زیرنویس‌ها یا توضیحات باشید.

کلام آخر:

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