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

1.    مقدمه

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

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

هرگاه از Large text صحبت می‌شود، منظور اندازۀ درشت و بزرگ تصاویر یا متن‌ها در صفحۀ وب است؛ تناسب این عناصر با پس‌زمینه باید نسبت 3 به 1 قلمداد شود.

عنصری به نام Logo type وجود دارد. این عنصر معمولاً بر متن‌ها یا نوشته‌هایی دلالت دارد که به‌صورت تصویر باشد و حروف آن به‌لحاظ گرافیکی به‌نوعی دچار تغییرات شده باشد.

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

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

این استاندارد بر اساس دستورالعمل 1.4.3WAI ارائه می‌شود؛ که در ادامه بیشتر تشریح خواهد شد. لازم به ذکر است، متن‌هایی که بی‌فایده و غیرضروری هستند، همواره باید از صفحۀ وب حذف شوند. همچنین عبارت‌هایی که به‌طور تصادفی مورد استفاده قرار می‌گیرند، در Background یک وب‌گاه باید حذف شوند. ضمن اینکه همیشه باید به یاد داشت که عنوان‌ها و زیرعنوان‌ها می‌توانند نسبت به متن‌ها بزرگ‌تر باشند تا دید بهتری را برای افراد فراهم کنند. همچنین برای افرادی که دچار مشکلات یا بیماری‌هایی مثل سکتۀ مغزی هستند، نیاز است در متن‌ها یا نوشته‌های صفحۀ وب امکان درشت‌تر دیده شدن فراهم شده باشد.

2.    اندازۀ استاندارد قلم

نکتۀ مهمی که طراحان و توسعه‌دهندگان وب باید به آن آگاه باشند، این است که هرچه متن نسبت به Background درشت‌تر و بزرگ‌تر باشد، دید بهتری خواهد داشت. همچنین متن درشت این قابلیت و اجازه را به نویسندگان می‌دهد که از رنگ‌بندی بهتر و متفاوت‌تری استفاده کنند. درواقع، به کمک استفاده از متن‌های درشت می‌توان به‌لحاظ طراحی، طرح بهتری از موضوع‌های متنی را در داخل صفحات وب داشت. توصیه می‌شود که اندازۀ قلم متن‌ها را در یک صفحه وب بین 14 تیره (Bold) و 18 انتخاب کنند. حتی در وب‌گاه کتابخانۀ ملی آمریکا برای افراد نابینا یک راهنما قرار داده شده و در آن نوشته شده است از قلم 18 تیره (Bold) در کتاب‌های دیجیتالی‌شده استفاده شود تا افرادی که دچار کوررنگی و کم‌بینایی هستند، به‌راحتی از کتاب‌ها استفاده کنند. این نوع تفکر جسورانه را یک طراح وب باید در هنگام طراحی صفحات داشته باشد؛ اما در طراحی وب، اصل زیبایی و نگاه تفننی (فانتزی) به طراحی نگاه غالب است. با وجود پیشنهادهای ارائه‌شده، توصیۀ اکید استاندارد این است که دستِ‌کم از قلم 14 تیره (Bold) یا 18 استفاده شود؛ البته طراحان می‌توانند نوع قلم را به دلخواه خود انتخاب کنند.

3.    تبدیل نقطه به پیکسل

همان‌طور که می‌دانید در طراحی CSS یا ساختار گرافیکی صفحۀ وب از واحد پیکسل استفاده می‌شود. پیکسل بر اساس تعداد نقطه در تصویر محاسبه می‌شود. هر نقطه در تصویر برابر است با 33/1 پیکسل. بنابراین قلم 14 تیره (Bold) تا 18 بر اساس نقطه در تصویر معادل 5/18 تا 14 پیکسل است. اهمیت این موضوع هنگامی معلوم می‌شود که این مؤلفه‌ها در CSS وارد می‌شوند؛ زیرا اندازۀ متن‌ها در زبان CSS بر اساس پیکسل در نظر گرفته شده است. نکته بعدی که باید به آن اشاره شود، این است که همواره تولید متن‌ها به‌صورت تصویر در نرم‌افزارهای گرافیکی انجام می‌شود و بیشتر نرم‌افزارهای گرافیکی بر اساس پیکسل یا همان PPI (نقطه) کار می‌کنند؛ بنابراین ضروری است که همواره اندازۀ نقطه بین 120 تا 150 درصد اختلاف داشته باشد. اگر قرار است تصاویر متن در صفحۀ وب جای گیرند، باید اندازۀ متن بر اساس پیکسل نسبت به اندازۀ آن بر اساس نقطه حدود 20 تا 50 درصد افزایش پیدا کند. این دو نکته را طراح و توسعه‌دهندۀ وب باید همواره در نظر داشته باشد.

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

