در دسترس بودن رابط تست

1) چرا و چه چیزی ما فکر می کنیم «آماده» است

• معیارهای WCAG 2 برآورده شده است. 1/2. 2 سطح AA برای سیستم عامل های هدف ؛
• رابط کاربری به طور کامل از صفحه کلید منتقل می شود ؛
• کار صحیح با خوانندگان صفحه نمایش ؛
• تضاد مطابق با هنجارها ؛
• تمام حالت ها/خطاها/وضعیت ها خارج از دید و بدون ماوس در دسترس هستند.
• محلی سازی، RTL، کاهش حرکت و ویژگی های تلفن همراه در نظر گرفته شده است.

2) استراتژی تست (A11y هرم)

1. Autotests/linters (پوشش سریع تا 40-60٪ از کلاس های مشکل).
2. چک کردن الگوی دستی (صفحه کلید، تمرکز، محتوا، منطق).
3. جلسات فناوری کمک (AT): خوانندگان صفحه نمایش، پوسته پوسته شدن، فیلتر رنگ.
4. تست های میدانی با کاربران (در صورت امکان).

هدف: برای گرفتن نقص سیستمیک در سطح جزء/الگوی به طوری که آنها در ویژگی های ضرب نیست.

3) چک لیست چک های اساسی (اجرای سریع)

• صفحه کلید: همه چیز توسط تب/فلش قابل دسترسی است ؛ نظم تمرکز منطقی است ؛ یک حقه بازی در مدل ها وجود دارد ؛ ESC/Enter/Space در حال کار هستند.
• شاخص تمرکز در هر موضوع/پس زمینه قابل مشاهده است.
• کنتراست: متن ≥ 4. 5:1 (منظم)، ≥ 3:1 (بزرگ)، آیکون ها/کنترل ها قابل خواندن هستند.
• معانی: برچسب های صحیح («دکمه»، «a»، «برچسب»، «ul/li»، «th/td»)، نقش ها و «aria» فقط در صورت لزوم.
• خواننده صفحه نمایش: عناوین سلسله مراتب، نام معنی دار دکمه ها/لینک ها، جایگزین برای آیکون ها/تصاویر.
• فرم ها: برچسب صریح، نکات/خطاها مرتبط هستند («aria-describby»)، متون خطا خاص هستند.
• دینامیک: تست ها/آگهی ها/خطاها از طریق «aria-live» («مودبانه »/« قاطعانه») اعلام می شود.
• احترام انیمیشن 'prefers-reduced-motion'; بدون «تکان دادن» رابط.
• محلی سازی/RTL: صفحه نمایش های کلیدی تراز وسط قرار دارد، اعداد/تاریخ/ارز توسط آب و برق فرمت شده است.
• تحرک: اهداف لمسی ≥ 44 × 44 پیکسل، زوم ممنوع نیست، چرخش صفحه نمایش محتوای شکستن نیست.

4) نقش ها، مسئولیت ها و مصنوعات

سیستم طراحی: الزامات A11y در توصیف هر جزء.
توسعه دهندگان: چک خودکار، تست واحد/تعامل با A11y-asserts.
QA: اسکریپت های دستی + در جلسات ؛ گزارش با شدت/فرکانس.
UX/Content: میکروکپی خطاها/وضعیت ها، خوانایی با صدای بلند.
مصنوعات: چک لیست ها، اسکریپت ها، صفحه نمایش AT، لیست نقص ها با منابع WCAG، توصیه ها.

5) چک های خودکار

لاینترها/آنالایزرها: تبر، eslint-plugin-jsx-a11y، pa11y، فانوس دریایی.
در خط لوله: ما PR را برای نقض بحرانی (تله های نقش/برچسب/کنتراست/برگه) مسدود می کنیم.
عکس های فوری کنتراست: تست های بصری تم ها/ایالت ها.

به یاد داشته باشید: ابزارهای خودکار معنی را آزمایش نمی کنند و تمرکز خود را با چشم خود نمی بینند - آزمایش های دستی لازم است.

6) تست دستی: سناریوها

6. 1 صفحه کلید

