چند وقت پیش که سوار مترو شده بودم خانمی رو دیدم که بر روی ویلچر نشسته بود و به طور عجیبی به صفحه گوشیش نگاه می‌کرد و با ضربه زدن‌های پی در پی بر روی صفحه موبایل سعی داشت کاری را انجام دهد توجهم را جلب کرد نزدیکتر که شدم، دیدم در یکی از برنامه های مسیریاب به دنبال آدرسی می‌گردد و سعی داشت آدرس یک مکان را از روی برنامه مسیریاب پیدا کند، متاسفانه زمان اجازه نداد با اون خانم هم کلام بشم و سوالاتی ازش بپرسم تا بیشتر درک کنم افراد با ناتوانایی چطور با محصولات دیجیتال تعامل می‌کنند ولی همین موضوع دلیلی شد که به یاد مساله دسترسی پذیری بیفتم که چقدر میتونه مهم باشه و به عنوان یک طراح توی طراحی هام به این مساله توجهی نداشتم. شاید دیدن این صحنه تلنگری بود که به این مساله مهم توجه بیشتری داشته باشم. بعدها که در مورد دسترسی پذیری خوندم و تحقیق کردم متوجه شدم یکسری چالش ها در طراحی دسترس پذیر هست مثل استفاده از رنگ های قرمز و سبز که به صورت جهانی برای پیام‌های خطا، تابلو های ایست، و تابلوهای راهنما و غیره استفاده میشن ولی افرادی که دارای ناتوانایی از نوع کم بینایی هستن این رنگ هارو به یک رنگ دیگه میبینن
پس برای حل این چالش چه باید کرد؟! خصوصا اگر رنگ برند محصول دیجیتال از نوع رنگ هایی باشد که در طیف کوررنگی قرار می‌گیرد و همچنین این نگرانی برای طراح ها شاید وجود داشته باشد که با در نظر گرفتن طرح دسترس پذیر از زیبایی طرحشون کم میشود.
مقاله زیر پاسخی برای این چالش ها و اهمیت دسترسی پذیری در طراحی وب و موبایل می‌باشد.
در این مقاله سعی شده چندتا از انواع معلولیت و مشکلات آن توضیح داده شود که با آن میتوان 80 تا 90 درصد مشکلات دسترسی پذیری را پوشش داد. همچنین این مقاله آموخته های من از مطالبی است که در این مدت مطالعه کردم بنابراین برداشت هر فردی از این موضوع می‌تواند متفاوت باشد.
چگونه محصول دسترس پذیر طراحی کنیم؟
اصل اول این است که نابینایی ۸۰٪ مسائل دسترسی‌پذیری را پوشش می‌دهد.
در واقع، چهار نوع مختلف از معلولیت‌ها وجود دارد:
1.نابینایی، که شامل دید کم و کوری رنگ میشود؛
2.ناشنوایی؛
3.مشکلات شناختی cognitive ؛
4.اختلالات حرکتی.
نابینایی در واقع از یک طیف مختلف تشکیل شده است و حدود ۲۲ نوع مختلف دارد، ما بین این 22 نوع تفاوت قائل می‌شویم. ممکن است فردی در لبه نابینایی باشد؛ در این صورت ممکن است نیاز به بزرگ‌نمایی صفحه داشته باشد که به دید کمک میکند، کاربران با دید کم از بزرگ‌نمایی‌های صفحه به درصدهای مختلفی مثلاً شصت، هفتاد، هشتاد، نود، نود و پنج، نود و هفت درصد استفاده می‌کنند و بسیاری از ابزارها بزرگ‌نمایی دارای صفحه خوان هم هستند. اما کاربرانی که به طور کامل نابینا هستند فقط از صفحه خوان‌ها استفاده می‌کنند
حالا چرا نابینایی از تمام این معلولیت‌های مختلف انتخاب شده است؟ ممکن است فکر کنید در نظر گرفتن اصل دسترسی پذیری و ایجاد محصول دسترس پذیر با وجود این همه معلولیت های مختلف دشوار است و چگونه میتوانیم با همه آنها برخورد کنیم؟" اما نابینایی به ما کمک میکند تا تقریباً به نقطه‌ای برسیم که با کمک صفحه کلید و صفحه خوان اقدامات دسترسی‌پذیری را انجام دهید.
نابینایی در واقع به ما در مسیر صحیح کردن امور کمک میکند چون این کاربران از صفحه کلید (Keyboard) و صفحه خوان (Screen reader) استفاده میکند. بنابراین می‌توانید دسترسی به کاربران را آزمایش کنید که همان کاربران با محدودیت حرکتی انجام می‌دهند یعنی کاربران با محدودیت حرکتی تقریبا همانطوری که یک فرد نابینا با محصول تعامل میکند به واسطه کیبورد همانطور تعامل دارند.
در یک آزمایش دسترسی پذیری که انجام شده بود مشاهده شده بود کاربرانی که دید دارند حدود سه برابر آسان‌تر یک کار را نسبت به کاربران نابینا انجام می‌دهند، همانطور که در کاربران نابینا دیده شده، آنها باید به ۶۰ تا ۸۰٪ اطلاعات بی‌معنی گوش کنند تا به یک یا دو چیز معنی‌دار و ارزشمند برسند برای همین بسیاری از مشکلات دسترسی پذیری برمی‌گرده به تگ‌گذاری نادرست یا غیرمنطقی، بنابراین شما می‌توانید با نحوه مرتب‌سازی عناوین، تعریف عناوین، تعریف تگ‌های عنوان، تگ‌های توضیحات، تگ های ( Alt text) یا همان تگ متن جایگزین تصاویر و توضیحات تصاویر و غیره کمک کنید.
مثلا تصور کنید کاربری با اختلالات بینایی یا اینترنت ضعیف وارد صفحه شما میشود. قطعا مشاهده تصاویری که با وسواس و زحمت زیادی طراحی و انتخاب کرده‌اید، برای این افراد سخت یا غیرممکن است. در چنین مواقعی، متن جایگزین به فریادتان می‌رسد
در واقع افرادی که اختلالات بینایی دارند از (Screen reader) استفاده می‌کنند وقتی این ابزار به تصاویر می‌رسد، سراغ متن جایگزین می‌رود و از این طریق کاربر را در جریان محتوای تصویری صفحه قرار می‌دهد در صورت ضعیف بودن اینترنت نیز کاربر حداقل این امکان را دارد که از تصاویر سایت شما قدری بهره‌مند شود. بدین ترتیب تجربه کاربری سایت شما بهبود می‌یابد و این برای سئو خیلی ارزشمند است. علاوه بر همه این‌ها، اضافه کردن متن جایگزین راهی عالی برای سئو کردن تصاویر است و طبیعتا در ارتقای رتبه سایت‌ها تاثیر می‌گذارد و محتوای آنها را در معرض دید مخاطبان قرار می‌دهد ولی اضافه کردن متن جایگزین به تصاویر یک راه حل کلاسیک است در زیر این موضوع را که چرا میگیم راه حل کلاسیک را توضیح دادم.
تصور کنید، تصویری دارید که یک مرد دارد به یک تصویر اینفوگرافیک نگاه میکند برای متن جایگزین این تصویر چه میخواهید بنویسید؟ مثلا میخواهید مردی را توصیف کنید که چه بر تن دارد؟ یا سن او چقدر است؟ یا دارد به یک تصویر پیچیده بر روی یک دیوار نگاه میکند؟ باز هم، همه این توضیحات به درستی و به طور کامل نمی‌تواند مفهوم آن عکس را منتقل کند و این یکی از چالش های دسترسی پذیری است که برای تصاویر بتوانیم مفهوم آن را توسط (Alt tag) ها به کاربران نابینا انتقال دهیم. برای رفع این چالش میتوانیم مفهوم و محتوای تصویر را به طور کامل و دقیق توصیف کنیم یا از متن اضافی در صفحه استفاده کنیم که به کاربران توضیح می‌دهد چگونه می‌توانند به محتوای به محتوای تصاویر دسترسی پیدا کنند، مانند استفاده از توضیحات صوتی یا دیگر ابزارهای فراهم کننده دسترسی.
حالا میخوایم این موضوع رو مورد بررسی قرار بدیم که کاربران کم بینا و کاربرانی که دچار مشکل کوررنگی هستند چطور از محصولات دیجیتال استفاده می‌کنند و با آنها کار می‌کنند؟
کوررنگی بیشتر در رنگ های قرمز و سبز به وجود میاد و افرادی که کوررنگی قرمز دارند این رنگ را خردلی میبینند، رنگ های کریسمس برای کاربرانی که کوررنگی دارند یک مساله است و این واقعا یک مشکل است چون ممکن است، این سوال پیش بیاید پس برای تابلوهای ایست که به رنگ قرمز هستند چه کار باید کرد؟ چون رنگ قرمز یک رنگ جهانی برای نشان دادن پیام های خطاست و همچنین رنگ سبز که در همه جا استفاده میشود.
چگونه باید با این موضوع برخورد کرد؟ حقیقتا سوال سختی است ولی نکته کلیدی در ایجاد دسترسی این است که تفاوت ایجاد کنیم.
1.استفاده از ترکیبات رنگ قابل خواندن:
از ترکیبات رنگی استفاده کنید که برای افراد با مشکل کوررنگی قابل خواندن باشد. برای مثال، از ترکیبات متفاوتی از رنگ‌های روشن و تیره استفاده کنید که باعث تضاد رنگی و کنتراست بالا شود. استفاده از ترکیبات رنگ قابل خواندن" به این معنا است که در طراحی و استفاده از رنگ‌ها، باید ترکیباتی را انتخاب کنید که برای افراد با مشکل کوررنگی قابل تشخیص باشند. به عبارت دیگر، رنگ‌هایی را باید انتخاب کنید که به کاربران با مشکل کوررنگی امکان می‌دهند محتوا را به درستی تشخیص دهند.
برای مثال، اگر شما یک وبسایت دارید و میخواهید دکمه‌ها یا متن‌های مهم را با یک رنگ متفاوت از پس‌زمینه آنها مشخص کنید، باید از ترکیباتی استفاده کنید که حتی برای افراد با مشکل کوررنگی هم قابل تشخیص باشد. به عنوان مثال، اگر از رنگ قرمز برای دکمه‌ها استفاده می‌کنید، باید اطمینان حاصل کنید که این رنگ در مقایسه با پس‌زمینه و متن دیگر به خوبی قابل تشخیص باشد. چون کاربران با اختلالات کوررنگی قرمز را به رنگ خردلی میبینند پس اگر متن داخل دکمه قرمز را سفید بزارید قاعدتا سفید بر روی خردلی (زرد) کنتراست خوبی ندارد و کاربر به سختی می‌تواند آن را بخواند.
2.استفاده از برچسب‌های متنی:
برای توضیح رنگ‌ها و عناصر مختلف، از برچسب‌های متنی استفاده کنید تا افراد بتوانند مطلب را با استفاده از متن‌ها مشخص کنند. یعنی وقتی یک عکس یا یک عنصر دیگر در وبسایت وجود دارد، یک متن کوتاه هم در کنارش می‌ذاریم که بگیم اون عنصر یا عکس چیه و برای چی استفاده میشود. مثلا وقتی روی یک لینک کلیک می‌کنیم ممکن است یک متن نوشته باشد که ما را راجع به محتوای لینک آگاه میکند.
مثال: فرض کنید در یک وبسایت یک عکس از یک گربه داریم. به جای اینکه فقط عکس را بذاریم میتوانیم یک متن کوتاه هم به عنوان برچسب بزاریم که میگه "گربه" تا افرادی که ممکنه مشکلی داشته باشند و نتوانند عکس را ببیند، بفهمند که توی این عکس چی هست.
برچسب متنی به ما اطلاعات اضافی در مورد یک عنصر وب می‌دهد که به کاربران کمک میکند تا بدون نیاز به دیدن آن، درک کنند که آن عنصر چیست و چه کاربردی دارد.
3.تست رنگ با ابزارهای مختلف:
از ابزارها و سرویس‌های آنلاین مانند ابزارهای تست رنگ استفاده کنید تا اطمینان حاصل کنید که رنگ‌های استفاده شده قابل تشخیص برای همه‌ی کاربران هستند.
برخی وبسایت‌ها و ابزارهای آنلاین مانند "Adobe Color Wheel" یا "Coolors" به شما کمک می‌کنند تا ترکیبات رنگی هماهنگ را انتخاب کنید.
راهنمای رنگ‌ها و کنسورتیوم‌های دسترسی‌پذیر: سازمان‌ها و کنسورتیوم‌های مختلفی وجود دارند که راهنمایی‌ها و استانداردها برای طراحی دسترسی‌پذیر فراهم می‌کنند.
به عنوان مثال، W3C و Web Content Accessibility Guidelines (WCAG) (راهنمای دسترسی وب) منابع مفیدی هستند.
4.گزینه‌های جایگزین:
اگر امکان تغییر رنگ برند شما وجود ندارد، می‌توانید گزینه‌های جایگزین فراهم کنید تا کاربران با مشکل کوررنگی تجربه بهتری داشته باشند. برای مثال، به کاربران امکان داده شود تا رنگ‌های دلخواه خود را انتخاب کنند.
یکی دیگر از چالش‌ها برای کاربران نابینا، محتوایی است که در خارج از مسیر صفحه خوان ها قرار می‌گیرد و ممکن است روی صفحه پیدا نشود فکر کنید یک نقشه بر روی صفحه وجود دارد و شما به دنبال آدرس یک مکانی هستید صفحه خوانی که این صفحه را می‌خواند نقشه را می‌بیند و لیست مکان ها یعنی نتایج را نمی‌بیند در اینجا نقشه واقعا مهم نیست و چیزی که اهمیت دارد نتایج آن جستجو و لیست مکان هایی است که در این صفحه وجود دارد برای همین لیست مکان ها در قسمت کد باید قبل از نقشه قرار بگیرد تا صفحه خوان بتواند آن کد را بخواند و تجزیه کند بنابراین منظور ما از محتوای غیر مجاز محتوایی است که یافتن آن سخت است
از مشکلات دیگری که در دسترسی پذیری برای کاربران کم بینا در موبایل وجود دارد غیرفعال کردن زوم بر روی تلفن همراه است که آن را غیرقابل دسترس می کند، بنابراین کاربران کم بینا با استفاده از ذره‌بین‌های صفحه نمی‌توانند بزرگ‌نمایی را انجام دهند. و این کار باعث میشود نحوه هضم صفحه نمایش برای کاربران کم بینا سخت شود.
یکی از عناصری که در موضوع دسترسی پذیری ایجاد مشکل میکند استفاده از منوی همبرگری است زیرا صفحه خوان ها فقط از روی آنها می‌گذرد کاربران آنها را نمی‌بینند و در واقع نمی‌توانند به آنها دسترسی داشته باشند بنابراین حالتی که برای حل این مشکل وجود دارد این است که میتوان این عناصر را تگ گذاری (tag) کرد.
حالا می‌خواهیم معلولیت حرکتی را بررسی کنیم، فردی را در نظر بگیرید که بر روی ویلچر است و برای حرکت کردن از دستانش استفاده میکند انگشت های او کمی بزرگتر از افراد عادی است بنابراین او کمی با کار کردن با موس مشکل دارد ولی متوجه شده است چگونه این کار را انجام دهد و برای او استفاده از کامپیوتر آنقدرها هم مشکل نیست، اما ما میتوانیم برخی مشکلات را با صفحه کلید و موس ببینیم این کاربر همچنین مشکلاتی با دید کم دارد اگرچه ممکن است بین 5 تا 10 درصد باشد ولی مواردی مانند مسائل زوم و کنتراست برای او حائز اهمیت است بنابراین مهم است بدانیم با چه چیزی سر و کار داریم و سعی کنیم طیف وسیعی از ناتوانی ها را آزمایش کنیم تا بتوانیم موارد اصلی را بهینه کنیم بنابراین کاربران داری نقص حرکتی را همیشه باید در نظر بگیریم و سعی کنیم دسترسی آنها به استفاده از محصولات دیجیتال را بهینه کنیم.
مشکلات ناشنوایی بیشتر در توضیح نوشتاری وجود دارد؛ بنابراین این کار نسبتاً آسان است. و این نوع معلولیت را در آخر مورد بررسی قرار دادیم
مشکلات دسترسی برای کاربران ناشنوا شامل عدم دسترسی به محتوای صوتی و وجود موانع در مطالعه متون می‌باشد برای کم کردن این مشکلات میتوانیم از زیرنویس برای محتوای ویدیویی با قابلیت تنظیم اندازه و نوع فونت استفاده کنیم این امکان باعث میشود کاربران ناشنوا بتوانند متون را به راحتی بخوانند. یا از زبان اشاره در محتوای ویدیویی استفاده شود.
تا اینجا چند نوع از معلولیت و مشکلات مرتبط با آن را توضیح دادم، در ادامه مواردی را مطرح کردم که بتوانید با آنها دسترسی پذیری محصول خود را ارزیابی کنید.
برای بررسی دسترسی‌پذیری محصولی که طراحی کرده‌اید، می‌توانید مراحل زیر را دنبال کنید:
استفاده از ابزارهای تحلیل دسترسی‌پذیری:
استفاده از ابزارهایی مانند Lighthouse (که در برنامه مرورگر Chrome قابل دسترس است) یا WAVE (وجود دارد به عنوان افزونه‌ای برای مرورگرها) که به شما ارزیابی اولیه در مورد دسترسی‌پذیری وبسایت می‌دهند.
بررسی با استانداردهای WCAG:
بررسی کنید که وبسایت شما از استانداردهای دسترسی WCAG (Web Content Accessibility Guidelines) پیروی میکند یا خیر.این استانداردها به طراحان و توسعه دهندگان راهنمایی می‌کنند تا محتوا وسرویس‌هایشان را برای همه افراد دسترسی‌پذیر کنند.
آزمون‌های دسترسی‌پذیری:
می‌توانید آزمون‌های دسترسی‌پذیری انجام دهید تا مشکلات خاصی که ممکن است در وبسایت وجود داشته باشند، شناسایی کنید. مثلاً بررسی کنید که آیا تمامی کلیک‌ها و ناحیه‌های تعاملی با کیبورد قابل دسترسی هستند.
مشاوره با کاربران ویژه:
برای بررسی دقیق‌تر دسترسی‌پذیری، می‌توانید با افرادی که ممکن است مشکلات دسترسی داشته باشند (مانند افراد با محدودیت‌های بصری یا شنوایی) مشورت کنید تا نظرات آنها را در نظر بگیرید.
تست‌های عملی با توجه به موارد ویژه:
تست‌های عملی می‌توانند به شما کمک کنند تا اطمینان حاصل کنید که اجزاء مختلف محصول (وبسایت، موبایل) به درستی کار می‌کنند و دسترسی‌پذیری بهینه دارند.
آزمون با افراد واقعی:
اگر امکانش وجود داشته باشد، بازخورد افراد واقعی (کاربران واقعی با محدودیت‌ها) بسیار ارزشمند است و می‌تواند به بهبود دسترسی‌پذیری کمک کند.
با این مراحل، می‌توانید دسترسی‌پذیری وبسایت خود را بررسی کرده و اقدامات مورد نیاز را برای بهبود آن انجام دهید.
برای اجرای آزمون دسترسی‌پذیری بر روی وبسایت یا اپلیکیشن خود، می‌توانید مراحل زیر را دنبال کنید:
با این مراحل، می‌توانید وبسایت خود را بررسی کرده و اطمینان حاصل کنید که بهینه‌سازی‌های لازم برای دسترسی‌پذیری بهینه انجام شده‌اند.
امیدوارم که این مقاله نه تنها یک گام مهم در جهت ایجاد فضاها و محصولاتی شایسته برای تمام افراد باشد، بلکه نیز به عنوان نقطه شروعی موثر برای افزایش شناخت طراحان و افراد فعال در حوزه توسعه محصول در زمینه دسترسی پذیری عمل کند.