4.    استفاده از قلم‌های درشت

نمونۀ بعدی تمرکز این استاندارد روی محتوای متنی است. از چارچوب این استاندارد و فراسنج‌های (پارامترهای) بیان‌شده در این استاندارد می‌توان برای نمودارها، گراف‌ها یا سایر محتواهای غیرمتنی به‌منظور اطمینان بیشتر به استاندارد بودن تضاد (کنتراست) صفحۀ وب نیز استفاده کرد.

برای قلم‌های درشت منطق اصلی این است که هرچه قلم‌ها (فونت) درشت‌تر و بزرگ‌تر باشد، نویسه‌ها (کاراکترها) و حروف راحت‌تر خوانده می‌شوند؛ حتی زمانی‌که تضاد (کنتراست) تصویر یا صفحۀ وب کم است. به‌طورکلی مشاهدۀ مطلوب نیازمند متن‌های درشت است؛ زیرا این اجازه را به نویسندگان می‌دهد که از رنگ‌های متفاوتی در طراحی وب‌گاه خود استفاده کنند. همان‌طور که گفته شد، توصیۀ این استاندارد استفاده از قلم (فونت) بین 14 تیره (Bold) و 18 است. می‌دانید که معلولیت‌ها و محدودیت‌ها متفاوت است؛ و در همین حال که در انتخاب جفت رنگی برای ایجاد تضاد (کنتراست) محدودیت‌هایی وجود دارد، هر کدام از معلولیت‌ها به نوع خاصی از تضاد (کنتراست) نیازمند است. اصولاً مدیریت خواندن و تضاد (کنتراست) دو مقولۀ کاملاً کمّی هستند که نمی‌توان آن‌ها را فرمول‌دهی کرد. آن‌ها به فراخور شرایط مخاطب، شاید خوب و شاید بد، تنظیم شوند؛ ولی در اینجا توصیه می‌شود که از حد میانه استفاده شود. با این حال، عامل دیگری برای تغییر توانایی کاربر دچار اختلالات بینایی در هنگام خواندن یا نگاه کردن به صفحۀ وب وجود دارد؛ و آن عامل، نور است؛ یعنی هم نور صفحه‌نمایش (مانیتور) و هم نور محیطی که کاربر در آن به صفحۀ وب و صفحه‌نمایش (مانیتور) نگاه می‌کند؛ نوری که برای فرد کم‌بینا به‌عنوان یک کاربر می‌تواند تعیین‌کننده باشد؛ و منظور، نور ارگانیک است.

5.    افزایش تضاد رنگی میان متن و سایر موضوع‌ها

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

طبق استاندارد ISO 9241-3 یا ANSI-HFES-100-1988 کمینه تضاد (کنتراست) میان متن استاندارد، Background و سایر چشم‌اندازهایی که یک کاربر درون یک وب‌گاه می‌بیند، نسبت 1 به 3 است. البته نسبت دیگری هم تحت عنوان نسبت 1 به 4 وجود دارد که فقط برای افرادی استفاده می‌شود که به کم‌بینایی حد متوسط به پایین یا اختلالات تشخیص رنگ دچارند؛ افرادی که نسبت به کسانی که با نسبت 1 به 3 به‌راحتی مطالب یا محتوا را می‌خوانند، حساسیت بیشتری به تضاد (کنتراست) دارند.

بر اساس استاندارد ISO تناسب تضاد (کنتراست) برای افراد عادی 1 به 3 است؛ یعنی بر اساس یافته‌های تجربی، این تناسب برای افراد عادی تناسبی در حد 20 به 40 فراهم می‌کند. اما برای افرادی که دچار ضعف بینایی بیشتری هستند، تناسب باید حدود 1 به 5/4 باشد؛ که بر این اساس، حد بینایی به تناسب بزرگ‌نمایی 20 به 80 تقویت می‌شود. حتی در مواردی هم که ضعف بینایی خیلی شدید است، تناسب حدود 1 به 7 پیشنهاد می‌شود.

