تعني إمكانية الوصول إلى الويب بناء مواقع ويب يمكن للأشخاص ذوي الإعاقة استخدامها بشكل فعال. يشمل ذلك الأشخاص الذين يستخدمون برامج قراءة الشاشة، والتنقل باستخدام لوحة المفاتيح فقط، والتحكم الصوتي، ومكبرات الشاشة، أو الذين لديهم قيود في رؤية الألوان. في نظام WordPress البيئي، تعتبر إمكانية الوصول متطلبًا قانونيًا في العديد من الولايات القضائية وطريقة عملية للوصول إلى جمهور أوسع - أكثر من 1 مليار شخص حول العالم لديهم شكل من أشكال الإعاقة.
في هذا الدليل، نغطي خطوات عملية لجعل موقع WordPress الخاص بك قابلاً للوصول، وفقًا لإرشادات إمكانية الوصول لمحتوى الويب (WCAG) 2.2 على مستوى AA - المعيار المطلوب بشكل شائع بموجب قوانين إمكانية الوصول بما في ذلك ADA (الولايات المتحدة)، وEAA (الاتحاد الأوروبي)، وAODA (كندا).
فهم مبادئ WCAG 2.2
تنظم WCAG حول أربعة مبادئ، تعرف باسم POUR:
| المبدأ | ما يعنيه | أمثلة WordPress |
|---|---|---|
| قابل للإدراك | يمكن للمستخدمين إدراك المحتوى من خلال البصر أو السمع أو اللمس | نص بديل للصور، تسميات توضيحية للفيديوهات، تباين لوني كافٍ |
| قابل للتشغيل | يمكن للمستخدمين التنقل والتفاعل مع الواجهة | التنقل باستخدام لوحة المفاتيح، روابط التجاوز، عدم وجود فخاخ لوحة المفاتيح |
| قابل للفهم | يمكن للمستخدمين فهم المحتوى وكيفية استخدام الواجهة | لغة واضحة، تنقل متسق، رسائل خطأ |
| قوي | يعمل المحتوى عبر المتصفحات والأجهزة والتقنيات المساعدة | HTML صالح، أدوار ARIA صحيحة، تعليمات دلالية |
اختيار قالب قابل للوصول
تشكل بنية HTML لقالب WordPress الخاص بك وCSS أساس إمكانية الوصول لموقعك. عند اختيار قالب WordPress، قم بتقييم هذه العوامل المتعلقة بإمكانية الوصول:
- HTML دلالي: يستخدم القالب عناصر HTML5 الصحيحة (header، nav، main، article، aside، footer) بدلاً من divs العامة لكل شيء
- تسلسل العناوين: H1 → H2 → H3 يتبع ترتيبًا منطقيًا دون تخطي المستويات
- روابط التجاوز: يوجد رابط "تجاوز إلى المحتوى" كأول عنصر يمكن التركيز عليه، مما يسمح لمستخدمي لوحة المفاتيح بتجاوز التنقل
- التنقل باستخدام لوحة المفاتيح: جميع العناصر التفاعلية (الروابط، الأزرار، النماذج) يمكن الوصول إليها واستخدامها باستخدام مفتاح Tab
- مؤشرات التركيز: العناصر المركزة لها حدود أو تمييز مرئي (لا يتم إزالته باستخدام outline: none)
- تباين الألوان: النص يفي بنسب تباين WCAG AA (4.5:1 للنص العادي، 3:1 للنص الكبير)
القوالب المعلمة "جاهزة للإمكانية الوصول" على WordPress.org قد اجتازت مراجعة إمكانية وصول أساسية. ومع ذلك، تشير هذه العلامة إلى نقطة انطلاق، وليس الامتثال الكامل لـ WCAG. من بين القوالب الشائعة، GeneratePress يتميز بترميز جيد مع HTML دلالي نظيف ومعالم ARIA صحيحة.
إمكانية الوصول إلى الصور
نص بديل
كل صورة ذات معنى تحتاج إلى نص بديل وصفي. يجعل WordPress هذا الأمر بسيطًا - حقل النص البديل متاح في مكتبة الوسائط وعند إدراج الصور في المحتوى.
| نوع الصورة | نهج النص البديل | مثال |
|---|---|---|
| صورة منتج | وصف المنتج | "حقيبة جلدية حمراء عبر الجسم مع مشبك ذهبي، عرض أمامي" |
| لقطة شاشة | وصف ما تظهره لقطة الشاشة | "لوحة تحكم WordPress تظهر صفحة الإضافات مع 12 إضافة نشطة" |
| مخطط معلوماتي | تلخيص المعلومات الرئيسية | "مخطط مقارنة: ميزات Elementor مقابل Gutenberg. يحتوي Elementor على أكثر من 100 عنصر واجهة، بينما يحتوي Gutenberg على أكثر من 90 كتلة" |
| صورة زخرفية | نص بديل فارغ (alt="") | أنماط خلفية، فواصل، أيقونات زخرفية بحتة |
| مخطط/رسم بياني | وصف الاتجاه أو نقطة البيانات الرئيسية | "مخطط خطي يظهر زيادة حركة المرور على الموقع بنسبة 45% من يناير إلى ديسمبر 2025" |
تحسين الصور من أجل إمكانية الوصول
- لا تستخدم صور النص - استخدم نصًا فعليًا مصممًا باستخدام CSS بدلاً من ذلك
- تأكد من أن النص المضمن في الصور يفي بمتطلبات التباين
- قدم أوصافًا طويلة للصور المعقدة (المخططات، الرسوم البيانية) باستخدام فقرة مجاورة أو سمة longdesc
- تأكد من أن الصور لها أبعاد مناسبة حتى لا تتسبب في تغييرات في التخطيط (CLS)
التنقل باستخدام لوحة المفاتيح
يستخدم العديد من المستخدمين مواقع الويب بالكامل باستخدام
لوحة المفاتيح—Tab للتحرك للأمام، Shift+Tab للتحرك للخلف، Enter لتفعيل الروابط/الأزرار، Space لتبديل مربعات الاختيار والنقر على الأزرار، وEscape لإغلاق النوافذ المنبثقة.
مشاكل الوصول الشائعة باستخدام لوحة المفاتيح
- فخاخ التركيز: حوارات النوافذ المنبثقة التي لا تسمح بالعودة إلى المحتوى الرئيسي (يجب أن تحصر النوافذ المنبثقة التركيز داخلها، ويجب أن يغلقها Escape)
- مؤشرات التركيز المفقودة: CSS الذي يزيل المخطط الافتراضي للعناصر المركزة (لا تستخدم *:focus { outline: none } بشكل عام)
- عناصر غير تفاعلية مع معالجات النقر: Divs أو spans مع أحداث onClick التي ليست قابلة للوصول عبر لوحة المفاتيح (استخدم الأزرار أو الروابط بدلاً من ذلك)
- قوائم منسدلة تفتح فقط عند التحويم: لا يمكن لمستخدمي لوحة المفاتيح تفعيل حالات التحويم. يجب أن تفتح القوائم عند التركيز/Enter أيضاً
- مكونات مخصصة بدون ARIA: علامات التبويب، والأكورديونات، والدورات التي تم بناؤها بدون أدوار ARIA الصحيحة ومعالجات لوحة المفاتيح
اللون والتباين
يتطلب WCAG AA هذه النسب الدنيا للتباين:
| العنصر | النسبة الدنيا | مثال (نجاح) | مثال (فشل) |
|---|---|---|---|
| نص عادي (<18px) | 4.5:1 | #333 على #fff (12.6:1) | #999 على #fff (2.8:1) |
| نص كبير (≥18px أو ≥14px غامق) | 3:1 | #555 على #fff (7.4:1) | #aaa على #fff (2.3:1) |
| مكونات واجهة المستخدم (الأزرار، المدخلات) | 3:1 | زر أزرق #2563eb (4.6:1) | زر أزرق فاتح #93c5fd (1.8:1) |
| محتوى غير نصي (أيقونات، حدود) | 3:1 | أيقونة داكنة على خلفية فاتحة | أيقونة رمادية فاتحة على خلفية بيضاء |
استخدم أدوات مثل أداة التحقق من التباين من WebAIM أو ملحق متصفح axe للتحقق من نسب التباين. لا تعتمد على اللون وحده لنقل المعلومات—استخدم تسميات نصية، أو أنماط، أو أيقونات بالإضافة إلى ترميز الألوان.
الوصول إلى النماذج
تعتبر النماذج واحدة من أكثر المجالات أهمية للوصول. سواء كنت تستخدم كتل غوتنبرغ، Gravity Forms، أو WPForms:
- تسمية كل مدخل: استخدم عنصر <label> المرتبط بكل مدخل عبر سمة for/id. النص الوصفي ليس بديلاً عن التسميات
- تجميع الحقول ذات الصلة: استخدم <fieldset> و<legend> لمجموعات المدخلات ذات الصلة (مثل، حقول عنوان الشحن)
- توفير رسائل الخطأ: عندما تفشل عملية التحقق، حدد أي حقل به الخطأ واشرح كيفية إصلاحه. استخدم aria-describedby لربط رسائل الخطأ بحقولها
- تمييز الحقول المطلوبة: استخدم سمة required وأشر بصريًا إلى الحقول المطلوبة بالنص (ليس فقط نجمة)
- دعم الإكمال التلقائي: أضف سمات الإكمال التلقائي المناسبة (الاسم، البريد الإلكتروني، الهاتف، عنوان السطر 1) حتى تتمكن المتصفحات من ملء بيانات النموذج تلقائيًا
الوصول إلى المحتوى
هيكل العناوين
يساعد التسلسل الهرمي الصحيح للعناوين مستخدمي قارئات الشاشة على فهم هيكل الصفحة والتنقل بين الأقسام. القواعد:
- عنوان H1 واحد لكل صفحة (عنوان الصفحة/المقال)
- H2 للأقسام الرئيسية
- H3 للفرعيات داخل H2
- لا تتخطى المستويات (H2 → H4 بدون H3 غير صحيح)
- لا تستخدم العناوين للتصميم المرئي—استخدم فئات CSS بدلاً من ذلك
نص الرابط
تجنب نص الرابط العام الذي لا معنى له خارج السياق:
| نص رابط ضعيف | نص رابط قابل للوصول |
|---|---|
| "انقر هنا" | "اقرأ دليل أمان ووردبريس" |
| "اقرأ المزيد" | "اقرأ مراجعة Elementor Pro الكاملة" |
| "تعلم المزيد" | "تعلم كيفية تحسين عملية الدفع في WooCommerce" |
| "هنا" | "قم بتنزيل تقرير معايير الأداء" |
الجداول
يجب أن تتضمن جداول البيانات:
- <thead> مع عناصر <th> لعنوان الأعمدة (مع scope="col")
- <th scope="row"> لعنوان الصفوف
- عنصر <caption> يصف غرض الجدول
- هيكل بسيط—تجنب الخلايا المدمجة عند الإمكان، حيث يصعب على قارئات الشاشة تفسيرها
اختبار وصول موقعك
| الأداة | النوع | ما تختبره |
|---|---|---|
| axe DevTools | ملحق متصفح | اختبار WCA الآلي |
| الكشف عن انتهاكات G | ||
| WAVE | إضافة متصفح / ويب | تقييم الوصول البصري مع تعليقات توضيحية مدمجة |
| Lighthouse | Chrome DevTools | تدقيق الوصول مع درجات وتوصيات |
| اختبار لوحة المفاتيح | يدوي | التنقل في الموقع بالكامل باستخدام Tab وEnter وEscape فقط |
| قارئ الشاشة | يدوي | اختبار مع VoiceOver (ماك) وNVDA (ويندوز) أو TalkBack (أندرويد) |
تلتقط الأدوات الآلية حوالي 30-50% من مشكلات الوصول. من الضروري إجراء اختبار يدوي باستخدام لوحة المفاتيح وقارئ الشاشة لتحديد المشكلات القائمة على التفاعل التي لا يمكن للأدوات الآلية اكتشافها.
إضافات ووردبريس للوصول
- WP Accessibility: تضيف روابط تخطي، تصلح مشكلات الوصول الشائعة، تضيف شريط أدوات لتفضيلات المستخدم
- One Click Accessibility: تضيف شريط أدوات وصول في الواجهة الأمامية (حجم الخط، التباين، تسليط الضوء على الروابط)
- قوالب البداية مع الوصول: Astra وGeneratePress كلاهما لهما أسس قوية للوصول في قوالبها الأساسية
ملاحظة: يتم انتقاد إضافات التراكب للوصول (التي تضيف أداة عائمة مع أزرار "إصلاح") على نطاق واسع من قبل مجتمع الوصول. إنها لا تجعل الموقع متاحًا - بل تضيف طبقة سطحية يمكن أن تتداخل فعليًا مع التكنولوجيا المساعدة. ركز على بناء الوصول في قالبك ومحتواك بدلاً من الاعتماد على التراكبات.
للمزيد من التفاصيل، يرجى الرجوع إلى الوثائق الرسمية: إرشادات WCAG, فريق وصول ووردبريس.
أسئلة متكررة
هل ووردبريس متاح من الصندوق؟
تحسنت نواة ووردبريس بشكل كبير في الوصول. لوحة التحكم قابلة للتنقل بشكل كبير باستخدام لوحة المفاتيح، ويتضمن محرر الكتل تسميات ARIA. ومع ذلك، يعتمد وصول موقعك بشكل كبير على القالب والإضافات التي تستخدمها. سيؤدي القالب ذو الهيكل HTML الضعيف إلى تقويض ميزات الوصول المدمجة في ووردبريس.
هل أحتاج قانونيًا إلى موقع متاح؟
في العديد من الولايات القضائية، نعم. تتطلب قوانين ADA (الولايات المتحدة) وقانون الوصول الأوروبي (الاتحاد الأوروبي، ساري المفعول في يونيو 2025) وAODA (كندا) وقوانين مماثلة أن تكون المواقع متاحة. تعتمد المتطلبات المحددة على موقعك ونوع عملك وجمهورك. استشر محترفًا قانونيًا للحصول على متطلبات محددة لوضعك.
هل يؤثر الوصول على SEO؟
نعم، هناك تداخل كبير. هيكل العناوين الصحيح، النص البديل الوصفي، HTML الدلالي، سرعة تحميل الصفحة، وملاءمة الهواتف المحمولة تفيد كل من الوصول وSEO. تميل المواقع التي تتبع إرشادات WCAG إلى الترتيب بشكل أفضل لأنها توفر تجربة مستخدم أفضل بشكل أساسي. للحصول على أفضل ممارسات SEO، راجع قائمة التحقق الخاصة بنا.
هل يمكن لمُنشئي الصفحات إنشاء مواقع متاحة؟
Elementor ومُنشئو الصفحات الآخرون يمكنهم إنشاء محتوى متاح إذا تم استخدامهم بشكل صحيح. المفتاح هو ضمان هيكل العناوين الصحيح، وإضافة النص البديل إلى الصور، واستخدام الأدوات الدلالية (الأزرار بدلاً من divs المنسقة)، واختبار التنقل باستخدام لوحة المفاتيح. لا يحدد المُنشئ نفسه الوصول - بل كيفية استخدامه.
ما هو الخطأ الأكثر شيوعًا في الوصول على مواقع ووردبريس؟
النص البديل المفقود أو غير الكافي على الصور هو الانتهاك الأكثر تكرارًا المبلغ عنه في WCAG. والثاني الأكثر شيوعًا هو التباين اللوني غير الكافي. كلاهما سهل الإصلاح - يتطلبان الانتباه والممارسة المستمرة بدلاً من الخبرة الفنية.
كيف أجعل WooCommerce متاحًا؟
تحتوي القوالب الافتراضية لـ WooCommerce على وصول معقول. المجالات الرئيسية للتحقق: النص البديل لصورة المنتج، تسميات النموذج على حقول الدفع، قابلية التنقل باستخدام لوحة المفاتيح في عملية السلة والدفع، ورسائل الخطأ المتاحة لفشل التحقق من النموذج. استخدام قالب متاح كأساس يقلل بشكل كبير من العمل المحدد لـ WooCommerce المطلوب.
بناء مواقع ووردبريس متاحة
ابدأ بأساس قالب متاح. تصفح القوالب الخفيفة والمشفرة بشكل جيد التي تعطي الأولوية لـ HTML الدلالي والامتثال لـ WCAG.
تصفح القوالب المتاحة →
