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

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

دسترسی پذیری در سمت برنامه نویس

تعیین زبان صفحه (صفت lang)

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

کمک به کاربران در المان های ورودی
مثل input ها و جلوگیری از اشتباه کاربران با استفاده از راهنمایی یا تگ مربوطه مثل lable
امروزه در اکثرا ترند های طراحی Placeholder ها جایگزین شده اند و از طرفی دیگر این امکان رو هم از کاربران با مشکل بینایی میگیرند که این فرم چی هست؟ چون متن داخل placeholder یک رنگ خاکستری میشه و کنتراست کافی رو نداره پس این دست از کاربران قادر به تکمیل فرم شما نیستند .

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

امکان کنترل و عملکرد سایت شما از صفحه کلید

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

اگر کد زیر رو در CSS خودتون داشته باشید ، سایت اصلا با کیبورد قابل استفاده نیست.
{;a:focus {outline: none

دسترسی پذیری در سمت طراحان

نسبت کنتراست
نسبت کنتراست بین متن و رنگ پس زمینه حداقل 4.5 به 1 باشه باشد ، واسه این مورد عکس های پایین از توضیح بهتره

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

دسترسی پذیری در سمت محتوا

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

محتوای متن رو خواندنی و قابل فهم کنید
محتوای متنی شما نباید پیچیده گنگ باشه توضیحی دیگه ای ندارم اصلا همینم اضافه بود (:

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

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

خب اما این استاندارد ها از کجا میان ؟ این استاندارد هارو Web Content Accessibility Guidelines (WCAG) 2.0 تعیین میکنه و میتونید برید مطالعه کنید و در کل دو نوع سطح هم داره که AA و AAA است که به مراتب AAA سختر هست اما نیازی نیست و همون AA کافیه .

مورد بعدی اینه اگه دوست دارید یه چک لیست داشته باشید و با نکات دیگه ای هم آشنا شید من این سایت هارو سر زدم و میتونید کاملتر مطالعه کنید با راهنمایی کامل

WCAG 2.0 (Level AA)
Designing for accessibility is not that hard
https://webaim.org
10 Ways to Make Your Website Accessible
7 Things Every Designer Needs to Know about Accessibility
5 Easy Ways to Make Your UI More Accessible

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

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

منو دنبال کنید

اگر دوست داشتین داخل کانال شخصی تلگرام من جوین شید، گاهی موضوعات جالبی رو بدون وسواس به اشتراک میزارم تا هم دلیلی باشه برای فعالیت خارج از حوزه دیزاین و محصول، و هم پیدا کردن دوستانی که شاید باهم باورهای مشترک داشته باشیم و در آخر صفحه لینکدین من