إمكانية الوصول

كيف نبني للمستخدمين الذين يعتمدون على لوحة المفاتيح، وقارئات الشاشة، وضعاف البصر، والمستخدمين ذوي الإمكانيات التقنية المحدودة. لقطة صادقة ومؤرخة.

نكتب هذه الصفحة بالطريقة التي تُكتب بها بقية الموقع: ما يعمل، وما لا يعمل، وكيفية التحقق من ذلك بنفسك. إنها مؤرخة لأن إمكانية الوصول هدف متحرك. نُعيد الاختبار بعد كل إصدار رئيسي.

بيان إمكانية الوصول الرسمي

المعيار المستهدف

WCAG 2.2 AA عبر التجربة بأكملها. معالجة AAA لمظهر التركيز (حلقات ذات تباين عالٍ وسميكة، غير محجوبة) ولتسمية النماذج + استعادة الأخطاء. يُتتبع وفق توصية W3C، لا وفق صياغة موجزة.

آخر تدقيق داخلي

2026-04-19. مراجعة يدوية من فريقنا للصفحة الرئيسية، وprint-size، ومحور /standards/ + 9 صفحات سلطة، و45 صفحة هبوط لمخططات الدفع.

التدقيق الخارجي

مُكلَّف به، التقرير معلق. سيُنشر عند الوصول على /accessibility/audit/ مع ملاحظات المعالجة, العيوب مُدرجة، لا انتقاء.

دورية إعادة الاختبار

فحص شهري عشوائي + مراجعة يدوية كاملة بعد أي تغيير رئيسي في الواجهة. تعمل الفحوصات الآلية (تدقيق التباين، مسح معايير WCAG 2.2 الجديدة) عند كل نشر.

التواصل + اتفاقية مستوى الخدمة

hello@abundera.ai, نُقرّ بتقارير إمكانية الوصول خلال يومي عمل، ونُصنّفها خلال 5، ونُعامل عوائق لوحة المفاتيح / قارئ الشاشة / المعرفية باعتبارها مسائل ذات أولوية (يُشحن قبل أعمال الميزات).

مطابقة WCAG 2.2 AA حسب معيار النجاح

المعايير الجديدة في الإصدار 2.2 التي نرصدها بنشاط. تعكس الحالة ما تحققنا منه داخلياً؛ التدقيق الخارجي سيتجاوزه.

دعم الحركة والألوان المفرضة

• prefers-reduced-motion: reduce, يتم قمع انتقالات الطفو والتلاشي للكرة المحيطية. تبقى الانتقالات الوظيفية قصيرة. تم التحقق مع macOS Reduce Motion وWindows "إظهار الرسوم المتحركة" معطّل.
• forced-colors: active (وضع التباين العالي في Windows), تستخدم حلقات التركيز لون Highlight للنظام؛ تَرث الحدود CanvasText للنظام. تم التحقق في Edge على Windows 11 High Contrast.

القيود المعروفة

• JAWS لم يُختبر بعد. تستهدف جولة AT القادمة JAWS على Edge على Windows 11.
• مصمم بطاقة العمل مصمم أولاً للفأرة لمعاينة السحب والإفلات. كل عنصر تحكم له بديل لوحة مفاتيح، لكن حلقة التغذية الراجعة المباشرة لا تزال مرئية. حقول الألوان وشبكة الإعدادات المسبقة وحقول hex لها الآن روابط ARIA صريحة (2026-04-19).
• تقرير التدقيق الخارجي معلق. ستُستبدل الحالة المعتمدة ذاتياً في الجدول أعلاه بنتائج المدقق عند وصول التقرير.
• بعض تقنيات المساعدة التابعة لجهات خارجية (Dragon NaturallySpeaking، التحويل من الكلام إلى نص على Android) ليست في مصفوفة الانحدار لدينا؛ نقبل تقارير المجتمع ونُصلح حسب التذكرة.

سجل التغييرات لإمكانية الوصول

