در دسترس بودن UX و رابط برای همه

1) چرا اهمیت دارد

از نظر قانونی و اخلاقی: رابط نباید افراد مبتلا به اختلالات بینایی، شنوایی، حرکتی، شناختی را حذف کند.
اثر کسب و کار: کاربران بیشتر، تبدیل و نگهداری بالاتر، SEO بهتر و کیفیت کد.
از نظر عملیاتی: دسترسی پذیری یک فرآیند است، نه یک «اصلاح تصادفی».

2) اصول و مبانی (POUR)

قابل درک: کنتراست، متون جایگزین، زیرنویس.
قابل اجرا: همه چیز از صفحه کلید، تمرکز قابل مشاهده، انیمیشن های مکث/توقف قابل دسترسی است.
درک: ناوبری قابل پیش بینی، خطاهای واضح، فرمول های ساده.
مقاوم: معانی صحیح HTML/ARIA، سازگاری با فن آوری های کمکی.

3) معانی، عناوین و ARIAs

نشانه گذاری معنایی قبل از ARIA: '<button>'، '<nav>'، '<form>'، '<table>' - بر اساس هدف.
سلسله مراتب هدر: یک <h1> 'در هر صفحه، سپس ساختار منطقی' <h2> '-' <h3> '.
نشانه ها: '<header>'، '<main>'، '<aside>'، '<footer>'، '<nav>' - به خوانندگان صفحه نمایش کمک کنید.
ARIA تنها زمانی که مورد نیاز است: «نقش»، «aria-label»، «aria-descripted»، «aria-expanded»، «aria-live».
حالات/خطاها از طریق «aria-invalid»، «aria-errormessage».

4) صفحه کلید و مدیریت تمرکز

کنترل کامل صفحه کلید: «Tab/Shift + Tab» - سفارش، «Enter/Space» - فعال کردن، «Esc» - خروج.
تمرکز قابل مشاهده همیشه ؛ طرح کلی را غیرفعال نکنید.
تله های تمرکز: در حالت ها - تمرکز چرخه ای، بازگشت تمرکز به منبع پس از بسته شدن.
عناصر پنهان نباید به ترتیب برگه ("display: none"، "aria-hidden =" true ") قرار گیرند.
پرش لینک: «برو به محتوای اصلی» - در ابتدای صفحه.

5) رنگ، کنتراست و تایپوگرافی

کنتراست متن: حداقل 4. 5:1 برای متن ساده و 3:1 برای متن بزرگ.
فقط به رنگ تکیه نکنید: با یک آیکون/الگو/امضا تکرار کنید.
اندازه اهداف قابل کلیک: حداقل 40-48 پیکسل، زمینه های کافی در اطراف.
فونت ها: فونت های قابل خواندن، خط به خط 1. 4–1. 6، طول خط 45-90 کاراکتر.

6) حرکت، انیمیشن ها و فلش صرع

احترام به سیستم ترجیح کاهش حرکت پرچم - اضافه کردن انیمیشن ساده/غیر فعال کردن اختلاف منظر.
اجتناب از فلیکر> 3 بار در ثانیه.
تمام حرکات خودکار باید Pause/Stop/Hide داشته باشند.

7) فرم ها، خطاها و اعتبارسنجی

صریحاً برچسب ها و فیلدها را ببندید: «<label for =» id «>».
Placeholder یک برچسب نیست.
پیام های خطا در کنار فیلد و در خلاصه خطا در بالا ؛ اتصال از طریق 'aria-describedby'.
فرمت ورودی را توضیح دهید، به عنوان مثال، ماسک ؛ واحدها و واحد پول را مشخص کنید.
هنگامی که خطایی رخ می دهد، فیلدهای تکمیل شده را بازنشانی نکنید. تمرکز بر روی زمینه مشکل.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) قطعات و تعاملی: الگوهای

دکمه ها در مقابل لینک ها: عمل = '<دکمه>'، پرش = '<a>'.
زبانه ها/آکاردئون ها: فلش های ناوبری، «aria-controls»، «aria-selected».
Modals/dialogs: "role =" dialog "," aria-modal = "true" ", focus trap," Esc "closes.
Tooltip/Popover: دسترسی به صفحه کلید، وقفه ها با خواندن تداخل ندارد.
کشیدن و رها کردن: جایگزین - حرکت به بالا/پایین دکمه، فلش صفحه کلید ؛ نه فقط با موش.

9) رسانه: ویدئو/صوتی/گرافیک

ویدئو: زیرنویس، متن، توضیحات صوتی جایگزین (AD) آهنگ.
صوتی: متن متن.
نمودارها/نمودارها: خلاصه متن («چه چیزی مهم است»)، جدول داده ها، برچسب های توصیفی محورها.
مناطق زندگی: "aria-live =" مودبانه "/" قاطعانه "- مراقب باشید که بیش از حد فریاد نزنید.

10) جداول و لیست ها

11) i18n، locales و RTL

خصیصۀ «لنگ» در ریشۀ زنگام ؛ فرمت های شماره/تاریخ/ارز محلی.
پشتیبانی RTL (عربی/عبری): آیکون های آینه ای، ترتیب ناوبری، نشانگر ها.
اجتناب از کلمات دوخته شده به آیکون (متن باید قابل ترجمه باشد).
فرمولاسیون ساده، اجتناب از اصطلاحات مخصوص یک صنف ؛ واژه نامه شرایط.

