اصل اول شیوه نامه دسترسی پذیری WCAG به‌طور کامل

در مقاله پیش نوشتم دسترسی پذیری چیه و چه اهمیتی داره و در مورد مهمترین شیوه نامه آن که WCAG است صحبت کردم. گفتم WCAG چهار اصلِ ۱. قابل دریافت بودن ۲.عمل‌پذیر بودن ۳. قابل فهم بودن و ۴.سازگار بودنه. هر اصل چند راهبرد و هر راهبرد چند شاخص موفقیت برای رسیدن به سه سطح A، AA، AAA داره.

سطح AA سطحی است که به‌طور نرمال قابل قبوله.

در این مقاله به‌طور مفصل راهبردهای اصل قابل درک بودن و شاخص‌های موفقیت هر راهبرد رو توضیح دادم.

اصل ۱: قابل دریافت بودن (Perceivable)

راهبرد ۱.۱.: متن جایگزین (Alternative text)

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

اصطلاح Alternative text همان متنی است که مشابه آن را هنگام لود نشدن تصویر روی محل تصویر دیدیم و مشخص کرده تصویرِ چیه.

شاخص موفقیت ۱.۱.۱ : محتوای غیر متنی (AA)

تمام محتوای غیر متنی که به کاربر ارائه می‌شه دارای متن جایگزین (Alternative Text) دقیقا با همان هدف محتوای غیرمتنی است به استثنای موارد ذکر شده در زیر:

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

· مدیاهای وابسته به زمان: اگر محتواهای غیرمتنی وابسته به زمان باشه بهتره که حداقل یک توصیف از محتوا رو ارائه بدیم. مثلا در مورد ویدئویی که می‌ذاریم یه توضیح بدیم.

· آزمون: اگر محتوای غیر متنی آزمون یا تمرینی است که در صورت ارائه کامل محتوا، آزمون یا تمرین رو خراب می‌کنه، بهتره یه توصیف کوتاه از اون رو در قالب alternative text ارائه بدیم.

· ایجاد حس: اگر محتوای غیر متنی اساساً برای ایجاد یک تجربه حسی خاص در نظر گرفته شده، در قالب alternative text توضیح بدیم که این محتوا به چه منظوره.

· کپچا (CAPTCHA): کپچا یک نرم‌افزار برای سوالات و آزمون‌هایی است که با استفاده از اون انسان رو از کامپیوتر تشخیص می‌ده. برای کپچا انواع مختلف ادراک حسی برای سازگاری با ناتوانی های مختلف ارائه شده.

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

راهبرد ۱.۲ : رسانه‌های وابسته به زمان

شاخص موفقیت ۱.۲.۱ : صوت و ویدیوهای از پیش ضبط شده (A)

برای صوت و ویدئوهای از پیش ضبط شده جایگزینی فراهم کنیم مگر برای مدیاهای دارای متن جایگزین. (این متن جایگزین می‌تونه از نوع alternative text attribute باشه و یا لیبلی باشه که محتوای مدیا رو توضیح داده باشه.)

شاخص موفقیت ۱.۲.۲: زیرنویس برای محتوای از پیش ضبط شده (A)

برای محتوای دارای صدا که از پیش ضبط شده، زیرنویس ارائه بدیم مگر برای مدیاهای دارای متن جایگزین (alternative text).

شاخص موفقیت ۱.۲.۳ : توضیح صوتی یا جایگزین رسانه‌ای دیگر برای محتوای از پیش ضبط شده (A)

برای محتوای ویدئویی ازپیش ضبط شده، محتوای صوتی یا یک جایگزین رسانه‌ای دیگه تهیه کنیم مگر برای مدیاهای دارای alternative text.

شاخص موفقیت ۱.۲.۴ : زیر نویس برای محتوای زنده (AA)

برای محتوای دارای صدای زنده، زیرنویس ارائه بدیم.

شاخص موفقیت ۱.۲.۵ : توضیح صوتی برای محتوای از پیش ضبط شده (AA)

توضیح صوتی باید برای همه ویدئوها فراهم بشه.

شاخص موفقیت ۱.۲.۶ : زبان اشاره برای محتوای از پیش ضبط شده (AAA)

برای محتوای دارای صدا، تفسیر زبان اشاره اضافه کنیم.

شاخص موفقیت ۱.۲.۷ : توضیحات صوتی توسعه یافته برای محتوای از پیش ضبط شده (AAA)

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

شاخص موفقیت ۱.۲.۸ : جایگزین برای محتوای ازپیش ضبط شده (AAA)