• 2026-04-19 (مساءً), تم إصلاح الإطلاق المزدوج للمنطقة المباشرة في TalkBack: تمت إزالة aria-live="polite" من غلاف #qr-preview؛ الإعلانات تأتي الآن فقط من شارة قابلية الفحص role="status"، مرة واحدة لكل توليد. مودال BCD: حصلت منتقيات الألوان على روابط <label for> صحيحة (الخلفية، النص، اللكنة، التدرج)؛ حصل حاوي شبكة الإعدادات المسبقة على role="group" + aria-label. حصلت جداول إمكانية الوصول على <caption> + scope="col"/"row", WCAG 2.2 AA + تُعلن مصفوفة AT الآن بشكل صحيح على VoiceOver وNVDA وTalkBack.
• 2026-04-19 (صباحاً), تمت ترقية مؤشرات التركيز (3 px + نسخة احتياطية box-shadow). تمت إضافة دعم forced-colors + prefers-reduced-motion. تدقيق حجم الهدف: تم رفع .saved-profile-delete و.type-search-clear و.compat-toggle-btn إلى ≥ 28 px. تم إصلاح تخطي مستوى العنوان (عناوين vCard/MECARD الفرعية h4 → h3). نُشر بيان WCAG 2.2 AA الرسمي + مصفوفة AT.
• 2026-04-18, تم توثيق تمريرة خط الأساس اليدوية لـ WCAG 2.2 AA. انهار شريط الثقة ذو الأربعة أعمدة لتسلسل هرمي أنظف.
• 2026-03-08, نُشرت صفحة /accessibility/ الأولية.

ما نلتزم به

• التنقل الكامل بلوحة المفاتيح. كل عنصر تحكم في المولد وكل مودال وكل تدفق تصدير يمكن الوصول إليه بدون فأرة.
• حالات تركيز مرئية. تُظهر المدخلات والأزرار والروابط المركّزة حلقة واضحة. لا نعتمد على اللون وحده.
• تسميات على كل حقل. تحتوي مدخلات النماذج على عناصر <label> مرتبطة أو سمات aria-label. لا يُستخدم نص العنصر النائب كتسمية وحيدة أبداً.
• مناطق ARIA المباشرة لمعاينة QR والإشعارات. يسمع قراء الشاشة "تم توليد QR" ورسائل الإشعارات عند إطلاقها، لا فقط عند انتقال التركيز إليها.
• بدائل نصية للأزرار ذات الأيقونات فقط. aria-label على كل زر SVG فقط.
• معنى الحالة المستقل عن اللون. تجمع شارات قابلية الفحص وشرائح التوافق اللونَ مع رمز ونص.
• أسماء صريحة لتنسيق التصدير. تقول أزرار التنزيل "تنزيل PNG" و"تنزيل SVG" وما إلى ذلك، لا مجرد "تنزيل".
• أهداف اللمس الكبيرة على الهاتف المحمول. العناصر التفاعلية بحجم لا يقل عن 44 × 44 بكسل CSS على المؤشرات الخشنة، وفقاً لـ WCAG 2.5.8.
• احترام الحركة المخفضة. تعطّل الانتقالات تحت prefers-reduced-motion: reduce.

أين لا نزال نقصر

• JAWS لم يُختبر بعد. تم الحصول على ترخيص JAWS، وتم حجز وقت اختبار لجولة AT القادمة. جميع التطبيقات الرئيسية الأخرى (VoiceOver macOS + iOS وNVDA وNarrator وTalkBack) اجتازت أحدث انحدار.
• مصمم بطاقة العمل ثقيل الاعتماد على الفأرة من حيث التصميم (سحب للموضع، معاينة القماش). توجد بدائل لوحة المفاتيح لكل عنصر تحكم لكن حلقة تغذية معاينة مباشرة لا تزال تعطي الأولوية للعين. تستخدم عناصر تحكم الألوان الآن روابط <label for> صحيحة + role="group" على منتقي الإعدادات المسبقة (2026-04-19).
• تدفقات المولد المعقدة (CSV دفعي، معالج متعدد الخطوات) يمكن أن تستفيد من بنية رابط تخطي أفضل. مخطط له.
• ملخصات وصفية للجداول. حصلت جداول إمكانية الوصول + التوافق الآن على سمات <caption> + scope (2026-04-19). لا تزال ملخصات سردية أطول على مستوى الصف لكل صف مخططاً لها.

مصفوفة دعم تقنية المساعدة

منتَج هندسي، لا بيان علاقات عامة. كل صف هو مجموعة حقيقية من متصفح + AT + منصة لمسناها فعلياً. تعكس الحالة آخر تمريرة يدوية؛ يسجّل باب التحفظات أي شيء يحجب تمريرة كاملة.

دورية الإصدار: تُعاد تشغيل المصفوفة مقابل كل تغيير رئيسي في الواجهة. "ناجح" = لا عوائق؛ التحفظات انحدارات مظهرية أو ضيقة النطاق في قائمة انتظار الإصدار التالي. "لم يُختبر" = لم ننفذ المجموعة فعلياً بعد, نقولها بدلاً من الحذف.

خريطة لوحة المفاتيح

