Mekaeil
Mekaeil
خواندن ۶ دقیقه·۱ سال پیش

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

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

  1. وب در دسترس برای همه! بخش اول
  2. وب در دسترس برای همه! بخش دوم

استفاده از ARIA: Roles, states, and properties

ARIA یک مفهوم و معنی را برای یک تگ تعریف می‌کند که این معنی و مفهوم با استفاده از Role, States و properties تعریف و مشخص می‌شود. دولوپر باید برای تگ role مناسب را قرار دهد. ARIA علاوه بر مفهوم و معنایی که به تگ می‌دهد اطلاعاتی را در اختیار مرورگر قرار میدهد البته تاثیر در DOM ندارد.

مطالعه بیشتر: Using ARIA: Roles, states, and properties

لیست WAI-ARIA Roles را مشاهده کنید.

Aria-states

۱. Describe dynamic states

۲. Changed with Javascript

نمونه‌هایی از Aria-statesها به صورت زیر هستند، همه این موارد مقادیر بولین true/ false دارند.

aria-busy / aria-disabled / aria-grabbed / aria-hidden / aria-invalid

برای مثال در منوهای وبسایت برای submenuها مقدار aria-hidden=true قرار میدهیم و وقتی که با ماوس هاور میشود مقدار آن false میشود.

Aria-properties

۱. Describe relationships

۲. Rarely change

نمونه‌هایی از Aria-propertiesها به صورت زیر هستند:

aria-descibedby / aria-flowto / aria-haspopup / aria-label / aria-label

برای مثال وقتی که ما یک فرم عضویت داریم و برای رمز عبور یک شرایطی تعیین کردیم و توضیحات رمز عبور را داخل یک تگ span زیر input قرار دادیم، برای تگ رمز عبور با استفاده از aria-descibedby مشخص میکنیم که توضیح آن داخل تگ span به id موردنظر وجود دارد. در واقع با استفاده از Aria-propertyها ما ارتباط بین تگ‌ها را مشخص میکنیم.

با استفاده از این لینک Periodic Table of ARIA 1.1 Roles به راحتی می‌توانید لیست کامل Ariaها توضیحات آنها را مشاهده نمایید.

میزان دسترسی پذیری وب‌سایت (Conformance Level)

دستورالعمل های WCAG 2.0 به منظور پاسخگویی به نیازهای گروه های مختلف و موقعیت های مختلف به سه سطح دسترسی‌پذیری طبقه بندی می شوند:

۱. Level A

۲. Level AA

۳. Level AAA

وبسایت ما برای هر یک از سطوح باید میزان دسترسی پذیری‌های لازم را داشته باشد برای مطالعه بیشتر وبسایت Understanding Conformance Requirements را بخوانید.

بخش ۵۰۸ اصلاحیه قانون توان‌بخشی

بخش 508 در ابتدا به عنوان اصلاحی در قانون توانبخشی 1973 در سال 1986 اضافه شد. بخش اصلی 508 به منظور شناخت رشد این زمینه، با فناوری های الکترونیکی و اطلاعاتی سروکار داشت.

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

برای اطلاعات بیشتر میتوانید وب‌سایت section508.gov را مشاهده نمائید.

خلاصه ای از این قانون به صورت زیر است.

Software Applications and Operating Systems: includes accessibility to software, e.g. keyboard navigation & focus is supplied by a web browser.
Web-based Intranet and Internet Information and Applications: assures accessibility to web content, e.g., text description for any visuals such that users of with a disability or users that need assistive technology such as screen readers and refreshable Braille displays, can access the content.
Telecommunications Products: addresses accessibility for telecommunications products such as cell phones or voice mail systems. It includes addressing technology compatibility with hearing aids, assistive listening devices, and telecommunications devices for the deaf (TTYs).
Videos or Multimedia Products: includes requirements for captioning and audio description of multimedia products such as training or informational multimedia productions.
Self Contained, Closed Products: products where end users cannot typically add or connect their own assistive technologies, such as information kiosks, copiers, and fax machines. This standard links to the other standards and generally requires that access features be built into these systems.
Desktop and Portable Computers: discusses accessibility related to standardized ports, and mechanically operated controls such as keyboards and touch screens. [Wikipedia]

