الـ accessibility بتاعة الـ widget نفسه
اللوحة بتشتغل إزاي مع الكيبورد والـ screen readers والتباين العالي والـ reduced motion، وبتتختبر إزاي.
في الصفحة دي
الـ widget اللي بيقدّم إعدادات accessibility لازم يكون هو نفسه accessible. اللوحة ماشية على patterns الـ WAI-ARIA وبتتختبر في كل إصدار.
الكيبورد
كل حاجة بتشتغل من غير ماوس.
| الزراير | بتعمل إيه |
|---|---|
| AltA | تفتح اللوحة أو تقفلها. وكمان بترجّع الـ widget بعد «إخفاء الأداة». |
| Esc | تقفل اللوحة (أو قائمة اللغات، أو وضع القراءة)؛ والـ focus بيرجع مكانه. |
| TabShift + Tab | تتنقل بين الـ controls. الـ focus بيفضل جوه اللوحة وهي مفتوحة. |
| EnterSpace | تدوس على الأزرار والـ switches وكروت الـ profiles؛ وتفتح الأقسام وتقفلها. |
| ←→ | تتنقل بين اختيارات الـ segmented choice. |
| ↑↓HomeEnd | تتنقل في قائمة اللغات؛ اكتب حرف عشان تنط على لغة. |
الـ assistive technology بتلاقي إيه
اللوحة بتستخدم roles و states قياسية، فالـ screen readers بتقراها زي أي control تاني.
- اللوحة modal dialog فيها focus trap. وهي مفتوحة، باقي الصفحة بيبقى
inert، فالـ virtual cursor بتاع الـ screen reader بيفضل جوّاها. Escape أو زرار الإغلاق أو كليك برّاها بيقفلها، والـ focus بيرجع لزرار الفتح. - الأقسام accordion (
aria-expanded)، والـ toggles عبارة عن switches (role="switch")، وكروت الـ profiles عبارة عن toggle buttons (aria-pressed)، والاختيارات الـ segmented عبارة عن radio groups. - أزرار الزيادة والنقصان (steppers) بتعلن القيمة الجديدة مع اسمها («حجم النص 120%») وبتقول لما توصل للحد. وإعادة الضبط كمان بتتعلن.
- قائمة اللغات combobox للاختيار بس (select-only) ومعاها listbox: الأسهم، و Home و End، والكتابة عشان تنط على طول (type-ahead).
- الـ touch targets على الأقل 30 في 30 pixel، واللوحة بتمشي ورا حجم الخط الـ default في المتصفح.
- لما الـ focus بالكيبورد يوصل لعنصر في الصفحة تحت زرار الفتح، الزرار بيتنحّى على جنب لحد ما الـ focus يتحرك (WCAG 2.4.11). وبيفضل مغطّي الركن بتاعه لمستخدمي الماوس واللمس.
- الـ widget عمره ما بيعدّل نفسه: حجم النص والمسافات والألوان والفلاتر بتتطبق على الصفحة بس، فاللوحة دايمًا شكلها وطريقة شغلها واحدة.
- بيحترم
prefers-reduced-motionو Windows High Contrast (forced-colors)، وفي الوضع ده الـ color filters بتاعته بتتقفل عشان ألوان السيستم هي اللي تكسب.
الاختبار
كل إصدار بيتشغّل في headless Chrome مع axe-core (من غير ما نسمح بأي violation) و scripts بالكيبورد بس، وبتغطي التعامل مع الـ focus، والـ reflow على عرض 320 pixel، وdestroy(). الاختبارات الأوتوماتيك مش بتغني عن screen readers حقيقية، فقبل الإصدارات الكبيرة بنطلب جولة يدوي مع NVDA و JAWS و VoiceOver و TalkBack و Windows High Contrast، وبتتسجّل في docs/at-test-matrix.md. تقرير المطابقة بتاع الـ widget (Accessibility Conformance Report، بصيغة VPAT 2.5 INT: WCAG 2.2 و EN 301 549 و Section 508) موجود في docs/ACR.md، وهيفضل draft، والنتايج اللي محتاجة اختبار بشري مكتوب قدامها Pending، لحد ما الجولة دي تتسجّل.
الـ accessibility statement
ACCESSIBILITY.md في الـ repository.