توافر وواجهات UX للجميع

1) لماذا يهم

من الناحية القانونية والأخلاقية: لا ينبغي أن تستبعد الواجهة الأشخاص الذين يعانون من إعاقات بصرية وسمعية وحركية وإدراكية.
تأثير الأعمال: المزيد من المستخدمين، وزيادة التحويل والاحتفاظ، وتحسين تحسين محركات البحث وجودة الكود.
من الناحية التشغيلية: إمكانية الوصول هي عملية وليست «إصلاحًا عشوائيًا».

2) الأساسيات والمبادئ (POUR)

يمكن إدراكه: التباين، النصوص البديلة، الترجمة.
قابل للتشغيل: يمكن الوصول إلى كل شيء من لوحة المفاتيح، والتركيز المرئي، والرسوم المتحركة للإيقاف المؤقت/التوقف.
الفهم: ملاحة يمكن التنبؤ بها، أخطاء واضحة، تركيبات بسيطة.
قوي: دلالات HTML/ARIA الصحيحة، والتوافق مع التقنيات المساعدة.

3) الدلالات والألقاب و ARIAs

ترميز دلالي قبل ARIA: «<button>»، «<nav>»، «<form>»، «<table>» - حسب الغرض.
التسلسل الهرمي للرأس: واحد «<h1>» لكل صفحة، ثم الهيكل المنطقي «<h2>» - «<h3>».
المعالم: «<header>»، «<main>»، «<aside>»، «<footer>»، «<nav>» - مساعدة قراء الشاشة.
ARIA فقط عند الحاجة: "الدور"، "aria-label'،" aria-descaped "،" aria-ended "،" aria-live ".
الدول/الأخطاء من خلال 'aria-invalid' و 'aria-errormessage'.

4) إدارة لوحة المفاتيح والتركيز

التحكم الكامل في لوحة المفاتيح: «Tab/Shift + Tab» - اطلب، «Enter/Space» - نشط، «Esc» - اخرج.
التركيز المرئي دائما ؛ لا تعطل الخطوط العريضة.
مصائد التركيز: في الوسائط - التركيز الدوري، إعادة التركيز إلى المصدر بعد الإغلاق.
لا ينبغي أن تقع العناصر المخفية في ترتيب علامة التبويب ("عرض: لا شيء"، "aria-hidden =" حقيقي ").
تخطي الروابط: «انتقل إلى المحتوى الرئيسي» - في بداية الصفحة.

5) اللون والتباين والطباعة

تباين النص: 4 على الأقل. 5:1 للنص العادي و 3:1 للنص الكبير.
لا تعتمد فقط على اللون: مكرر مع أيقونة/نمط/توقيع.
حجم الأهداف القابلة للنقر: 40-48 بكسل على الأقل، حقول كافية حولها.
الخطوط: محارف قابلة للقراءة، خط إلى سطر 1. 4–1. 6، طول الخط 45-90 حرفًا.

6) الحركة والرسوم المتحركة ووميض الصرع

احترم النظام الذي يفضل العلم المخفض الحركة - أضف الرسوم المتحركة المبسطة/تشابه التعطيل.
تجنب الومضات> 3 مرات/ثانية.
يجب أن تحتوي جميع الحركات التلقائية على وقفة/توقف/إخفاء.

7) النماذج والأخطاء والتحقق من الصحة

ربط الملصقات والحقول صراحة: «<label for =» id «>».
العنصر المساعد ليس ملصقًا.
رسائل خطأ بجوار الحقل وفي ملخص الخطأ في الأعلى ؛ الارتباط عبر «aria-descripty».
شرح شكل المدخلات، على سبيل المثال، القناع ؛ حدد الوحدات والعملة.
لا تعيد تعيين الحقول المكتملة عند حدوث خطأ ؛ استمر في التركيز على مجال المشاكل.

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