تست دسترسی پذیری وب‌سایت / Web Accessibility Tests

برای تست Web Accessibility ابزارهای مختلفی وجود دارد که معروفترین آنها نرم‌افزارهای وب‌سایت freedomscientific است که با تهیه لایسنس‌ آنها میتوانید از امکانات و ویژگی‌های آن بهره مند شوید.

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

برای Mac هم از ابزار VoiceOver که روی سیستم وجود داره استفاده میکنیم.

برای فعالسازی از بخش System Preferences گزینه Accessibility را انتخاب میکنیم.

و روی گزینه VoiceOver کلیک و آن را فعال میکنیم.

استفاده از Wave Webaim برای Accessibility test

برای تست Accessibility من از ابزار Wave Webaim که به صورت آنلاین در دسترس است استفاده میکنم که واقعا کاربردی و فوق العاده ست.

همانطور که میبینید همه خطاها و مشکلات Accessibility وبلاگ من را به صورت زیر نمایش می‌دهد.

Colour Contrast Analyser

با استفاده از نرم افزاری که وبسایت paciellogroup آماده کرده است می‌توانید به راحتی Contrast رنگ‌های وبسایت را بر اساس استانداردهای Aceessibility تنظیم کنید و کد رنگ موردنظر را بدست بیارید. همچنین امکانی را به شما می‌دهد که بر اساس نوع Screen به شما رنگی که کاربر مشاهده میکند را نمایش میدهد. در تصویر زیر دموی از برنامه آن را مشاهده می‌کنید.

Accessibility Developer Tools

با استفاده از Accessibility Developer Tools که توسط گوگل تهیه شده است میتوانید وبسایت خود را از لحاظ Accessibility بهبود ببخشید. وقتی این اکستنشن را نصب می‌کنید تست‌های Accessibility را بر روی سایت شما انجام میدهد و مشکلات وبسایت را به شما نمایش میدهد.

معرفی چند وب‌سایت و ابزار Web Accessibility

وبسایت‌های زیادی هستند که در این زمینه می‌توانید از آنها کمک بگیرید ولی دو وب‌سایت زیر امکانات بسیار زیادی را ارایه می‌دهند.

۱. Web.dev

۲. tenon

۳. an accessibility visualization toolkit

۴. The A11Y Project

سخن آخر

نکاتی که در این ۳ مقاله با شما به اشتراک گذاشتم کامل نیستند ولی میتوانند برای استارت کار و خواندن مقالات جدید کمک زیادی به شما کنند، هدف از نوشتن این مقالات این بود که در پروژه هایی که پیاده سازی میکنم این موارد را مرور و بررسی کنم. من در یکی از پروژه هایی که با یک استارتاپ کانادایی داشتم ملزم شدیم که Web Accessibility را برای پروژه رعایت کنیم و این الزام آغاز شناخت بیشتر این موضوع شد که متاسفانه در ایران اصلا به آن اهمیت داده نمیشود.

در سایت W3C یک چک‌لیست از موارد و نکات برای Web Accessibility وجود دارد که تحت نام Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 منتشر شده است مطالعه این چک لیست و رعایت آنها کمک خوبی به شما میکند.

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

امیدوارم این مقالات برای شما مفید بوده باشه، شاد و موفق باشید.

دسترسی پذیریweb accessibilityدسترسی پذیری چیستweb development
من میکائیل هستم و در وبلاگم در مورد تجربیات کاریم و باورها و عقاید شخصیم می‌نویسم :)
شاید از این پست‌ها خوشتان بیاید