12) زمان، جلسات، captchas و جایگزین

Timeouts - با هشدار و توانایی گسترش.
CAPTCHA: گزینه های ترجیح می دهند (سوالات، تجزیه و تحلیل ربات نامرئی، تایید از طریق ایمیل/تلفن) ؛ اگر استفاده می کنید - یک جایگزین متن و نه تنها بصری.
تأیید اعتبار: پشتیبانی از مدیران رمز عبور، «نمایش رمز عبور»، WebAuthn.

13) دسترسی برای اختلالات حسی و حرکتی

حرکات باید معادل کلیک/صفحه کلید داشته باشند.
آیا نگه می دارد طولانی/شیر دو بدون جایگزین نیاز ندارد.
«لغو اشاره گر»: عمل باید در انتشار انجام شود، نه در «مطبوعات» برای دادن فرصتی برای لغو.

14) کشورها، اطلاعیه ها و هشدارها

استفاده از 'role = «وضعیت «/» هشدار »برای پیام های پویا.
تمرکز خود را با بنرهای چسبان نپوشانید.
اطلاعیه نان تست - با مکث در تمرکز/شناور و دسترسی از صفحه کلید.

15) طرح تست (دستی و خودکار)

• تمام اسکریپت های کلیدی را فقط با صفحه کلید منتقل کنید.
• بررسی تمرکز دید در هر مورد.
• زوم تا 200٪ - رابط کاربری بدون پیمایش افقی عملکردی است.
• روشن کردن حالت سیستم «کاهش حرکت» - انیمیشن ها دخالت نمی کنند.
• اسکریپت را با یک خواننده صفحه نمایش (NVDA/VoiceOver) منتقل کنید، مطمئن شوید که نقش ها/برچسب ها/سفارش درست هستند.

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

16) معیارهای کیفیت در دسترس بودن

پوشش A11y: نسبت اجزای با چک لیست تکمیل شده.
Keyboard-only Pass Rate: درصد اسکریپت های عبور شده توسط صفحه کلید.

مقایسه Violations/1k عناصر

SR Flow Time: زمان اجرای اسکریپت با خواننده صفحه نمایش.
بازخورد کاربر: شکایات در مورد در دسترس بودن، زمان پاسخ و اصلاحات.

17) چک لیست جزء

• معناشناسی صحیح/نقش بدون ARIA اضافی
• برچسب های امضا شده، «aria-» درست است
• کنترل کامل صفحه کلید، تمرکز قابل مشاهده است
• کنتراست متن/آیکون/مرز طبیعی است
• خطاها و شرایط توسط خواننده صفحه نمایش بیان می شود
• احترام ترجیح می دهد کاهش حرکت
• اندازه منطقه قابل کلیک ≥ 40-48 پیکسل
• محلی سازی و RTL طرح را شکستن نیست

18) ضد الگوهای

نگه دارنده به جای برچسب

خطا فقط در رنگ

«دکمه های Div» بدون نقش/صفحه کلید.
پنهان «طرح کلی: هیچ» تمرکز بدون جایگزین.
مدال ها بدون تله فوکوس و بدون «ESC».
فقط کشیدن بدون صفحه کلید.
طولانی خودکار پیمایش/اختلاف منظر بدون گزینه ای برای غیر فعال کردن.

19) نقش ها و فرآیند

A11y-owner در فرمان (محصول/طراحی/توسعه).
تعریف داده ها (DoD) شامل در دسترس بودن است.
بررسی طراحی: بررسی کنتراست، تمرکز، برچسب ها.
بررسی کد: معناشناسی/ARIA، تست صفحه کلید.

بررسی های منظم و برنامه بهبود

20) پیاده سازی با تکرار

• معناشناسی/عناوین، کنتراست، تمرکز و صفحه کلید، اشکال و خطاهای اساسی.

• مدال ها، زبانه ها/آکاردئون ها، جداول/نمودار ها با خلاصه متن، زیرنویس های ویدئویی، انیمیشن کاهش یافته است.

• تست خودکار در CI، RTL/i18n، معیارها، ممیزی های منظم، آموزش تیم.

21) قالب ها و قطعه ها

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) مینی سوالات متداول

آیا به یک «نسخه دارای اختلال بینایی» جداگانه نیاز دارم ؟

نه، اينطور نيست یک نسخه سازگار و قابل دسترس برای همه با تنظیمات.

آیا فقط برای بررسی کنتراست کافی است ؟

نه، اينطور نيست کنتراست فقط بخشی است نیاز به صفحه کلید، تمرکز، معانی، خطاهای فرم، رسانه ها و غیره

ARIA همه چیز را حل خواهد کرد ؟

ARIA معانی نادرست را تصحیح نخواهد کرد. اول برچسب های صحیح، سپس اصلاحات ARIA.

نتیجه گیری

در دسترس بودن یک نظم و انضباط سیستم است: معناشناسی → صفحه کلید/تمرکز → کنتراست/رنگ → فرم ها/اشتباهات → رسانه ها/برنامه ها → i18n/RTL → برنامه آزمون و معیارها. دسترسی به بخشی از فرهنگ وزارت دفاع و تیم - و محصول خود را خواهد شد واقعا همه کاره، قابل اعتماد و مناسب برای همه.