وب، در دسترس برای همه!

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

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

web accessibility means that EVERYONE can use the Web.Accessibility is about EVERYONE.

W3C

کنسرسیوم وب (World Wide Web Consortium یا W3C) کنسرسیومی (ائتلاف چندین شرکت به صورت هماهنگ و دارای هدف یکسان) است که استانداردهای نرم‌افزاری لازم را برای وب تولید می‌کند. دلیل وجودی این کنسرسیوم کسب اطمینان در مورد سازگاری و توافق میان اعضای شرکت‌های مختلف در زمینهٔ استفاده از استانداردهای نو است.

هدف از معرفی W3C این بود که به اصل‌هایی که برای وب مشخص کرده اند اشاره کنم، برای مطالعه بیشتر میتوانید World Wide Web Consortium و یا ABOUT W3C را مطالعه کنید. در اهدافی که این کنسرسیوم دنبال می‌کند یکسری اصل برای دیزاین‌های وب مشخص کرده است که می‌توانید لیست آنها را در W3C MISSION مطالعه کنید ولی من به دو اصلی که مربوط به موضع این مقاله است اشاره می‌کنم.

۱. وب برای همه (Web for All)

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

۲. وب برای همه دستگاه‌ها (Web on Everything)

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

نکته: W3C به این صورت کار می‌کند که ابتدا موضوعات مهمی که نیاز است برای آنها استانداردی مشخص شود مطرح می‌شوند و پروپوزال آنها ایجاد و به گروهی assign می‌شود، سپس یک راهنما برای آن ایجاد و بازبینی می‌شود و در نهایت توصیه‌ها و پیشنهادات آنها طی یک راهنما منتشر می‌شود.

Web Content Accessibility GuidelinesWCAG) 2.1

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

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

1. Perceivable
2. Operable
3. Understandable
4. Robust
5. Conformance
6. Glossary
7. Input Purposes for User Interface Components

مطالعه بیشتر در رابطه با این موارد

مزایای در دسترس بودن وب ( Benefits of an Accessible Website )

۱. افزایش مارکت و تعداد مخاطبان وب (نفوذ در بازار)

۲. رشد SEO وبسایت

۳. ایجاد وجه و روابط عمومی مثبت

۴. از تبعیض و عوارضی که قانون برای برنامه‌هایی که این ویژگی‌ها را ندارند در امان خواهید بود. (این مورد در ایران بی‌معنی است!)

۵. بهبود کارایی و کدهای تمیزتر

سرفصل‌های مهم برای Web Accessibility

۱. Responsive Web Design

۲. Good Color Choices

۳. Good Typography

۴. Simple, Understandable Forms

۵. Easy To Touch

۶. Subtle Motion

Responsive Web Design / طراحی واکنش‌گرا

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

Good Color Choices / انتخاب رنگ‌های مناسب

طبق آمار از هر ۱۲ مرد یک نفر و از هر ۲۰۰ زن یک نفر کوررنگی دارد و یا به عبارتی ۵ درصد از جمعیت کوررنگی دارند. رایج ترین نوع کوررنگی  Red Deficiencies یا کوری رنگ ناشی از عدم حساسیت به نور قرمز است که باعث سردرگمی سبزی ها ، قرمزها و زردی ها می شود. علاوه بر این مورد میتوان به Green Deficiencies و Blue Deficiencies  نیز اشاره کرد که در تصویر زیر تفاوت تشخیص رنگ‌ها را می‌توانید مشاهده کنید.

برای مطالعه بیشتر مقاله Accessibility for Visual Design را مطالعه نمائید.

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

نکته ای که لازم است در نظر بگیریم این است که دیوایس‌ها و ابزارهای مختلف نیز نمایش رنگ‌ها را تغییر می‌دهند علاوه بر این در محیطی که هستیم و تاریکی و روشنی محیط نیز در نمایش و دیدن کامل رنگ‌ها تاثیر میگذارد که در این حالت Contrast رنگ‌ها می‌تواند کمک کننده خوبی باشد.

Good Typography / تایپوگرافی مناسب

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

برای اینکه تایپوگرافی مناسبی داشته باشیم باید موارد زیر را در نظر بگیریم:

۱. Font Size : معمولا سایز فونت‌ها بین ۱۶ تا ۲۰ پیکسل در نظر گرفته می‌شود ولی نکته ای وجود دارد این است که ما نباید از واحد px یا پیکسل استفاده کنیم و به جای آن از em , rem استفاده میکنیم تا بر اساس نوع مرورگر و دیوایسی که داریم سایز آن برای کاربر به سبک درست نمایش داده شود. وقتی ما از پیکسل استفاده کنیم این اختیار را از کاربر سلب میکنیم که بر اساس تنظیمات مرورگرش وبسایت ما را مشاهده کند.

۲.  Contrast : رنگ فونت در بخش‌های مختلف سایت از اهمیت ویژه ای برخوردار است که قابلیت خوانایی را کاهش ندهد.

۳. line-height : ارتفاع خط‌ها و فاصله آنها از هم، تعداد کاراکترهای هر پاراگراف هم نکته مهمی است که رعایت آن به خوانایی مطالب کمک می‌کند. به تصویر زیر دقت کنید:

۴. Text Justification : یکی از نکات مهم که معمولا به آن توجه نمیشود justify متن‌هاست که عدم رعایت آن باعث پایین آمدن خوانایی متن می‌شود. پیشنهاد میکنم که متن را justify نکنید. به تصویر زیر دقت کنید.

نکته: برای رعایت تایپوگرافی معمولا برای line-height واحد در نظر نمیگیریم مثلا نمینویسیم : line-height: 1.7em فقط مقدار عددی آن را مینویسیم همچنین font-size را داخل تگ‌های html, body مقدار 100% درنظر میگیریم که بر اساس تنظیمات browser و مقادیری که ما بر حسب em وارد کردیم تنظیم شود.

Simple, Understandable Forms / فرم‌های ساده و قابل درک

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

۱. label هایی که برای هر فیلد قرار میدهیم باید واضح باشند.

۲. مقدار placeholder هیچ وقت نمیتواند جایگزین مقدار label باشد.

۳. وقتی میخواهیم کاربر مقدار فیلدی را با شرایطی وارد کنید باید توضیحاتی برای آن بنویسیم (مثلا برای رمز عبور حداقل ۸ کاراکتر باشد.)

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

۵. مقادیری که الزامی هستند را با عبارت الزامی یا required مشخص کنیم.

به تصویر فرم زیر دقت کنید، بعد از اصلاح موارد فوق به صورت زیر خواهد بود.

Easy To Touch / راحتی استفاده در دستگاههای لمسی

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

وبسایت ما باید قابلیت این را داشته باشد که کاربر بتواند با کیبورد از آن استفاده کند، یعنی با استفاده از کلیدهای Tab بتوانیم بین منوها و بخش‌های سایت حرکت کنیم و صفحات مختلف را تغییر دهیم. در تصویر زیر که از مقاله Accessibility Help  گرفته شده است نحوه حرکت بین بخش‌های مختلف صفحه با کلیدهای کیبورد را مشخص کرده است. برای مثال توی همین وبلاگ من اگر الان کلید Tab را فشار دهید منوهای بالای صفحه انتخاب می‌شوند و میتوانید با حرکت بین آنها و فشار دادن دکمه Enter وارد بخش موردنظر شوید.

نباید با استفاده از css و javascript این قابلیت را غیرفعال کنیم.

مطالعه بیشتر: Keyboard-navigable JavaScript widgets

Subtle Motion / انیمیشن و حرکت‌های نرم

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

یک ایده جذاب میتواند این باشد که امکانی را فرآهم نمایید که کاربر انیمیشن‌های وبسایت را غیرفعال نماید یا این کار تجربه کاربر از کار با وبسایت لذت بخش‌تر خواهد بود.

در این مقاله به کلیت این موضوع پرداختم که Web Accessibility به چه موضوعی اشاره میکند و چرا باید برای ما اهمیت داشته باشد. برای اینکه این موضوع یه یک فرهنگ درست کاری تبدیل شود بهترین کار این است که از خودمون و پروژه های خودمون شروع کنیم وقتی پروژه ای  انجام می‌دهیم همانطور که زمان و هزینه ای برای واکنش‌گرا بودن پروژه در نظر میگیریم لازم است بخش Web Accessibility را نیز لحاظ کنیم و مطمئنا با اینکار به خودمون کمک کردیم.

بخش دوم مقاله: وب در دسترس برای همه! بخش دوم