دسترسی‌پذیری چیست؟ و چطور یک وبسایت در دسترس داشته باشیم؟

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

دسترسی‌پذیری (Accessibility) چیه؟

دسترسی‌پذیری یا Accessibility یا به اختصار A11Y، قابلیت استفاده برای تمام افرادی هست که با محصول ما تعامل دارند.شاید براتون این سوال ایجاد شده که چرا A11Y؟ A حرف اول این واژه و Y حرف آخر اون هست و 11 تعداد حروف بین AوY هست. قوانین دسترسی‌پذیری برای کمک به افراد دارای معلولیت وجود داره، اما ما باید به عنوان طراح سعی کنیم برای همه طراحی کنیم تا نیازهای دسترسی تمامی کاربرهای بالقوه‌مون رو پوشش بدیم.

ماهیت نادیده گرفته شده و درک نادرست دسترسی‌پذیری

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

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

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

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

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

زمینه‌های کلیدی برای سنجش

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

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

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

شنوایی (Auditory): ناتوانی‌های شنوایی که درجه‌های شدت مختلف داره، از کم شنوایی تا ناشنوایی کامل.

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

یادگیری (Learning): همچنین مهمه که به یاد داشته باشید که همه‌ی ناتوانی‌ها جسمی نیستن. یادگیری و ناتوانی‌های شناختی هم می‌تونن روی دسترسی تأثیر  بذارن مثل اوتیسم، دیسلکسیا، دیسکلکولیا

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

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

برای مثال نوید ساعت 3 بعدازظهر در شهری که هرگز به اون نرفته، مصاحبه داره و باید از ماشین دوستش استفاده کنه. دوستش دیر ماشین رو بهش می‌رسونه. متاسفانه طوفان برف هم شروع شده، بدتر از اون، بنزین خودرو کمه، بنابراین نوید باید باک رو در راه پر کنه. بنابراین، عواملی که مانع نوید می‌شن و ناتوانی‌های او رو به عنوان یک کاربر شکل میدن عبارتند از:

• ناآشنایی با جاده
• دیرحرکت کردن از  مبدا
• طوفان برف
• سوخت کم

نوید چهار مانع داره که سرعتش رو کم می‌کنه. او به این فکر می‌کنه که با مصاحبه‌کننده‌ها تماس بگیره، ولی تصمیم می‌گیره روی رانندگی متمرکز بشه. با این حال، یکی از مواردی که به نفع نویده، GPS اتومبیلش هست. فرمت صفحه‌ی نمایش بزرگش به هم ریخته نیست. یک پیکان قرمز روشن که کاملاً متضاد با صفحه‌نمایش سبز روشن هست، مسیرش رو در یک نگاه با حداقل متن و تصویر نشون می‌ده. وقتی سیستم اعلام می‌کنه پمپ بنزین نزدیکه، احساس بهتری داره. بعداز سوخت‌گیری دوباره به جاده می‌رسه، از پارک مرکزی شهر می‌گذره که GPS اون رو به صورت یک نماد بزرگ نشون می‌ده. مصاحبه‌کننده از  پارک مرکزی شهر به عنوان یک نقطه‌ی عطف اسم برده بود. اون‌ها در این نزدیکی هستن و نوید نفس راحتی می‌کشه. حتی با وجود طوفان برف، او ساعت 2:50 بعداز ظهر در محل مصاحبه حاضر هست! طراح‌های جی پی اس به خاطر طراحی کاربردپذیر و آسون سزاوار تشکر هستن.

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

شما می‌تونید از راه‌های زیادی برای دسترس‌پذیر شدن وب‌سایتتون استفاده کنید. برای شروع، در اینجا چند نکته‌ی ساده وجود داره که می‌تونه کمک کنه مطمئن بشید که خیلی از افراد دارای معلولیت می‌تونن به راحتی به سایت شما دسترسی داشته باشن:

• اگه از CMS استفاده می‌کنید، موردی رو انتخاب کنید که از استانداردهای دسترسی‌پذیری پشتیبانی می‌کنه. برای مثال دروپال (Drupal) و وردپرس (wordpress) از این موارد پشتیبانی می‌کنن. اگه تصمیم دارید به جای ایجاد یک قالب (theme)، یک الگو (template) رو اصلاح کنید، مطمئن بشید که قالب با در نظر گرفتن دسترسی‌پذیری طراحی شده. با این روش میشه در زمان، تلاش و هزینه صرفه‌جویی کرد.
• از تگ‌های header برای ایجاد عنوان در متنتون استفاده کنید. در حالت ایده‌آل، مطمئن بشید که از CSS استفاده می‌کنید تا این موضوع توی کل سایت ثابت باشه. سعی کنید سطح header‌ها رو به ترتیب رعایت کنید و از یه سطح به سطوح بعدی نپرید (برای مثال، H1 به H2، به جای H1 به H4). این می‌تونه نرم‌افزار صفحه‌خوان رو گیج کنه. کاربرهایی که دارای اختلالات بینایی شدیدتر هستن ممکنه با استفاده از صفحه نمایش یا پایانه بریل قابل بازخوانی به سایت شما دسترسی پیدا کنن که به صفحه‌خوان‌ها بستگی داره.
• از متن جایگزین (Alt text) در تصاویرتون استفاده کنید. اگه از تصاویر برای بهبود محتوا استفاده می‌کنید، یک صفحه‌خوان باید اون‌ها رو توضیح بده و متن جایگزین (Alt text) برای این کار هست. با این حال، اگه تصویر شما صرفاً برای تزئین هست و هیچ ارزش دیگه‌ای (غیر از ظاهر خوب) اضافه نمی‌کنه، باید از متن جایگزین صرف نظر کنید تا کسی که محتوای سایت رو با صفحه‌خوان دنبال می‌کنه گیج نشه.
• برای پیوندها (link) یک استراتژی داشته باشید. صفحه‌خوان‌ها گاهی اوقات روی پیوندها لکنت دارن و روی حرف اول متوقف میشن. درنتیجه مهمه که پیوندهای «اینجا را کلیک کنید» توی متن پراکنده نباشن. بهترین توضیحات پیوند دارای یک توضیح متنی قبل از پیوند و سپس یک نام منحصر به فرد برای پیوند است. (برای مثال، «برای خواندن مقاله‌های تخصصی بیشتر حوزه‌ی UI/UX به بخش وبلاگ وب‌سایت آموزش برنامه‌نویسی سکان آکادمی سر بزنید. ») یک نشونه‌ی بصری (مثل نماد PDF) با پیوندها رو در نظر بگیرید تا مشخص بشه پیوند چه چیزی رو ارائه می‌کنه. از خطوط زیر (underlines) روی پیوندها استفاده کنید (اون‌ها به افراد کوررنگ کمک می‌کنن پیوندها رو از متن تشخیص بدن). برای کمک به مکان‌نمای ماوس، پیوندهای منو رو روی ماوس برجسته کنید.
• رنگ‌ها رو با دقت انتخاب کنید؛ اگه شک دارید، طرح‌های رنگی خودتون رو با بعضی از افراد کوررنگ آزمایش کنید. کوررنگی یک ناتوانی فوق‌العاده رایجه و پالت اشتباه می‌تونه خوندن متن شما یا پیمایش در سایت رو برای افراد کوررنگ سخت کنه. همچنین باید مطمئن بشید که سطوح مناسب و باکیفیتی از تضاد رنگی (Contrast) بین متن و پس‌زمینه ارائه می‌کنید. برای مثال، افراد مسن برای دیدن متن مشکل دارن مگر اینکه کنتراست بالایی داشته باشه. برای چک کردن تضاد رنگی و همینطور برای چک کردن پالت رنگی برای افرادی که کوررنگی دارن وبسایت‌های زیادی وجود داره، وبسایت مورد علاقه‌ی من Coolors هست.
• موقع ارائه‌ی دستورالعمل فقط به رنگ چیزی اشاره نکنید. برای مثال «روی دکمه سبز رنگ کلیک کنید» برای افراد کوررنگ مفید و کارساز نیست. به جای تکیه بر رنگ‌ها از اشکال و فرم‌ها برای کمک به راهنمایی کاربرها استفاده کنید برای مثال «روی دکمه دایره‌ای کلیک کنید».
• با استانداردهای ARIA (Accessible Rich Internet Applications) آشنا بشید و یاد بگیرید که در صورت لزوم از اون‌ها استفاده کنید.
• به طراحی فرم‌ها (Forms) فکر کنید. صفحه‌خوان‌ها می‌تونن با فرم‌ها مشکل داشته باشن. fieldها رو برچسب (tag) بزنید و از برچسب برای ارائه‌ی توضیحات به صفحه‌خوان استفاده کنید. مطمئن بشید که ترتیب tab‌ها در فرم‌ها از ترتیب بصری پیروی می‌کنه. اگه این کار انجام نشه، احتمال اینکه صفحه‌خوان field‌ی رو از دست بده زیاده. مطمئن بشید که یک نقش ARIA (Accessible Rich Internet Applications) مورد نیاز یا غیر ضروری رو نیز به هر field اختصاص بدید. صفحه‌خوان‌ها نمی‌تونن، ستاره، برای فیلدهای اجباری، رو تشخیص بدن.
• از جدول‌ها برای چیدمان خودداری کنید. صفحه‌خوان‌ها می‌تونن جدول‌ها رو مدیریت کنن، اما شروع به توضیح تعداد ستون‌ها و ردیف‌های موجود می‌کنن. اما وقتی جدول صرفاً یک تکنیک چیدمان باشه، می‌تونه به طرز آزاردهنده‌ای حواس‌تون رو پرت کنه. جدول‌ها رو فقط برای ارائه‌ی داده‌ها استفاده کنید. مطمئن بشید که از ویژگی HTML scope برای توضیح روابط بین سلول‌ها استفاده می‌کنید.
• یاد بگیرید که از عناصر HTML مناسب برای لیست‌ها استفاده کنید و اون‌ها رو در همون خط متن قرار ندید. این به صفحه‌خوان کمک می‌کنه تا لیست‌ها رو تجزیه کنه.
• ماوس رو کنار بذارید و ببینید آیا سایت شما فقط با صفحه کلید کار می‌کنه؟ افراد دارای ناتوانی حرکتی اغلب با استفاده از trackpads کار می‌کنن. اون‌ها ممکنه به یک mouth stick یا یک دستگاه ورودی تک سوئیچ نیاز داشته باشن. یا ممکنه مجبور بشن فقط به صفحه کلیدشون تکیه کنن. به این فکر کنید که رد کردن بخش‌هایی از محتوا رو برای کاربر آسون کنید، همچنین فراموش نکنید scroll کردن بدون ماوس واقعا آزاردهنده هست.
• درباره‌ی روش ارائه‌ی محتوای پویا فکر کنید. ویدیو رو به صورت خودکار پخش نکنید (چون تداخلش با صفحه‌خوان می‌تونه خیلی آزاردهنده باشه). استانداردهای ARIA می‌تونن به Overlay‌ها، pop up‌ها، lightbox‌ها و ... کمک کنن. اگه از نمایش اسلاید استفاده می‌کنید، مطمئن بشید که متن جایگزین (Alt text) روی همه‌ی تصویرها وجود داره و کاربرها می‌تونن نمایش رو از طریق صفحه‌کلید هدایت کنن.
• نشونه‌گذاری‌تون رو در وب‌سایت استانداردهای W3C تأیید کنید. مطمئن بشید که HTML و CSS شما با فناوری‌های کمکی در تضاد نیست. این کمک می‌کنه تا مطمئن بشید همه‌ی مرورگرها کد شما رو به درستی می‌خونن.
• از flash اجتناب کنید (فرایند پیاده‌سازی انیمیشن توسط Flash). این مورد به سختی نیاز به گفتن داره، چون دیگه پشتیبانی نمی‌شه. اگه هنوز اجزای Flash رو توی وب سایتتون دارید، اون‌ها رو با فناوری در دسترس‌تر (ایمن، سبک و مدرن) حذف و جایگزین کنید.
• رونویسی برای فایل‌های صوتی ارائه بدید. کاربرهای کم‌شنوا نمی‌تونن از نرم‌افزار برای خوندن صداها استفاده کنن، بنابراین، به اون‌ها کمک کنید و متنی رو وارد کنید.
• به طور مشابه، در ویدیو هم برای افراد دچار معلولیت شنوایی زیرنویس ارائه کنید.
• روی محتوای قابل خوندن تمرکز کنید. هرچقدر  زبان ساده‌تر باشه، خوندن اون برای کاربرهایی که مشکل یادگیری دارن آسون‌تر خواهد بود.

