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

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 نیز استفاده می‌شود.

روش‌های مدیریت پرونده‌های (فایل‌های) صوتی

1.    مقدمه

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

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

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

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

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

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

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

1) یک پروندۀ (فایل) صوتی است که هنگام بارگذاری صفحۀ وب به‌صورت خودکار پخش می‌شود. در این صفحه پیوندی (لینکی) به نام silent وجود دارد که کاربر می‌تواند با کلیک روی آن، این پرونده (فایل) را از حالت شنیداری خارج کند.

2) یک صفحۀ وب مبتنی بر فلَش (flash) است که صدایی را هم‌زمان با پخش پروندۀ (فایل) فلَش، برای سه ثانیه پخش می‌کند.

3) یک صفحۀ وب مبتنی بر فلَش (flash) است که به‌صورت خودکار صدایی را در صفحۀ وب پخش می‌کند. این پروندۀ (فایل) فلش دارای تنظیم‌کننده‌هایی است که کاربر به‌وسیلۀ آن‌ها می‌تواند صدای این پرونده (فایل) را خاموش کند.

1.    امکان توقف پروندۀ (فایل) صوتی

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

1-1. مثال: اجرای خودکار پروندۀ (فایل) صوتی در هنگام باز شدن صفحۀ وب

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

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

1-2. مثال: پروندۀ (فایل) صوتی کوتاه

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

2.    امکان توقف پرونده (فایل) صوتی توسط کاربر

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

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

2-1. مثال: پویانمایی (انیمیشن) چندثانیه‌ای

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

2-2. مثال: فیلم کوتاه

در مثال دوم، یک صفحۀ وب است که در آن یک فیلم کوتاه نمایش داده می‌شود. در کنار فیلم کوتاه، یک دکمه یا پیوندی (لینکی) به نام عدم پخش فیلم وجود دارد که می‌تواند باعث پخش نشدن فیلم کوتاه شود.

2-3. مثال: محتوای مبتنی بر Flash

در مثال سوم، یک صفحۀ وب است که در آن یک پروندۀ (فایل) فلَش قرار داده شده که شامل ویدئو و صوت است. در کنار این پروندۀ (فایل) فلَش یک دکمه با نام غیرفعال کردن محتوای رسانه‌ای قرار دارد که کاربران می‌توانند با کلیک روی آن مانع پخش پروندۀ (فایل) رسانه‌ای فلَش روی صفحۀ وب شوند.

3.    امکان اجرای پروندۀ (فایل) صوتی توسط کاربر (غیرخودکار)

در ادامه، به دستورالعمل G171 پرداخته می‌شود. با استفاده از این دستورالعمل صوتی، زمانی پخش پروندۀ (فایل) صوتی شروع می‌شود که کاربر درخواستی را مبنی بر پخش پروندۀ (فایل) صوتی در صفحات وب بدهد؛ برای مثال، روی یک پیوند (لینک) یا آیکن کلیک کند.

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

3-1. مثال: صدای پیش‌زمینه

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

3-2. مثال: محتوای صوتی مهم

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

4.    امکان مدیریت پرونده‌های (فایل‌های) صوتی در Silverlight

در این قسمت از استاندارد، دستورالعمل SL24 بررسی می‌شود و از این دستورالعمل، توصیه‌هایی برای بهبود سازوکارهای مدیریت اجرای پرونده‌های (فایل‌های) صوتی در پرونده‌های (فایل‌های) مختلف Silverlight پیدا می‌شود. در زیرساخت برنامه‌نویسی پرونده‌های (فایل‌های) مبتنی بر Silverlight یک object یا شیء به نام media element با ویژگی Auto play وجود دارد که برای مدیریت اجرای پرونده‌های (فایل‌های) صوتی و تصویری استفاده می‌شود. البته Auto play به‌صورت پیش‌فرض فعال است و هنگام بارگذاری (loud) صفحۀ وب به‌طور خودکار اجرا می‌شود. اگر این امکان به‌صورت خودکار فراهم نشود، باید با عنصر false مقداردهی شود.

می‌توان در قسمت scours نشانی‌ای را که پروندۀ (فایل) صوتی در آن قرار دارد، نوشت تا مشخص شود که از چه روشی در ویژگی Auto play استفاده می‌شود.