بر این اساس، تضاد (کنتراست) 1 به 7 ویژۀ افرادی است که بینایی آن‌ها به‌شدت کاهش پیدا کرده است و نیاز دارند عناصر نمایش‌یافته در صفحۀ وب به‌ویژه متن‌ها را با تضاد (کنتراست) بالا میان Background ببینند. این تناسب درحقیقت یک دایره و چشم‌انداز 20 به 80 یعنی حدود 4 برابر حالت معمولی را برای این افراد فراهم می‌کند. افزون بر این، ضعف بینایی اغلب این افراد به‌قدری بالاست که معمولاً از ابزارهای کمکی برای دسترسی به محتوا استفاده می‌کنند؛ ابزارهای کمکی‌ای که به بزرگ‌نمایی تصویر یا صفحات وب به‌لحاظ دیداری مربوط می‌شوند. البته بر اساس این دستورالعمل بیشینه نسبت تضاد (کنتراست) بین اجزای نمایش‌یافته در تصویر 1 به 7 است. توصیۀ دیگر این استاندارد این است که گرچه با افزایش تضاد (کنتراست) تناسب مختلف در صفحۀ وب به‌ویژه Background توانایی دیدن و خواندن مطالب نمایش‌یافته برای افراد کم‌بینا بیشتر می‌شود، باید به یاد داشت که اگر تضاد (کنتراست) صفحۀ وب استاندارد نباشد، به مرور زمان بینایی این افراد صدمۀ بیشتری می‌بیند؛ اما درصورتی‌که کمترین تضاد (کنتراست) بین متن‌ها و Background رعایت شود، هم قدرت خواندن و دیدن افزایش می‌یابد و هم از صدمات بیشتر به بینایی این افراد جلوگیری می‌شود.

1.    افزایش تضاد رنگ برای افراد کم‌بینای متوسط و شدید

در ادامه به دستورالعمل G18 پرداخته می‌شود. این دستورالعمل به توسعه‌دهندگان اطمینان می‌دهد که نسبت 1 به 5/4 بین متن -شامل تصاویر، متن‌ها و Back Ground- تحقق می‌یابد.

در این دستورالعمل، همچنین برای اطمینان یافتن از اینکه کاربران کم‌بینا بتوانند متن‌ها را روی پس‌زمینه مشاهده کنند، حداقل بازۀ تضاد (کنتراست) بین متن و Background بین 14 نقطۀ Bold تا 18 نقطه است.

برای ایجاد نسبت 1 به 7 در تضاد (کنتراست) صفحۀ وب، به اندازۀ 14 Bold تا 18 نیاز است. البته اگر Background ما به‌طور کامل سیاه یا سفید باشد، روشنایی متن می‌تواند در ایجاد شدن یا نشدن تضاد (کنتراست)، مهم و تأثیرگذار باشد.

درصورتی‌که Background به‌لحاظ روشنایی یک حد واحدی نداشته باشد، توسعه‌دهندۀ محتوا باید به‌نحوی متن را داخل صفحۀ وب تنظیم کند که دستِ‌کم دور حروف حدود یک پیکسل حاشیه داشته باشد؛ به این ترتیب، حروف در هر حالتی که Background به خود بگیرد، برای کاربر قابل شناسایی است؛ برای مثال، قسمت بالای صفحه از پایین صفحه کم‌رنگ‌تر یا پُررنگ‌تر باشد. در این حال، رنگ متن به‌عنوان یک نوع رابط دیداری ثابت خواهد بود. به طراحان تأکید می‌شود که امکان دیده شدن متن را برای افرادی که به‌لحاظ ضعف بینایی در حد متوسط هستند، به نسبت 1 به 5/4 فراهم کند.

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

2.    امکان تغییر تضاد رنگی توسط کاربر یا عامل کاربری

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

3.    ایجاد یک پیوند (لینک) برای انتقال به صفحه با تضاد (کنتراست) بالا

در این قسمت از استاندارد کنتراست، از دستورالعمل G174 کمک گرفته شده است. بر اساس این دستورالعمل، طراحان و توسعه‌دهندگان وب می‌توانند در قسمت بالای صفحۀ وب –صفحه‌ای که می‌خواهند به‌لحاظ تضاد (کنتراست) دسترس‌پذیری بیشتری داشته باشد- یک دکمه یا Link را جاسازی کنند؛ این لینک یا دکمه پیوندی به صفحۀ جدیدی است که تضاد (کنتراست) با نسبت بالا و همان محتوایی را دارد که در صفحۀ اولیه موجود است.