فن‌آوری‌هایی که دسترسی آنلاین رو تسهیل می‌کنن

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

فن‌آوری‌های رایج مورد استفاده برای تسهیل دسترسی آنلاین

• مرورگرهای وب جایگزین (Alternative web browsers)
• خط بریل برای وب (Brailler for the web)
• برنامه‌های کاربردی ردیابی چشم (Eye-tracking applications)
• عصای سر (Head wands)
• میله‌های دهان (Mouth sticks)
• ذره‌بین‌های صفحه نمایش (Screen magnifiers)
• صفحه‌خوان‌ها (Screen readers)

ابزارهای تست دسترسی‌پذیری

علاوه بر ابزارهای W3C که در بالا عنوان شد، بسیاری از ابزارهای مختلف تست دسترسی‌پذیری به صورت آنلاین در دسترس هستن. موارد زیر مجموعه‌ی کوچیکی از این موارد هست:

• WAVE: سطح کلی دسترسی رو برای هر وب‌سایت مشخصی ارزیابی می‌کنه.
• Color Oracle: رنگ‌های سایت شما رو به شیوه‌ای مشابه نحوه‌ی مشاهده صفحه توسط کاربر مبتلا به کوررنگی نمایش میده.
• Image Analyzer: تصاویر وب‌سایت رو بررسی می‌کنه و تطابقشون رو با استانداردهای دسترسی‌پذیری آزمایش می‌کنه.

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