از طریق صفحه فقط با صفحه کلید (Tab/Shift + Tab/Enter/Space/arrows) بروید.
بررسی: دید متمرکز، اولویت، در دسترس بودن تمام اقدامات، عدم وجود عناصر «تله» و «مرده».
در حالت مودال: تمرکز در داخل، هنگامی که بسته می شود، به آغازگر باز می گردد.

6. 2 خواننده صفحه نمایش (حداقل مجموعه)

دسکتاپ: NVDA/JAWS (ویندوز)، VoiceOver (macOS).
موبایل: VoiceOver (iOS)، TalkBack (Android).
ما بررسی می کنیم: عنوان های صحیح (سلسله مراتب H)، نام دکمه ها/لینک ها، خواندن جداول ('th '/' scope')، اعلام وضعیت، خطاهای فرم قابل فهم.

6. ۳ محتوا و میکروکپی

ما متون مهم را با صدای بلند می خوانیم - بدون ابهام، بدون «خطای 400».
خطا = «چه چیزی اشتباه است + چگونه رفع + محدودیت/فرمت».

6. ۴ دینامیک و مناطق زندگی

تست موفقیت "aria-live =" مودبانه "است، خطا" قاطعانه "است.
پیشرفت/دانلود توضیح داده شده توسط متن ؛ اسکلت به اسپینر ترجیح داده می شود.

7) فرم ها و خطاها (در عمق)

هر فیلد یک برچسب مرتبط دارد (نه یک نگهدارنده).
خطاها با فیلد مرتبط هستند: «aria-invalid =» true «،» aria-describby = «[شناسه خطا]».
فرمول های فرمت (تاریخ، شماره تلفن) از قبل مشخص شده است. ماسک ها ورودی/درج را خراب نمی کنند.
بنر خلاصه ای از خطاها هنگام ارسال + پیمایش خودکار و تمرکز بر اولین خطا.
متن خطا: خاص، بدون اصطلاحات فنی.

8) جداول، لیست ها، نمودار ها

جداول: سرصفحه «THبا» دامنه = «COL/ردیف»، امضا، رزومه کاری.
لیست ها «ul/ol/li» واقعی هستند، نه divas.

نمودار ها - جداول/توضیحات جایگزین ؛ افسانه ها در دسترس هستند رنگ ها ≠ یک سیگنال

9) چند رسانه ای و انیمیشن

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

GIF/microanimations: خاموش کردن زمانی که «حرکت کاهش یافته» را ترجیح می دهد ؛ جلوگیری از شیوع

ارتعاشات/صداها - اختیاری و تکراری بصری/متن.

10) دسترسی به تلفن همراه

≥ تعاملی 44 × 44 پیکسل، فواصل کافی.
مقیاس پذیری را ممنوع نکنید (meta viewport بدون «مقیاس پذیر کاربر = هیچ»).
فرم/صفحه کلید: انواع صحیح («تلفن»، «ایمیل»، «شماره»)، قابلیت های سیستم را پنهان نمی کند.
بررسی در موضوع تاریک و با فونت سیستم «بیشتر».

11) محلی سازی، اعداد و RTL

رشته ها از طریق کلید های i18n با زمینه ؛ زبان های طولانی (DE/TR) طرح را خراب نمی کنند.
فرمت های تاریخ/ارز - خدمات، نه رشته ها.
حالت RTL: آیکون های ناوبری را آینه کنید، سفارش تمرکز و حمل، ورودی دو طرفه را بررسی کنید.

12) ویژگی جریان بحرانی (iGaming)

پرداخت/نتیجه گیری

دستورالعمل های روشن، محدودیت/مهلت/کمیسیون - در متن.
خطاهای ارائه دهنده به صراحت اعلام, بدون کد; یک جایگزین برای عمل وجود دارد.
تأیید عملیات: تمرکز بر CTA منطقی، لغو پذیری.

CCM/تأیید

نکات گام به گام برای عکس ها/اسناد ؛ پیشرفت و ETA

خطاهای تار/درخشان/کوتاه - با نمونه هایی از اصلاح.
لحن خنثی، بدون شوخ طبعی.

13) ارزیابی شدت نقص

مسدود کننده: کار کلیدی (صفحه کلید/صفحه نمایش خوان) را نمی توان تکمیل کرد.
بحرانی: عملکرد انتقادی کار می کند، اما با موانع جدی.
عمده: می شود در راه است، یک راه حل وجود دارد.
جزئی: لوازم آرایشی/عدم رعایت راهنماهای بدون تاثیر بر کار.