برای همه محتواهای وابسته به زمانِ از پیش ضبط شده، جایگزین متنی ارائه دهیم.

شاخص موفقیت ۱.۲.۹ : محتوای فقط صوتیِ زنده (AAA)

برای محتواهایی که فقط صوتی هستند متن جایگزین با مضمون محتوا ارائه بدیم.

راهبرد ۱.۳ : سازگار بودن

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

شاخص موفقیت ۱.۳.۱ : اطلاعات و روابط بین آن‌ها (A)

محتوا، ساختار و روابط بین محتوا و ساختار باید برنامه‌نویسی بشن یا با نوشته اونا رو مشخص کنیم.

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

شاخص موفقیت ۱.۳.۲: توالی معنادار (A)

جاهایی که توالی محتوا مهمه، بهتره به‌صورت برنامه‌نویسی، توالی درست مشخص شه.

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

شاخص موفقیت ۱.۳.۳: محتواهای حسی (A)

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

شاخص موفقیت ۱.۳.۴: جهت (AA)

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

شاخص موفقیت ۱.۳.۵: مشخص کردن هدف ورودی (AA)

هدف هر ورودی (input) رو مشخص کنیم: در موارد زیر می‌تونیم هدف رو با برنامه نویسی هندل کنیم:

• زمانی که هدف اینپوت با رابط کاربری مشخص شده (مثلا لیبل نام کاربری، رمزعبور و ….)
• زمانی که تکنولوژی‌هایی برای پشتیبانی اطلاعات به کاربر در مورد اینپوت وجود داره.

شاخص موفقیت ۱.۳.۶: مشخص کردن هدف

مشخص کردن هدف هر عنصر رابط کاربری، آیکون و هر ناحیه بوسیله برنامه نویسی. (AAA)

راهبرد ۱.۴: قابل تشخیص بودن

دیدن و شنیدن محتوا رو برای کاربر آسون کنیم. (حتی دیدن وشنیدن محتوایی مثل پیش زمینه از پس زمینه)

شاخص موفقیت ۱.۴.۱: از رنگ استفاده کنیم (A)

توجه کنید که استفاده از رنگ به تنهایی برای رساندن یک منظور نباید استفاده بشه. این رنگ باید همراه با یک اکشن، یک پاسخ و یا یک المان بصری باشه.

شاخص موفقیت ۱.۴.۲: کنترل محتوای صوتی (A)

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

شاخص موفقیت ۱.۴.۳: حداقل کنتراست (AA)

حداقل کنتراست رنگ متن‌ها با پس زمینه باید ۴.۵:۱ باشه. به استثنا موارد زیر:

۱. متن‌های بزرگ: متن‌های بزرگ می‌تونن کنتراست ۳:۱ داشته باشن.

۲. تشریفاتی بودن: متن‌هایی که صرفا تزیئینی هستن و اطلاعات خاصی رو منتقل نمی‌کنن می‌تونن این نسبت کنتراست رو نداشته باشن.

۳. لوگوتایپ: اگر نوشته جز یک لوگو یا اسم برند باشه نیاز به رعایت کنتراست نداره.

شاخص موفقیت ۱.۴.۴: تغییر اندازه متن

متن‌ها باید بتونن بدون نیاز به نرم افزار و یا سخت افزار خاصی تا ۲۰۰ برابر بدون از دست رفتن محتوا و کارکرد بزرگ شوند.(AA)

شاخص موفقیت ۱.۴.۵: تصویرِ نوشته

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

۱. تصویر نوشته‌ها قابل شخصی سازی باشه. (در رنگ، سایز، پس زمینه)

۲. اگر از تصویر نوشته استفاده نکنیم اطلاعات منتقل نمی‌شه. (مثلا در لوگوتایپ)

شاخص موفقیت ۱.۴.۶: بهبود کنتراست (AAA)

کنتراست نوشته‌ها با پس زمینه باید حداقل ۷:۱ باشه. با استثنا موارد زیر:

۱. متن‌های بزرگ: کنتراست متن‌های زرگ می‌تونه ۴.۵:۱ باشه.

۲. تشریفاتی بودن: متن‌هایی که صرفا تزئینی هستن و اطلاعات خاصی رو منتقل نمی‌کنن می‌تونن این نسبت کنتراست رو نداشته باشن.

۳. لوگوتایپ: اگر نوشته جز یک لوگو یا اسم برند باشه نیاز به رعایت کنتراست نداره.