اگر طراحان بر اساس این دستورالعمل بخواهند محتوای وب خود را به‌لحاظ تضاد (کنتراست) بهینه سازند، سه اصل را باید رعایت کنند:

  • لینک، کنترل یا دکمه‌ای که طراحی می‌شود، باید خود دارای کنتراست مناسب باشد و در جایی از صفحه جاسازی شود که کاربر بتواند به‌راحتی آن را ببیند.
  • صفحه جدیدی که بر اساس محتوای صفحه اصلی ایجاد می‌شود، به‌لحاظ کاربری و اطلاعاتی که در آن موجود است، با صفحۀ اصلی تفاوتی نداشته باشد.
  • در صفحۀ جدید به‌طور کامل معیارها و استانداردهای مربوط به کنتراست رعایت شود و کمبودی به‌لحاظ تضاد رنگی رخ ندهد؛ زیرا صفحۀ جدید برای برآوردن نیازهای افراد کم‌توان بینایی ایجاد شده است.
  • در این دستورالعمل، در صفحۀ جدیدی که ایجاد می‌شود، باید کمینه کنتراست بین متن‌ها نسبت 1 به 5/4 و کمینه کنتراست متن‌ها با Back Ground نسبت 1 به 3 باشد.

و همچنین از متن‌های درشت یا تصاویر متنی درشت استفاده می‌شود؛ یا حتی بر اساس این دستورالعمل، توسعه‌دهندگان وب می‌توانند نسبت 1 به 7 را هم رعایت کنند.

3-1. مثال: ایجاد لینک برای افزایش تضاد (کنتراست) 1 به 4.5

برای مثال، یک صفحۀ وب وجود دارد که تضاد (کنتراست) آن برای افراد عادی در حالت طبیعی 1 به 3 است. هنگام طراحی برای افزایش، تضاد (کنتراست) لینکی که در بالای صفحه قرار می‌گیرد، برای ارتباط با صفحۀ جدید باید دستِ‌کم 1 به 5/4 باشد.

3-2. مثال: ایجاد پیوند (لینک) برای افزایش تضاد (کنتراست) 1 به 7

در مثال بعدی، کنتراست صفحۀ وب موجود کمی بهینه‌تر از حالت طبیعی است؛ یعنی نسبت کنتراست متن به پس‌زمینه 1 به 4 است. یک کنترل در قسمت بالای این صفحه به نام کنتراست بالا جاسازی شده است. هنگامی‌که این لینک یا کنترل کلیک می‌شود، وارد صفحۀ جدیدی خواهد شد که مطالب صفحۀ قبل را با کنتراست متن به پیش‌زمینۀ 1 به 7 نشان می‌دهد.

4.        ایجاد کنتراست یا تضاد رنگی در Silverlight

در این بخش از استاندارد، دستورالعمل SL13 بررسی می‌شود. امکانات Silverlight دربارۀ افزایش دسترسی در صفحات وب گسترده است. Silverlight برای ایجاد تغییر در Style یا قالب‌های گرافیکی، امکانات گسترده‌ای به طراحان و توسعه‌دهندگان وب می‌دهد تا آن‌ها بتوانند با استفاده از روش‌هایی که در زبان XAML ایجاد شده است، امکانی را فراهم کنند که کاربران کم‌توان بتوانند به منابع و متن‌هایی که محتوایشان بر اساس زیرساخت Silverlight است، به‌لحاظ تضاد رنگی دسترسی بهتری داشته باشند.

درحقیقت، Silverlight قدرت ایجاد یک قالب با تضاد (کنتراست) بالا را دارد؛ درصورتی‌که طراحان و توسعه‌دهندگان وب به رعایت موضوع‌های مربوط به کنتراست در Silverlight علاقه‌مند باشند.

بعد از اینکه این قالب ساخته شد، طبق دستورالعمل، یک رابط، لینک یا دکمه می‌تواند قالب قبلی را به قالب جدید متصل کند؛ به‌طوری‌که وقتی کاربر کلیک می‌کند، لینک، کنترل یا دکمه او را به همان مطلب اما با کنتراست بیشتر هدایت کند.

همچنین Silverlight جدا از هستۀ اصلی خود Toolkit را ارائه داده است؛ که به‌وسیلۀ آن می‌توان قالب‌های بیشتری را طراحی کرد. طراحان و توسعه‌دهندگان وب می‌توانند با استفاده از این toolkit ها قالب‌هایی با کنتراست بالا ایجاد کنند.

همچنین می‌شود با فراخوانی روش Systemproperties.highcontrast کنتراست اجزای نمایش داده‌شده در صفحات مبتنی بر Silverlight یا صفحات html را که در خودشان Silverlight دارند، افزایش داد.

نکتۀ مهم این است که محتوای مبتنی بر Silverlight به‌هیچ‌عنوان از سبک‌های (style) CSS پیروی نمی‌کند؛ چه این سبک‌ها به‌صورت جداگانه در فایل Silverlight قرار داشته باشند، چه سبک‌هایی که در داخل تگ. Style فایل‌های html باشند.

5.        ایجاد تضاد رنگی برای پس‌زمینۀ رنگارنگ

در این قسمت از استاندارد، به دستورالعمل G145 اشاره می‌شود. این دستورالعمل توضیح می‌دهد که با وجود اطمینان داشتن از نسبت تضاد (کنتراست) رنگی 1 به 3 بین متن و پس‌زمینۀ آن متن؛ درصورتی‌که پس‌زمینه یک رنگ واحد، یعنی به‌طور کامل سیاه یا سفید، باشد؛ اولاً طراح وب باید از متن با قلم (فونت) درشت استفاده کند و دوم، برای اطمینان یافتن از کنتراست صفحۀ وب باید نسبت 1 به 3 را همواره رعایت کند.

حتی در صورتی هم که صفحه تا حدود زیادی تاریک است یا روشنایی صفحه به‌نحوی است که برای کاربر، عناصر صفحه ملموس نیست، باید کنتراست 1 به 3 بین متن و تصویر Background برقرار باشد.

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

6.        امکان تغییر پس‌زمینه و پیش‌زمینه

در این قسمت از استاندارد باید دستورالعمل G156 مرور شود. این دستورالعمل به استفادۀ کاربران از فناوری‌های تأثیرگذار دلالت دارد؛ فناوری‌هایی که به آن‌ها اجازه می‌دهد پس‌زمینه و پیش‌زمینۀ صفحات وب را تغییر دهند.

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

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

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

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

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

2) موقعیت پنل‌های شناور به‌صورت افقی در صفحه تنظیم و در بسته‌های افقی چیدمان شود. درصورتی‌که یک پنل جدید برای یک محتوای جدید نیاز باشد، در امتداد چیدمان افقی پنل‌ها لحاظ شود و هر بسته جای مخصوص خود را داشته باشد.

8.        ایجاد کنترل برای افزایش اندازۀ متن

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

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

9.        تغییر نکردن محتوا یا کاربری در صورت بزرگ‌نمایی یا افزایش اندازۀ موضوع‌ها

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

10.    استفاده از فراسنج (پارامتر) POSITION برای تنظیم بزرگ‌نمایی و مقیاس‌پذیری متن‌ها

در این قسمت از استاندارد، طراحان و توسعه‌دهندگان وب برای به‌کارگیری دستورالعمل SCR34 هدایت می‌شوند. این دستورالعمل بر استفاده از فراسنج (پارامتر) POSITION برای تنظیم بزرگ‌نمایی و مقیاس‌پذیری متن‌ها در صفحات وب دلالت دارد. در اصل، POSITION یک عنصر، در طراحی گرافیک صفحۀ وب عامل بسیار تعیین‌کننده‌ای است؛ عاملی که هم در قالب اسناد html و هم در قالب اسناد CSS کاربری دارد. POSITION یک روش است که مؤلفه‌های مختلفی دارد.

اولین مؤلفۀ آن Offsethight است که ارتفاع عنصر (المان) را به‌صورت پیکسل تعیین می‌کند. مؤلفۀ دوم offsetwith است که برای عرض عنصر دیداری بسیار تعیین‌کننده به شمار می‌رود. این عنصر می‌تواند برای نویسه‌های (کاراکترهای) متنی هم کارایی داشته باشد.

فراسنج (پارامتر) بعدی offsetleft است؛ که فاصلۀ هر نویسه (کاراکتر) یا عنصر را از سمت چپ صفحه‌نمایش کاربر می‌تواند تعیین کند.

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

دو مؤلفۀ دیگر هم وجود دارد: calculate position و objelement. این‌ها دو مشخصۀ مربوط به روش position هستند. در هنگام کدنویسی به زبان‌های مختلف، مانند جاوا، می‌توان با استفاده از این دو یک تابع جدید ایجاد کرد؛ به‌طوری‌که کاربر بتواند position حروف را نسبت به سایر عناصر نمایش‌یافته در تصویر تنظیم کند.

11.    استفاده از واحد اندازه‌گیری EM در CSS

در ادامۀ بحث، با استفاده از دستورالعمل C14 واحد اندازه‌گیری EM در font size معرفی می‌شود.

همان‌طور که مشخص است، هر EM برابر با 16 پیکسل است. EM یک واحد اندازه‌گیری است که می‌توان در زبان‌های مختلف طراحی وب، مانند CSS و html از آن بهره برد و متن را بزرگ یا کوچک کرد. برای این واحد اندازه‌گیری می‌توان صفت size-font را به کار برد. همان‌طور که طراحان با آن آشنایی دارند، این صفت در تگ bodyhtml در دسترس است. از این صفت در اسناد CSS نیز استفاده می‌شود.

0 پاسخ

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

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

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

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