• Tab / Shift+Tab: التنقل للأمام / للخلف عبر العناصر القابلة للتركيز.
• Enter / مسافة: تنشيط الأزرار والتبديلات.
• مفاتيح الأسهم: التنقل بين الخيارات داخل مجموعة راديو (محدد النوع، منتقي القالب، شريط التبويبات).
• Escape: إغلاق المودالات (مصمم بطاقة العمل، قبل الطيران، خدمات الطباعة، اقتصاص الصورة).
• Home / End داخل قائمة فائضة للانتقال إلى أول / آخر عنصر.

التدقيق الداخلي, 2026-04-19

تمريرة يدوية لـ WCAG 2.2 AA مقابل الصفحة الرئيسية و/print-size/ والمحور الجديد /standards/ + 9 صفحات سلطة، و45 صفحة هبوط لمخططات الدفع (التي ترث من القالب المشترك). ما تحققنا منه، وما أصلحناه، وما هو مفتوح:

تم التحقق من نجاحه

• يوجد هدف رابط التخطي, يُحَل رابط التخطي (href="#generator") إلى عنصر مرئي على كل متغير صفحة.
• أنماط التركيز المرئية, يُعلن :focus-visible عالمياً بخط بسماكة 2px، بالإضافة إلى تجاوزات لكل مدخل بحد ملون + ظل. تم التأكيد عبر تدقيق CSS في السطرين 34 و88 من site/css/style.c17bfd85.css.
• جميع مدخلات النماذج لها تسميات, كل <input> / <select> / <textarea> في المولد لديه إما <label for="..."> صريح أو <label> مُحيط. لا يُستخدم النص النائب كتسمية في أي مكان.
• الأزرار لها أسماء يمكن الوصول إليها, كل <button> إما يحتوي على نص أو يحمل aria-label. تحمل أزرار SVG فقط (الهامبرغر والمشاركة والتثبيت) جميعها aria-label.
• SVGs الزخرفية مُعلَّمة كمخفية, aria-hidden="true" على كل أيقونة زخرفية حتى تتخطاها قراءة الشاشة بدلاً من الإعلان عن هندستها.
• أدوار ARIA صحيحة, role="radiogroup" على محدد النوع مع role="radio" + aria-checked على كل خيار؛ role="tablist" / role="tab" + aria-selected على تبويبات اللوحة.
• تباين النص, النص الأساسي هو #f5f5f5 على #08090a (≈ 17:1، WCAG AAA). النص المُخفف #a3a3a3 على نفس الخلفية ≈ 8:1 (فوق AAA 7:1).
• منتقي اللغة يحمل aria-label="Language" رغم أن التسمية المرئية ضمنية.

تم إصلاحه في هذه التمريرة

• تخطي مستوى العنوان, كانت ثلاثة عناوين فرعية داخل أقسام الحقول الإضافية لـ vCard / MECARD بمستوى <h4> تحت <h2> بدون <h3> وسطية. أشارت أدوات المخطط التفصيلي لقارئ الشاشة إلى هذا بوصفه "مستوى مُتخطى". تم التغيير إلى <h3> حتى يقرأ المخطط h1 → h2 → h3 → h3 بشكل نظيف.

القيود المعروفة

• الفحص الكامل لـ Axe / NVDA / VoiceOver يتطلب متصفحاً + AT لا يمكننا تشغيله من خط أنابيب البناء. يُجدول تمرير يدوي قائم على المتصفح شهرياً.
• التدقيق المستقل من طرف ثالث مُكلَّف به (انظر العنصر النائب /accessibility/audit/). سيُنشر التقرير عند الوصول حتى لو كان يحتوي على نتائج.
• اختصار لوحة المفاتيح "/" للوحة الأوامر هو خطر تصادم طفيف على الصفحات ذات حقول البحث. نستخدم preventDefault() فقط عندما يكون التركيز خارج المدخل؛ موثق لكن لم يُدقق بعد مع AT.

الإبلاغ عن مشكلة

إذا كان شيء ما غير قابل للوصول بلوحة المفاتيح، أو مُعنوَن بشكل خاطئ، أو غير قابل للاستخدام بإعدادك بأي طريقة، أرسل بريداً إلكترونياً إلى hello@abundera.ai. أدرج متصفحك ونظام التشغيل وتقنية المساعدة والتدفق المحدد. نعامل أخطاء إمكانية الوصول باعتبارها مسائل ذات أولوية.

آخر مراجعة: 2026-04-19. المراجعة التالية: بعد التغيير الرئيسي التالي في الواجهة.