سه روش در این زمینه وجود دارد: play، pauses و stop؛ که برای پخش، توقف و قطع کردن پروندۀ (فایل) صوتی استفاده می‌شود.

5.    امکان مدیریت پرونده‌های (فایل‌های) صوتی در FLASH

در این بخش از استاندارد، به دستورالعمل FLASH18 پرداخته می‌شود که امکان کنترل پرونده‌های (فایل‌های) صوتی مبتنی بر فلَش را در صفحات وب ایجاد می‌کند. در این دستورالعمل آمده است که طراحان و توسعه‌دهندگان وب می‌توانند از پرونده‌های (فایل‌های) صوتی مبتنی بر فلَش به‌صورت خودکار در صفحات وب استفاده کنند. اما نکتۀ مهم این است که توسعه‌دهندگان وب باید امکانی را فراهم کنند که کاربران بتوانند به‌سادگی و به‌سرعت پروندۀ (فایل) صوتی مبتنی بر فلَش را مدیریت کنند؛ درواقع، باید این پرونده‌ها (فایل‌ها) را به‌گونه‌ای طراحی کنند که این مدیریت به کمک ابزارها و فناوری‌های کمکی میسر باشد. ازجمله متن‌خوان‌ها، ابزارهای بزرگ‌نمایی تصویر یا سازوکارهایی از این دست که برای افراد دچار محدودیت‌های ذهنی، رفتاری و حتی گفتاری و بینایی، امکان مدیریت صداهای موجود در پرونده‌های (فایل‌های) فلَش مبتنی بر وب را فراهم می‌آورند. یکی از راه‌های موجود در پروندۀ (فایل) فلَش این است که طراحان و توسعه‌دهندگان وب ضمن اینکه اجازۀ اجرای پروندۀ (فایل‌های) فلَش را می‌دهند، این امکان را برای کاربران فراهم می‌آورند که برای مهار کردن عملکرد این پرونده‌ها (فایل‌ها) از اسناد یا پرونده‌های (فایل‌های) html استفاده کنند. به عبارت دیگر، کاربر به‌جای پروندۀ (فایل) فلش با اسناد html در ارتباط است. درواقع، در داخل اسناد html یک پروندۀ (فایل) فلش به‌عنوان یک رسانۀ خارجی قرار داده شده است و از سوی دیگر، در زبان html کلاسی (class) به نام External interface وجود دارد که امکان ارتباط کدهای html را با رسانه‌های خارجی فراهم می‌آورد.

برآیند این ردۀ (class) دوجانبه این است که کاربر می‌تواند با استفاده از آن و از طریق امکاناتی که زبان html به این کلاس می‌دهد، محتوای پروندۀ فلَش را بدون اینکه با محتوای آن در ارتباط باشد، مدیریت کند.

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

6.    امکان غیرفعال کردن صدای محتوای مبتنی بر FLASH

در این قسمت از استاندارد، دستورالعمل FLASH34 بررسی می‌شود که امکان غیرفعال کردن صدا را در فایل‌های فلش را ایجاد می‌کند. این امکان به‌وسیلۀ فناوری‌های کمکی در پرونده‌های (فایل‌های) فلش -که به‌صورت خودکار هنگام بارگذاری صفحات وب پخش می‌شوند- فراهم می‌گردد. برای اینکه نرم‌افزارهای متن‌خوان پرونده‌های (فایل‌های) فلش را درک کنند، معمولاً در زبان اکشن‌اسکیریپت از مشخصه‌ای به نام  flash.accessibility.Accessibility.active استفاده می‌کنند. درصورتی‌که این تابع true باشد، فلش یا flash player امکان درک محتویات فلش را برای ابزارها یا فناوری‌های کمکی فراهم می‌کند. این تابع، دسترسی طراحان و توسعه‌دهندگان را به محتویات پروندۀ (فایل) فلش بهبود می‌بخشد.

7.        تنظیم صدای پروندۀ (فایل) صوتی در محتوای مبتنی بر Silverlight

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

این مشخصه در Silverlight player، نسخۀ 3 به بعد، قابل درک است. با استفاده از این مشخصه، کاربر یک Slider از Silverlight دریافت می‌کند که با پایین یا بالا بردن آن می‌تواند صدای پروندۀ (فایل) صوتی را تنظیم کند.

 

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

    مقدمه

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

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

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

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

  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) باید همچنان حفظ شود.