رنگ‌بندی صفحات وب

    مقدمه

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

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

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

    مزایای این استاندارد

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

    مثال‌هایی دربارۀ این استاندارد

 پیکرگونه‌ای که از رنگ و متن برای مشخص کردن زمین‌های ضروری استفاده می­کند

یک پیکرگونه شامل زمینه‌های ضروری و غیرضروری است. زمینه‌های ضروری این پیکرگونۀ اینترنتی به‌وسیلۀ برچسب‌هایی که متن آن قرمزرنگ است، مشخص شده‌اند. در کنار آن، یک نقشک (آیکن) متنی با عنوان «مورد نیاز» ایجاد می‌شود. در این پیکرگونۀ اینترنتی این نقشک (آیکن) به نحوی عمل می‌کند که زمینه‌های ضروری به‌وسیلۀ ابزارهای کمکی از سایر زمینه‌ها، بدون نیاز به تشخیص رنگ قرمز توسط کاربران کم‌توان، تشخیص داده می‌شوند.

. آزمون

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

. غیرفعال کردن عناصر

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

1.    هماهنگی عناصر رنگی در راستای انتقال اطلاعات

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

1-1. مثال: گردهمایی برخط (آنلاین)

برای نمونه، یکی از راهکارها این است که در هنگام برگزاری یک هم‌اندیشی یا گردهمایی برخط (آنلاین)، محیط نمایش سه قسمت شود و به‌صورت دیداری بین قسمت‌ها یک پردۀ رنگی قرار گیرد. می‌توان هنگام نمایش هر پرده، در فاصلۀ میان دو قسمت، از یک پروندۀ (فایل) ویدئویی زنده مبتنی بر وب، یک جایگزین متنی تحت عنوان کدهای شناسایی ایجاد کرد. در این مثال، این گردهمایی مجازی (وبینار) دارای سه تِرک یا بخش است. همچنین می‌توان از کدهای T1 تا T3 برای ایجاد میان‌پرده یا میان‌قسمتی متنی در کنار پروندۀ (فایل) ویدئویی زندۀ گردهمایی مجازی (وبینار) استفاده کرد تا افراد نابینا بتوانند این قسمت‌ها را از یکدیگر تفکیک کنند.

می‌توان برای چنین مثالی از جایگزین‌های متنی تحت عنوان Color Code بهره برد. در این روش، از جایگزین‌های متنی در میان بخش‌های یک، دو یا سه گردهمایی مجازی (وبینار) استفاده می‌شود؛ برای مثال، میان‌قسمت 1 در ابتدای بخش یک، میان‌قسمت 2 در انتهای بخش یک و ابتدای بخش دو و همین‌طور میان‌قسمت 3 در انتهای بخش دو و ابتدای بخش سه.

1-2. مثال: پیکرگونۀ اینترنتی

در مثال بعدی، یک پیکرگونۀ اینترنتی را فرض می‌کنیم که دارای چند زمینۀ ضروری است. در این پیکرگونۀ اینترنتی زمینه‌های ضروری با رنگ قرمز نمایش داده شده‌اند. برای بهینه‌سازی دسترسی در این پیکرگونه‌ها از نگرگاه رنگ، در کنار زمینه‌های کلیدی یا ضروری یک علامت ستاره قرار داده شده است. در پایین این پیکرگونۀ اینترنتی عبارتی به‌صورت متنی درج شده است؛ تحت این عنوان که: «تمامی زمینه‌هایی که در کنارشان علامت ستاره است، کلیدی و ضروری هستند و باید پُر شوند.» در این شرایط، درصورتی‌که یک فرد کم‌توان حتی توانایی تشخیص رنگ زمینه‌های ضروری قرمز را نداشته باشد، می‌تواند از طریق ابزارها یا نرم‌افزارهای متن‌خوان و شنیدن نویسه (کاراکتر) متنی ستاره -هشداری که در پایین زمینۀ پیکرگونۀ اینترنتی نوشته شده است- متوجه زمینه‌های ضروری بشود.