شاخص موفقیت ۱.۴.۷: پس زمینه صوتی کم و یا نداشتن پس زمینه صوتی (AAA)

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

• بدون پس زمینه: محتوای صوتی صدای پس زمینه نداشته باشه.
• خاموش کردن: بشه صدای پس زمینه رو خاموش کرد.
• ۲۰ دسی بل: صداهای پس زمینه حداقل ۲۰ دسی بل کمتر از محتوای گفتار پیش زمینه است، به استثنای صداهای گاه به گاه که فقط یک یا دو ثانیه طول می کشه.

شاخص موفقیت ۱.۴.۸ : ارائه بصری (AAA)

برای ارائه بصری بلوک های متنی (متن با بیش از یک جمله) مکانیزمی فراهم کنیم که به موارد زیر برسه:

• کاربر بتونه رنگ پیش زمینه و پس زمینه رو تغییر بده.
• در هر عرض بیشتر از ۸۰ کاراکتر نباشه. (برای خط چینی و ژاپنی و کره ای ۴۰ تا)
• متن justify نشه.
• فاصله خطوط از هم ۱ و نیم space است و فاصله پاراگراف‌ها از هم ۱و نیم برابر فاصله خطوط است.
• متن بدون نیاز به نرم افزار و یا سخت افزار خاصی بتونه تا ۲۰۰ برابر بزرگ شه. بدون اینکه نیاز باشه کاربر اسکرول افقی بکنه.

شاخص موفقیت ۱.۴.۹ : تصویرِ نوشته(AAA)

از تصویر نوشته استفاده نکنیم. بدون هیچ استنثنائی.

شاخص موفقیت ۱.۴.۱۰ : جزر (AAA)

در جزر (Reflow) محتوا باید اطلاعات درون خودش و کارکردش رو در زوم کردن حفظ کنه.

در وبسایت با درنظر گرفتن ابعاد صفحه ۱۲۸۰*۱۰۲۴ با زوم ۴۰۰٪ این ابعاد به ۳۲۰* ۲۵۶ تقلیل پیدا می‌کنه. محتوا باید کار کرد خودش رو حفظ کنه و بدون اینکه نیاز باشه کاربر اسکرول افقی کنه متن رو بخونه و جلو و عقب بره.

شاخص موفقیت ۱.۴.۱۱: کنتراست غیرمتنی (AA)

کنتراست رنگی اجزا بصری با رنگ‌های مجاورشون باید حداقل ۳:۱ باشه (AA)

اجزای رابط کاربری: باید اجزا رابط کاربری و حالت‌ها (states) کنتراست کافی داشته باشند بغیر از اجزای غیرفعال و اجزایی که کاربر خودش خواسته که تغییر کنن.

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

شاخص موفقیت ۱.۴.۱۲: فواصل متن (AA)

محتوایی که با زبان برنامه نویسی پیاده شده، باید قابلیت اعمال استایل زیر و تغییر این استایل‌ها رو بدون ازدست دادن معنا و کارکرد داشته باشه:

• ارتفاع خط (فواصل خطوط) باید حداقل ۱.۵ برابر اندازه فونت باشه.
• فاصله بین پاراگراف‌ها باید حداقل ۲ برابر اندازه فونت باشه.
• فاصله حروف باید حداقل ۰.۱۲ برابر اندازه فونت باشه.

شاخص موفقیت ۱.۴.۱۳: محتوا در زمان هاور و یا فوکوس بودن (AA)

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

• قابل رد کردن باشه: باید بدون اینکه نیاز باشه موس رو تکون بدیم و یا با کیبورد جا به جا شیم بتونیم محتوا رو رد کنیم. (مثلا با Escape کیبورد).
• قابل شناور شدن: باید بدون اینکه سکشن از حالت هاور بودن خارج شه بتونیم موس رو روی محتوایی که نمایان شده جا به جا کنیم.
• مانایی: محتوا باید تا زمانی که سکشن، هاور و یا فوکوس هس و تا وقتی که ردش نکردن و یا اطلاعات داده شده منقضی نشده باقی بمونه. (نباید خود به خود محو شه).

امیدوارم که نوشته براتون مفید بوده باشه. در مقاله بعدی اصل دوم WCAG رو مفصل شرح می‌دم.

خوشحال می‌شم نظراتتون رو ببینم :)

منابع

https://www.w3.org/TR/WCAG21/#info-and-relationships

https://www.moreycreative.com/wcag

https://www.boia.org/blog/what-does-meaningful-sequence-mean-for-web-accessibility

1.3.5 Identify Input Purpose