جان کلام

طراحی با در نظر گرفتن دسترسی‌پذیری کاربر به این معنیه که همه‌ی کاربرها رو به عنوان افرادی که نیاز به توجه دارن تصور کنیم. گرچه تعداد کاربرهای دارای ناتوانی‌های جسمی و شناختی کم نیست، اما ممکنه در زمان دسترسی به سایت‌ها حواس همه‌ی کاربرها (دارای معلولیت یا سالم) پرت بشه. حتی کاربرهای به اصطلاح «کاملاً توانا» که توی محیط ساکت با مانیتورهای بزرگ نشستن اگه مجبور بشن تلفنشون رو جواب بدن باید با یک دست توی وب‌سایت ما حرکت کنن و احتمالا با مشکل مواجه میشن.

ایجاد طرح‌های در دسترس به معنای برنامه‌ریزی و ساختن با توجه به این موضوعه. ما نکات مختلفی رو در اختیار داریم، از استفاده از تگ‌های header و متن جایگزین (alt text) روی تصاویر گرفته تا داشتن استراتژی پیوند. با بررسی دقیق، می‌تونیم تعیین کنیم که چه چیزی برای بهینه‌سازی دسترسی لازم هست و طرح‌های خودمون روی کاربرهای واقعی در این زمینه آزمایش کنیم.

هیچ کس کامل نیست! با این حال، با طراحی برای همه توی چنین دنیای ناقصی، گام دیگه‌ای به ساخت UX‌های بهتر نزدیکتر می‌شیم.