1-3. مثال: برنامۀ کاربردی

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

در چنین مواقعی که دو کلید یا دکمه یک پیکرگونۀ اینترنتی را مدیریت می‌کنند، توصیه می‌شود که در کنار کلیدها و دکمه‌های رنگی از label ها استفاده شود؛ این label ها می‌توانند در داخل دکمه‌های رنگی به‌صورت متنی نوشته شده باشند. توصیه می‌شود label ها به‌صورت جایگزین متنی ایجاد شوند و برای نرم‌افزارهای متن‌خوان خوانا باشند. در غیر این صورت، می‌توان یک جایگزین متنی به‌نسبت بلند در کنار دکمه ایجاد کرد که به کاربر اطلاع دهد که دکمۀ NEXT جهت رفتن به بخش بعدی و دکمۀ CANCEL برای بازگشت به زمان قبل از پُر کردن زمینه‌های اینترنتی جاسازی شده است.

2.    مبانی رنگ‌بندی در پیکرگونه‌های اینترنتی

بر اساس دستورالعمل G205، برای اینکه طراحان و توسعه‌دهندگان وب اطمینان حاصل کنند که محتوای طرح آن‌ها به‌لحاظ کیفیت و کمیت رنگ در فرم‌های اینترنتی، قالب کنترل‌ها یا label ها قابل شناسایی است؛ باید چارچوبی را در نظر بگیرند که افراد کم‌توان نیز بتوانند به‌راحتی اطلاعات برگرفته از محتوای داخل یک فرم اینترنتی را درک کنند. حال اینکه چگونه این اتفاق بیفتد، از چه طریقی یا با چه نوع ارتباطی، یک بحث دوطرفه است؛ زیرا ممکن است یک فرد نابینا از صفحه‌نمایش‌های مخصوص بریل یا زرنگار استفاده کند و یا از امکانات دیگر. آنچه مسلم است، طراح و توسعه‌دهندۀ وب باید امکان انتقال اطلاعات را به کاربر، چه به صورت شنیداری چه حسی یا حتی دیداری، ایجاد کند. یکی از این راهکارها استفاده از زبان برنامه‌نویسی html است. به این صورت که در هنگام ایجاد یک text box و یک label به‌عنوان یکی از element های فرم‌های اینترنتی، اگر به پُر شدن label و text box توسط کاربر نیاز باشد، باید واژۀ ضروری یا require را در کنار عنوان برچسب text box قرار داد. برای مثال، نام: (ضروری). عبارت «ضروری» را می‌توان با هر شکل، font، font size یا font color گذاشت؛ اما باید عبارت داخل پرانتز گنجانده شود تا به‌واسطۀ نرم‌افزار متن‌خوان برای افراد دچار محدودیت بینایی، قابل تشخیص باشد.

3.    استفاده از نشانه‌گذاری متنی برای تشخیص رنگ‌بندی عناصر

در این بخش از استاندارد، به راهنمای G138 پرداخته می­شود: استفاده از نشانه‌گذاری برای مشخص کردن جایگاه رنگ‌ها در صفحه.

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

می‌توان در صفحات وب برای هر یک از عناصر، چه محتوایی و چه ساختاری، یک برچسب را برای نشانه‌گذاری آن عنصر به‌لحاظ رنگ‌بندی ایجاد کرد؛ به‌طوری‌که یک کاربر نابینا بتواند به‌وسیلۀ VOICE و با کمک نرم‌افزارهای متن‌خوان، رنگ‌بندی ساختار صفحات وب را متوجه شود. همچنین یکی از راه‌های ایجاد تمایز بین متون رنگی در فرم‌های اینترنتی و سایر ساختارهای صفحات وب، استفاده از Semantic Markup هایی است که زبان HTML تعیین کرده است؛ در این صورت، کاربرانی که به کمک نرم‌افزارهای متن‌خوان صفحات وب را می‌خوانند، با ایجاد تغییرات و شناسایی Semantic Markup ها متوجه تغییرات رنگی یا مفاهیمی می‌شوند که طراحان درصدد ارائۀ آن‌ها به کاربران بوده‌اند.