هر نقص یک مرجع به معیار WCAG است و اسکریپت بازتولید می شود.

14) تعریف انجام شده (A11y)

عبور از اسکریپت صفحه کلید بدون ماوس 100٪ است.
تبر/فانوس دریایی: هیچ نقض انتقادی/بالا.
کنتراست AA در تمام تم ها/ایالت ها.
صفحه نمایش خواننده اجرا از مسیرهای کلیدی (نوار پیمایش، قالب، مدال، نان تست).
مستندات A11y برای اجزاء/ویژگی های جدید (مدل نقش، آریا، تمرکز، نمونه ها).

رگرسیون تست A11y سبز در CI

15) فرآیندها و اتوماسیون

قبل از توسعه: A11y-criteria در وظایف، طرح بندی با حالت تمرکز/خطا.
در حال توسعه: linters/ahe در طول مونتاژ محلی ؛ تصاویر فوری کنتراست/تمرکز.
در CI: pa11y/axe-scan توسط صفحات بحرانی ؛ ساخت قطره تحت مسدود کننده/بحرانی.
پس از انتشار: ممیزی سه ماهه، نظارت بر شکایات کاربران توسط A11y-tag.

16) ضد الگوهای

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

'div' به جای 'دکمه '/' a'.
حلقه های تمرکز معلول «به خاطر زیبایی».
رنگ به عنوان تنها حامل وضعیت.

مدلهای بدون تله فوکوس/ESC

بدون پوسته پوسته شدن بر روی تلفن همراه.

خطای 400/500 بدون توضیح انسانی

17) قالب اسکریپت تست

سناریو 1 - ناوبری صفحه کلید (صفحه فرم)

1. برگه را به فیلد اول وارد کنید، داده ها را وارد کنید.
2. Shift + Tab back - ترتیب صحیح را بررسی کنید.
3. اعتبار سنجی تماس (ارسال) - تمرکز به اولین خطا حرکت می کند.
4. مدولاتور را با کلید ESC ببندید، تمرکز به آغازگر بازگشت.

سناریو 2 - صفحه خوان (صفحه پرداخت)

1. به سرصفحه صفحه بروید (h1)، به بخش ها گوش دهید.
2. انتخاب روش را باز کنید - اعلامیه نقش ها/ایالت ها شنیده می شود.
3. عمدا یک خطای مجموع ایجاد کنید - پیام خوانده شده و با فیلد مرتبط است.
4. نان تست پرداخت موفق اعلام «مودب».

سناریوی 3 - دینامیک

1. عملیات را با انتظار> 3 ثانیه شروع کنید - متن در مورد روند/ETA وجود دارد.
2. در صورت خطای شبکه - بنر «قاطعانه» که از صفحه کلید قابل دسترسی است، یک مسیر «تکرار/کمک» وجود دارد.

18) میکرو قالب های مفید

نقش/آریا برای نان تست

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

خطای پیوند به فیلد

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (ویژگی های معنایی)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) برنامه پیاده سازی سریع برای شیوه های A11y

1. حسابرسی اجزاء/الگوهای فعلی (معنای کنتراست/تمرکز/نقش).
2. ویرایش سیستم طراحی: اضافه کردن یک پارتیشن A11y به هر جزء.
3. ابزارها: خطوط up/axe/pa11y/Lighthouse را به صورت محلی و در CI تنظیم کنید.
4. آموزش: راهنماهای کوتاه برای طراحان/توسعه دهندگان/copywriters.
5. خلبان: رفع 3-5 از شایع ترین نقص (مدال، فرم، نان تست).

6. مقررات: وزارت دفاع با معیارهای A11y ؛ حسابرسی سه ماهه

برگه تقلب نهایی

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

اعلام وضعیت از طریق aria-live ؛ اشتباهات - مربوط به زمینه ها

احترام حرکت را کاهش می دهد، مقیاس را ممنوع نکنید.
فکر می کنم معانی (برچسب ها/نقش ها)، نه «آنچه به نظر می رسد».
خودکار چک، اما همیشه با آنهایی که دستی مکمل.
رفع نقص با اشاره به WCAG، شدت و اسکریپت پخش.