مقدمات دسترسی‌پذیری: طراحی برای نقص‌ بصری

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

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

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

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

• شنوایی
• شناختی
• عصبی
• فیزیکی
• گفتاری
• بصری

این راهنما قصد دارد روی نواقص مورد آخر یعنی بصری صحبت کند که مطمئنا یکی از موارد بسیار شناخته شده برای ناتوانی در سطوح مختلف است. Cathy O’Conner نویسنده و طراح در مجله Smashing می گوید که در بین هر دو میلیون مشتری در سراسر جهان دویست هزار نفر وجود دارند که از طراحی که ساده مشاهده شود، فایده می برند. 

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

کور رنگی

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

بینایی کم

کم بینی یا بینایی با درجه کم می تواند حالتی است که در آن فرد به صورت جزئی -یا تار- می‌تواند در یک یا هر دو چشم شئ را مشاهده کند. حدود ۴ درصد از مردم جهان به این مشکل مبتلا هستند که جمعیتی حدود ۲۴۶ میلیون را شامل می شود.

کوری

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

مردم تفاوت‌های وب را درک می‌کنند

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

مشاهده صفحه اصلی تامبلر با اختلالات بینایی

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

بسته به نوع و میزان اختلال  بینایی، یک فرد ممکن است که سایت را در راه های مختلف مشاهده کند:

۱- بینایی بسته در پیرامون (کوری تدریجی)

۲- بینایی بسته در قسمت‌های بزرگ (رتینوپاتی دیابتی)

۳- از دست دادن تیزبینی (بینایی تار)

۴- مشکل روح

۵- کور رنگی تری پاناپی

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

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

تغییرات تاثیرپذیری ادراک در استفاده پذیری

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

ویژگی‌های غیرقابل دسترس

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

در تصویر بالا قسمت راست و چپ را با همدیگر مقایسه کنید، خواهید دید با داشتن اختلال بینایی المان‌های قسمت راست به سختی مشاهده می شود. 

از دست رفتن مفهوم رنگ‌ها

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

تمایز قائل بودن بین رنگ های زرد و قرمز برای فردی که دچار بیماری  protanopia شده بسیار دشوار و سخت است.

نمایش محتوا

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

• بزرگ شدن اندازه متون
• شخصی سازی کنتراست رنگ‌ها
• استفاده از خوانندگان صفحات یا Screen Readers
• استفاده از زیرنویس یا برچسب برای ویدیوها
• استفاده از متن جایگزین برای توصیف یک تصویر

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

ExtensionAccessibility Developer Tools: این افزونه به تب المان‌ها در قسمت Chrome Developer Tools یک سایدبار دسترسی‌پذیری قرار می‌دهد که می توانید تنظیمات مربوطه را با آن انجام دهید.

High Contrast: دنیای اینترنت را با استفاده از رنگ‌های مورد نظر خود مشاهده کنید.

ChromeVox: با استفاده از این افزونه می توانید سرعت، تطبیق پذیری و امنیت را برای کاربرانی که با اختلالات بینایی همراه هستند، بیاورید.

برای مثال افزونه High Contrast می تواند به شما این امکان را بدهد تا رنگ‌های مختلفی با کنتراست بالا را انتخاب کنید، در زیر می توانید مثالی از استفاده این افزونه را مشاهده کنید:

همانطور که در بالا مشاهده می کنید افزونه مرورگر می تواند:

• کنتراست را افزایش دهد
• روی سیاه و سفید تعیین شود
• رنگ‌ها را معکوس کند
• سیاه و سید را معکوس کند
• از رنگ زرد روی رنگ سیاه استفاده کند

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

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

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

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

۱- محتوا و ساختار را جدا کنید

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

براساس W3C برای اینکه بتوانیم متدهای کاوش در وبسایت را فعال سازی کنیم (کاوش با اسکرین ریدر یا کیبورد) که توسعه دهنده مطمئن شود که به گونه ای کدنویسی کرده که لایه نمایش از ساختار مستقلی برخوردار است. 

استفاده از یک ساختار محکم با استفاده از تگ‌های مربوط مانند header، footer و… نیز می تواند به اسکرین ریدرها برای خواندن بهتر اطلاعات کمک کند.

۲- فراهم کردن متن‌های جایگزین

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

در مثال زیر می توانید یک نمونه بسیار مفید و درست از استفاده از متن جایگزین را مشاهده کنید. 

 Ability.net برای اینکه بتوانیم قابلیت دسترسی پذیری یک وبسایت را بهتر کنیم پنج قاعده اصلی در استفاده از خاصیت alt را ارائه می کند:

1. هر تگ img باید یک خاصیت alt داشته باشد.
2. اطلاعات را توصیف کنید، نه خود تصویر.
3. اجبار برای تعیین یک متن جایگزین در تصاویر وبسایت را فعال کنید.
4. تصاویری که حاوی اطلاعات هستند باید حتما از متن‌های جایگزین برخوردار باشند.
5. در تصاویر تزئینی خاصیت alt را خالی بگذارید.

۳- از رنگ برای انتقال اطلاعات خودداری کنید

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

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

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

۴- بجای رنگ از بافت‌ها استفاده کنید

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

کاربرانی که کور رنگی دارند این موارد را بدین صورت مشاهده می‌کنند

بنابراین زمانی که از رنگ‌هایی در چارت‌ها و گراف‌ها استفاده می کنید بسیار مهم است که صرفا از یکسری رنگ که مشابه همدیگر هستند دوری نمایید، بدین صورت افراد می توانند بهتر رنگ‌ها را از همدیگر تشخیص دهند. این مورد نه تنها برای افرادی که کور رنگی دارند بلکه برای افراد مختلف دیگر نیز می تواند کمک بسیار بزرگی باشد. اگر به بافت‌های برچسب‌ها در Trello نگاه کنید چنین مسئله ای نیز به خوبی رفع می شود.

5. از طرح‌های یک رنگ استفاده کنید

با استفاده از طرح‌های یک رنگ شما می توانید با استفاده از یک رنگ‌، رنگ‌های متفاوتی ایجاد کنید. در اینجا می توانید طرحی را paletton.com مشاهده کنید.

تنها با استفاده از سایه‌ها می توانید نوع دیگری از رنگ را ایجاد کنید که مفهومی دیگر دارد.

۶- از رنگ‌های متنوع برای خوانایی بهتر استفاده کنید

منظور از میزان کنتراست میزان تفاوت میان یک رنگ روشن تا یک رنگ تاریک است. برای مثال این چارت کنتراست را مشاهده کنید.

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

بنابراین برای اینکه مطمئن شوید متن برای افرادی که اختلالات بینایی دارند قابل خواندن است، WCAG یک راهنما برای درجه کنتراست ایجاد کرده است. براساس این راهنما بین متن و پس زمینه باید به میزان 4.5:1 کنتراست وجود داشته باشد. در زیر می توانید مثالی از این حالت که توسط وبسایت accessebility.psu.edu طراحی شده را مشاهده کنید.

طراحی جامع، محصول را برای همگان بهتر می‌کند

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

منبع