Semantic Markup ها عبارت‌اند از: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM و غیره. همان‌طور که مشخص است، این‌ها قابلیت‌های متفاوتی را به زبان HTML می­دهند. این قابلیت­ها به‌وسیلۀ نرم‌افزارهای متن‌خوان قابل شناسایی هستند؛ برای مثال، EM نشان‌دهندۀ تأکید و STRONG نشان‌دهندۀ تأکید بیشتر است؛ یا DFN یک اشارۀ قوی یا استناد است و CODE برای تعیین یک قطعه کد کامپیوتری در صفحۀ وب استفاده می‌شود. وجود این نمادهای HTML کمک می‌کند که کاربران کم‌توان بدون نیاز به تشخیص رنگ با مهم و اهم محتوا بیشتر آشنا شوند.

4.    استفاده از تضادهای رنگی بالا برای تشخیص عناصر

در این قسمت از استاندارد، به دستورالعمل G183 پرداخته می­شود که بر استفادۀ نسبت 3 به 1 در تضاد رنگی یا کنتراست عناصر موجود در صفحات وب، نسبت به پس‌زمینه، دلالت دارد. همچنین در این بخش، نگاه ویژه­ای به عنصر Link (پیوند) خواهد شد و تمرکز خاصی بر پیوندها (لینک­ها) یا کنترل­هایی خواهد بود که باید به‌لحاظ رنگ‌بندی برای استفادۀ کاربران قابل شناسایی باشد.

مبحثی که باید در این استاندارد تأکید می‌شود، این است که باید تضاد رنگی میان محتوا و پس‌زمینه نسبت 3 به 1 یا بیشتر باشد؛ به‌خصوص زمانی که از عنصر پیوند (Link) استفاده می­شود.

باید توجه داشت، حتی زمانی که کاربر پیوند (Link) را انتخاب می‌کند نیز باید این تناسب حفظ شود؛ گرچه قالب پیوند (Link) با قالب سایر عناصر موجود در متن متفاوت باشد. به‌لحاظ قالب، Bold، Italic یا underline دارد و این تفاوت میان پیوند (لینک) و سایر موضوع‌ها و متن‌ها در صفحۀ وب برای ابزارهای کمکی و متن‌خوان قابل شناسایی‌اند. همچنین می‌توان از افزایش اندازۀ قلم‌ها (فونت­ها) برای ایجاد جایگزین برای رنگ استفاده کرد.

یکی دیگر از مواردی که باید دربارۀ پیوندها (Link) توضیح داده شود و طراحان و توسعه‌دهندگان وب لازم است همواره به آن توجه داشته باشند، این است که پیوندها (Link) همگی سیاه و سفید نیستند و رنگ‌های آن‌ها بیشتر آبی است؛ درحالی‌که برخی افراد فقط قادر به تشخیص سیاه و سفیدند. بنابراین هم باید تضاد رنگی پیوندها (Link) به نسبت 3 به 1 و بالاتر باشد و هم اینکه برای ساده‌سازی خوانش افراد کوررنگ لازم است از Underline استفاده شود. اگر پس‌زمینۀ سیاه، پیش‌زمینۀ یک پیوند (Link) باشد و به صورت کد # رنگ Link با پس‌زمینه تنظیم گردد، باید عددی مثل 3366 را در نظر گرفت تا Link برای افرادی که دچار محدودیت­های تشخیص رنگ هستند، قابل تشخیص شود.

5.    استفاده از الگوهای خاص برای تشخیص عناصر رنگی

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

5-1. مثال: نقشۀ مراکز شهری

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