الصفة «lang» على جذر html ؛ الرقم المحلي/التاريخ/أشكال العملة.
دعم RTL (بالعربية/العبرية): يعكس الأيقونات، ترتيب الملاحة، المؤشرات.
تجنب الكلمات المخيطة في أيقونات (يجب أن يكون النص قابلاً للترجمة).
تركيبات بسيطة، تجنب المصطلحات ؛ مسرد المصطلحات.

12) الوقت والجلسات والكابتشا والبدائل

المهلة - مع تحذير والقدرة على التمديد.
CAPTCHA: تفضل البدائل (الأسئلة، محللات الروبوتات غير المرئية، التأكيد بالبريد/الهاتف) ؛ إذا كنت تستخدم - نص بديل وليس مرئيًا فقط.
المصادقة: دعم مديري كلمات المرور، «إظهار كلمة المرور»، WebAuthn.

13) إمكانية الوصول للإعاقات الحسية والحركية

يجب أن تحتوي الإيماءات على مكافئات النقر/لوحة المفاتيح.
لا تتطلب حوامل طويلة/مزدوجة بدون بديل.
«إلغاء المؤشر»: يجب تنفيذ الإجراء عند الإصدار، وليس على «الضغط» لإعطاء فرصة للإلغاء.

14) الدول والإشعارات والتنبيهات

استخدم "role =" status'/" alert' للرسائل الديناميكية.
لا تغطي تركيزك باللافتات اللزجة.
إشعارات الخبز المحمص - مع التوقف مؤقتًا عند التركيز/التحليق والوصول من لوحة المفاتيح.

15) خطة الاختبار (يدوية وتلقائية)

• مرر جميع النصوص الرئيسية فقط مع لوحة المفاتيح.
• تحقق من رؤية التركيز على كل عنصر.
• قم بالتكبير بنسبة تصل إلى 200٪ - تظل الواجهة تعمل بدون تمرير أفقي.
• قم بتشغيل وضع النظام «تقليل الحركة» - لا تتداخل الرسوم المتحركة.
• مرر النص باستخدام قارئ الشاشة (NVDA/VoiceOver)، وتأكد من صحة الأدوار/العلامات/الطلب.

• خطوط الوصول على مستوى المكونات.
• تحقق من التباين، النصوص البديلة، ترتيب الرأس، صلاحية ARIA.
• لقطات من الدلالات (شجرة الأدوار) للشاشات النقدية.

16) مقاييس جودة التوافر

التغطية A11y: نسبة المكونات ذات القوائم المرجعية المكتملة.
معدل اجتياز لوحة المفاتيح فقط: النسبة المئوية للنصوص التي تجتازها لوحة المفاتيح.
التباين Violations/1k العناصر.
SR Flow Time: وقت تشغيل النص مع قارئ الشاشة.
ملاحظات المستخدمين: الشكاوى المتعلقة بالتوافر ووقت الاستجابة والتصحيحات.

17) قائمة مرجعية للعناصر

• دلالات/دور صحيح بدون ARIA زائد
• علامات التوقيع، «aria -» صحيح
• التحكم الكامل في لوحة المفاتيح، التركيز المرئي
• تباين النص/الأيقونة/الحدود أمر طبيعي
• يعبر قارئ الشاشة عن الأخطاء والشروط
• الاحترام يفضل الحركة المخفضة
• مساحة قابلة للنقر ≥ 40-48 px
• التوطين و RTL لا يكسران التصميم

18) الأنماط المضادة

"Div-buttons' بدون دور/لوحة مفاتيح.
يخفي التركيز «المخطط: لا شيء» بدون بديل.
العنصر المساعد بدلاً من التسمية.
أخطاء في اللون فقط.
الوسائط بدون فخ التركيز وبدون «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.

النتيجة

التوافر هو نظام النظام: الدلالات لوحة المفاتيح/التركيز التباين/اللون الأشكال/الأخطاء الوسائط/الجداول خطة الاختبار والمقاييس. اجعل إمكانية الوصول جزءًا من وزارة الدفاع وثقافة الفريق - وسيكون منتجك متعدد الاستخدامات وموثوقًا به ومريحًا للجميع.