5-2. مثال: نقشۀ حمل‌ونقل شهری

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

5-3. مثال: روندنما (فلوچارت)

در یک مثال گویاتر، روندنمایی (فلوچارتی) وجود دارد که از ابتدا تا انتهای یک فرایند کاری را شرح می‌دهد. روندنما (فلوچارت) خواهی‌نخواهی دارای الگوها و شکل­ها با رنگ‌های مختلف است. این شکل­ها و رنگ‌های مختلف در یک پیش‌زمینۀ سبزرنگی قرار دارند همچنین روندنما (فلوچارت) را پیکان­ها که خود نوعی الگو هستند، هدایت می‌کنند تا به گام­های بعدی برود.

5-4. مثال: بازی تعاملی تحت وب

مثال پایانی این بخش محتوا، یک بازی تعاملی تحت وب است. این بازی 4 بازیگر دارد که با هم در حال بازی کردن هستند و هم‌زمان از رنگ‌ها و الگوهای مختلف استفاده می­کنند. این مثال­ها درواقع همچون راهکارهایی است که یک طراح وب در هنگام استفاده از الگوهای رنگی می‌تواند پیش رو داشته باشد. این راهکارها همچنین می‌توانند استفادۀ بهنگام از جایگزین‌های متنی باشد یا کاربرد Semantic های Html یا سایر مباحثی که در این استاندارد به آن‌ها اشاره شد. حتی می‌توان استفاده از تضادهای رنگی را در پس‌زمینه یا پیش‌زمینه در نظر گرفت.

6.    استفاده از CSS برای تغییر رابط‌های کاربری

در این قسمت از استاندارد، دستورالعمل C15 بررسی می­شود. از CSS برای تغییر ارائه رابط کاربری استفاده می‌شود؛ زمانی‌که به تمرکز مبتنی بر تعامل بین عناصر نمایش‌یافته در صفحۀ وب نیاز است. گاهی عناصر دیداری‌ای که در صفحۀ وب نمایش داده می‌شوند، مانند دکمه­ها و زمینه‌ها، عناصری هستند که تمرکز روی آن‌ها با تعامل با آن‌ها توأم است. گاهی ممکن است این عناصر با حرکت موشواره (Mouse) روی آن‌ها تغییر کنند؛ یا می‌توان با موشواره (Mouse) این عناصر را برجسته کرد؛ مانند متمایز کردن یک متن از سایر متن­ها در صفحات وب. یکی از مواردی که در این‌گونه زمینه­ها می‌تواند کمک کند، استفاده از پرونده‌های (فایل‌های) CSS است که صفحۀ وب همراه خود دارد.

6-1. مثال: تمرکز روی پیوندها (Links)

مثال‌هایی که در این بخش وجود دارد، تأمل‌برانگیز است. این مثال‌ها دربارۀ تمرکز روی پیوندها (Linkها) است. همان‌طور که مشخص است، زمانی‌که موشواره (Mouse) و صفحه‌کلید (کیبورد) روی یک پیوند (Link) تمرکز می‌کنند، ممکن است رنگ پیوند (Link) تغییر کند؛ به همین دلیل تعامل با صفحات وب حتی از نگرگاه رنگ‌بندی هم بسیار مهم است.

حتی می­شود به‌وسیلۀ کد Html  به صفحۀ وب دستور داد که هر زمان موشواره (Mouse) روی پیوند (Link) قرار دارد، هم پس‌زمینۀ صفحه و هم رنگ پیوند (Link) تغییر کند. اما در هر حال، نسبت 3 به 1 (یا بیشتر) کنتراست و تضاد رنگی میان رنگ پس‌زمینه و پیوند (Link) باید همچنان حفظ شود.

 

0 پاسخ

دیدگاه خود را ثبت کنید

دوست دارید به بحث ملحق شوید؟
نظرات خود را با ما در میان بگذارید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *