اختبار سهولة الوصول مع Divi 5

أصبحت سمات إمكانية الوصول متوافقة تمامًا مع Divi 5 ، مما يتيح لك طريقة عدم الرمز لإضافة أدوار ARIA والعلامات ومساعدين قارئ الشاشة الأخرى داخل المنشئ. إذا كنت تعمل مع Divi 5 ، فهذه أسهل طريقة لبناء إمكانية الوصول إلى موقعك دون تغيير سير العمل أو التصميم.

مع سهولة قانون إمكانية الوصول الأوروبي في 28 يونيو وجوجل تفضل بشكل متزايد أفضل ممارسات إمكانية الوصول ، فقد حان الوقت للمضي قدماً. إليك كيفية عمل سمات إمكانية الوصول وكيف تساعد موقعك على تلبية معايير إمكانية الوصول الحديثة!

سمات إمكانية الوصول لـ Divi 5

سمات إمكانية الوصول هي مكون إضافي Divi يتيح لك إضافة أدوار ARIA والعلامات ومساعدي إمكانية الوصول الأخرى إلى صفحات الويب الخاصة بك مباشرة من Divi Builder دون كتابة أي رمز. تساعدك سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) على إضافة معنى للعناصر التي لا توفر سياقًا كافيًا من تلقاء نفسها ، خاصة عند بناء تخطيطات مخصصة في Divi 5.

على سبيل المثال ، إذا كنت تستخدم وحدة نصية لتصميم وحدة العنوان أو وحدة الأزرار بصريًا لإنشاء استدعاء إلى اتخاذ إجراء ، فلن يفهم قراء الشاشة تلقائيًا أدوارهم. تتيح لك أدوار وعلامات ARIA تحديد ماهية كل عنصر وكيف ينبغي أن يفسرها التقنيات المساعدة ، دون تغيير التصميم البصري. يساعد هذا في ضمان الوصول إلى موقع Divi 5 الخاص بك ومرونة.

بعد تثبيت المكون الإضافي ، يضيف تلقائيًا حقول الإدخال المخصصة إلى أقسامك والصفوف والوحدات النمطية وعناصر Divi الأخرى. (للوصول إلى حقول ARIA ، انقر فوق أي عنصر وانتقل إلى علامة التبويب المتقدمة .)

الآن ، يمكنك تحديد الأدوار وإضافة ملصقات ARIA وتحسين دعم قارئ الشاشة لكل عنصر مباشرة من Divi Builder. تتوافق سمات إمكانية الوصول بسلاسة مع سير عمل Divi وتكلف 19 دولارًا فقط في السنة. يوفر لك طريقة بسيطة وبأسعار معقولة لبناء مواقع ويب يمكن الوصول إليها.

الحصول على سمات إمكانية الوصول

لماذا لم تعد إمكانية الوصول اختيارية بعد الآن

كان الوصول إلى شيء يمكنك تأجيله ، ولكن ليس بعد الآن. يؤثر الآن على سلامتك القانونية وأداء البحث الخاص بك وثقة المستخدمين.

إذا لم يكن موقعك متاحًا ، فأنت لست فقط وراءك - فأنت في خطر. هنا لماذا:

• الإجراءات القانونية ترتفع: من 28 يونيو 2025 ، سيتم تنفيذ قانون إمكانية الوصول الأوروبي. إذا لم يكن موقع الويب الخاص بك متاحًا ويستخدمه الأشخاص في الاتحاد الأوروبي ، فقد تواجه غرامات أو عقوبات أخرى. ينطبق القانون على معظم الشركات مع أكثر من 10 موظفين ويكسب أكثر من مليوني يورو سنويًا ، ولكن يتم تشجيع الشركات الأصغر أيضًا على متابعتها لأن ...
• قد تؤثر إمكانية الوصول على تصنيفاتك: على الرغم من أن إمكانية الوصول ليست عامل تصنيف ، إلا أن العديد من الميزات التي يمكن الوصول إليها يمكن أن تؤثر بشكل غير مباشر على تحسين محركات البحث (SEO). أشياء مثل النص البديل ، وهياكل العنوان المناسبة ، والعلامات الوصفية تجعل موقعك أسهل على كل من المستخدمين ومحركات البحث. لذلك إذا كان من الصعب التنقل في موقعك ، فيمكنك التخلف بهدوء في نتائج البحث.
• لا يمكن الوصول إلى المواقع التي لا يمكن الوصول إليها إلى إبعاد المستخدمين: إذا لم يكن موقعك متاحًا ، فقد يكون الأشخاص ذوي الإعاقة غير قادرين على استخدامه. عندما يغادرون بسرعة ، يمكن أن يشير إلى تجربة سوء للمستخدم لمحركات البحث وإلحاق الأذى بتصنيفاتك. التغييرات مثل الهيكل الواضح والخطوط القابلة للقراءة والملاحة السهلة لوحة المفاتيح تجعل موقعك قابلاً للاستخدام للجميع.

من السهل تحمل إمكانية الوصول فقط بالنسبة للشركات الكبرى ، ولكن تجاهلها لا يزال بإمكانك إيذاءك حتى لو كنت علامة تجارية أصغر.

إعداد سمات إمكانية الوصول في Divi 5

يمشي هذا القسم من خلال تثبيت الأدوات والوصول إليها في سمات إمكانية الوصول في مواقع Divi 5 الخاصة بك.

تثبيت البرنامج المساعد

بمجرد شراء سمات إمكانية الوصول ، ستتلقى ملف zip المكون الإضافي. قم بتحميله على مكونات WordPress الخاصة بك> إضافة مكون إضافي> تحميل مكون إضافي.

الآن ، أضف ملف zip وانقر فوق تثبيت الآن.

أخيرًا ، قم بتفعيله .

بمجرد التفعيل ، ستلاحظ حقول ARIA الإضافية التي تمت إضافتها إلى علامة التبويب المتقدمة لكل عنصر.

يمكنك الآن إضافة سمات إمكانية الوصول بسهولة إلى كل عنصر على صفحتك ، مباشرة من Divi Builder. سنقوم بتغطية ذلك في دقيقة واحدة فقط. قبل ذلك ، دعنا نراجع بسرعة جميع الخيارات التي تتوفر فيها لوحة معلومات سهولة الوصول.

سمات الوصول تجول

بمجرد أن يكون المكون الإضافي نشطًا على موقع Divi الخاص بك ، ستتم إضافة علامة تبويب إمكانية الوصول إلى الشريط الجانبي لـ WordPress. انقر فوقه للوصول إلى لوحة القيادة الخاصة بك ، التي لديها أربع علامات تبويب: المشرف ، الوحدات النمطية ، العناصر ، والمنتجات.

دعنا نراجع خيارات كل علامة تبويب:

علامة التبويب المسؤول

تمنحك علامة التبويب هذه عناصر تحكم على مستوى الحساب مثل إدارة الاشتراك الخاص بك (والتي تتيح الدعم) ، والتحقق من حالة البرنامج المساعد ، واختيار ما إذا كنت تريد حذف البيانات على إلغاء التثبيت ، وإعادة ضبط جميع الإعدادات إلى الافتراضي.

علامة التبويب الوحدات النمطية

يتيح لك تحديد سمات أريا لتمكينها في وحدات DIVI الخاصة بك. تظهر الخيارات المحددة فقط في علامة التبويب المتقدمة كحقول. قد ترغب في إبقائها جميعها في تشغيلها.

ليس كل وحدة تحتاج إلى سمات إمكانية الوصول. على سبيل المثال ، يمكنك تخطي العناصر الزخرفية بأمان مثل المقسمات أو الرموز المتحركة أو معارض الصور دون تسميات توضيحية أو روابط ، لأنها لا تضيف محتوى ذي معنى لقراء الشاشة.

لاستبعاد الوحدة النمطية ، أدخل Module Slug (مثل et_pb_image) في قسم التوافق . هذا يخبر المكون الإضافي بتخطيه عند إضافة حقول ARIA والتركيز فقط على الوحدات النمطية التي تحتاج فعليًا إلى دعم إمكانية الوصول.

علامة التبويب العناصر

بعض أجزاء موقع الويب الخاص بك غير مبنية على وحدات DIVI. قد تأتي من موضوعك أو الإضافات الأخرى أو HTML العادي. تتيح لك علامة تبويب العناصر إضافة سمات ARIA إلى أجزاء موقعك باستخدام محددات CSS. قد ترغب في تضمين عناصر عالمية مثل القوائم والرموز والأزرار وحقول النماذج التي لم يتم إنشاؤها داخل Divi Builder.

• أريا الرئيسية: يخبر قراء الشاشة حيث يبدأ المحتوى الرئيسي الخاص بك حتى يتمكنوا من تخطي القوائم أو الأشرطة الجانبية.
• أريا مخفي: يخفي العناصر الزخرفية حتى لا تقرأها التكنولوجيا المساعدة بصوت عالٍ.
• رابط ARIA: ماركس عناصر قابلة للنقر التي ليست روابط حقيقية كروابط. هذا يساعد قراء الشاشة على التعرف عليهم بشكل صحيح.
• زر ARIA: يضيف أدوار الزر لتبديل الرموز أو روابط النص المصممة التي تعمل مثل الأزرار.
• ARIA مطلوب: علامات الحقول النموذج المخصصة كما هو مطلوب ، حتى لو لم يقل HTML ذلك.
• فهرس TAB: يجعل العناصر المهمة قابلة للوصول باستخدام مفتاح TAB ، وهو مفيد للتنقل في لوحة المفاتيح فقط.

يتيح لك كل إعداد إضافة أو إزالة هذه الأدوار باستخدام محددات CSS. إذا كنت غير متأكد من أين تبدأ ، فإن زر ARIA Main و Aria هما اختيارات جيدة أولى ، غالبًا ما يتم تفويتها وسهلة الإعداد.

تتميز علامة تبويب المنتجات بمنتجات أخرى من نفس المبدع.

باستخدام سمات إمكانية الوصول داخل Divi 5

بعد الإعداد ، يحدث العمل الحقيقي داخل المنشئ. كل حقل أريا له غرض. دعونا نلقي نظرة على ما يفعله ، ومتى نستخدمه ، وكيف يساعد في الوصول في التخطيطات الحقيقية.

1. تعيين أدوار للعناصر ذات دور أريا

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

كما هو الحال في هذه الحالة أدناه ، يتضمن هذا الزر زرًا.

لإضافة دور ARIA ، قم بتبديل الخيار وتعيين هذه القيم:

• نوع دور أريا كأدوار واجهة مستخدم (هذه هي الفئة التي تعيش فيها العناصر التفاعلية مثل الأزرار والمنزلارات.)
• أريا قيمة الأدوار كزر
• محدد دور ARIA .

2. أضف ملصقات واضحة لقراء الشاشة مع علامة ARIA

بينما يخبر دور ARIA التقنيات المساعدة بماهية العنصر ، تشرح ملصق ARIA ما تفعله . يعد هذا مفيدًا بشكل خاص عندما لا يحتوي عنصر ما على نص مرئي ، مثل أيقونة ، أو زر على الطراز المخصص ، أو أي شيء مصمم لتبدو تفاعلية ولكنه لا يقول ذلك بصوت عالٍ. دعنا نقسمه باستخدام نفس المثال.

لقد أضفنا الدور بالفعل ، لكن نص الزر يقول "تبرع الآن". هذا جيد للمستخدمين المرئيين ، ولكن قد يحتاج الأشخاص الذين يستخدمون قراء الشاشة إلى مزيد من السياق ، حتى أكثر لأن الزر يظهر عدة مرات.

لتعيين تسمية لهذا الزر ، ببساطة تبديل على ملصق ARIA وإضافة تسمية قصيرة.

الآن ، سيظل الزر يقول "التبرع الآن" على الشاشة ، لكن قراء الشاشة سيقرأون الملصق الكامل لمساعدة المستخدمين على فهم ما يفعله الزر بالضبط وأين يقوده.

3. توفير سياق إضافي مع الوصف الأريا

أريا الوصف يمنح قراء الشاشة مزيدًا من التفاصيل حول عنصر ما يمكن أن يشرحه الملصق. بينما تروي التسمية ما هو شيء ما ، يشرح الوصف سبب أهمية ذلك.

على سبيل المثال ، لنفترض أن لديك أزرار "تبرع الآن" متعددة في صفحة واحدة ، يتم وضع كل منها تحت سبب مختلف مثل التنظيف الساحلي أو التعليم البحري أو استعادة الموائل. قد يهبط مستخدم قارئ الشاشة مباشرة على الزر ويغيب عن المحتوى القريب. هذا هو المكان الذي يساعد فيه الوصف الأريا.

لنأخذ البطاقة الأولى: التنظيف الساحلي. لإضافة المزيد من السياق ، يمكنك إضافة وصف مثل "هذا التبرع يدعم تنظيف المحيط وحماية الحياة البرية" كنص أريا الوصف.

افعل نفس الشيء بالنسبة للأزرار الأخرى ، على الرغم من أنهم جميعًا يقولون "التبرع الآن" بصريًا ، فإن قراء الشاشة سيعلنون وصفًا مختلفًا لكل واحد. هذا يمنح المستخدمين السياق الكامل دون تغيير ما يرونه على الشاشة.

4. إخفاء العناصر الزخرفية من قراء الشاشة

يعد Aria Hidden مفيدًا عندما ترغب في إظهار شيء بصريًا ، مثل أيقونة أو صورة خلفية ، ولكن لا تريد أن يعلن قراء الشاشة. هذا يبقي التجربة أكثر تركيزًا للمستخدمين الذين يعتمدون على التكنولوجيا المساعدة.

على سبيل المثال ، خذ صورة معاينة الحملة ، مثل صورة Seagulls. إنه يدعم التصميم ولكنه لا يضيف أي معلومات جديدة تتجاوز ما هو موجود بالفعل في العنوان أو الوصف. هنا ، يمكنك استخدام Aria Hidden لإخفائه من قراء الشاشة.

5. ارتباط بمعلومات إضافية مع تفاصيل ARIA

تتيح لك تفاصيل ARIA توصيل عنصر إلى آخر ، والذي يعطي معلومات إضافية. على سبيل المثال ، يمكنك ربط زر بفقرة قريبة تشرح ما يدور حوله الزر. من المفيد عندما تريد تقنيات مساعدة من قراءة المزيد من السياق الذي ليس جزءًا مباشرة من العنصر الذي تم النقر عليه.

لنأخذ قسم التعليم البحري. لنفترض أنك تريد أن يصف نص الفقرة زر "التبرع الآن". يمكنك ربط الزر بالفقرة باستخدام تفاصيل ARIA.

أولاً ، أضف معرفًا فريدًا إلى الفقرة. انقر على وحدة النص التي تحتوي على الوصف وانتقل إلى معرف وفئات CSS المتقدمة . أدخل معرفك الفريد في حقل معرف CSS. دعنا ندخل البحرية-edu.

الآن تحتوي وحدة النص هذه على معرف يمكن لقراء الشاشة الرجوع إليه.

بعد ذلك ، نضيف سمة تفاصيل ARIA إلى الزر. انقر على وحدة الزر وانتقل إلى تفاصيل Advanced> Aria. أدخل Marine-Edu في حقل الهوية.

هذا يخبر التقنيات المساعدة بأن الزر متصل بمزيد من المعلومات في الفقرة مع معرف "Marine-EDU". إنه مفيد أيضًا عند استخدام نص الزر نفسه في أماكن مختلفة ، ولكن كل واحد يعني شيئًا مختلفًا.

ربما تكون قد لاحظت أن علامة ARIA ، وصفات ARIA ، وتفاصيل ARIA تضيف جميعها سياقًا إضافيًا بطرق مختلفة ، لذلك من الأفضل عدم استخدامها معًا في نفس العنصر ، حيث يمكن أن تخلط بين قراء الشاشة. إذا كنت تقوم بالفعل بشرح شيء ما على الصفحة ، ففكر في استخدام تفاصيل ARIA لربط هذا النص بدلاً من كتابة ملصق أو وصف جديد.

لقد رأيت للتو كيف تجعل سمات إمكانية الوصول من السهل إضافة أدوار ARIA والعلامات وميزات إمكانية الوصول الرئيسية الأخرى مباشرةً من Divi Builder. يجعل موقع الويب الخاص بك متاحًا دون الترميز.

الحصول على سمات إمكانية الوصول

أدوات الوصول الإضافية لـ Divi-Modules لـ Divi 5

تعتني سمات إمكانية الوصول بالجانب الفني لإمكانية الوصول. كما أنه يأتي مع الوظائف الإضافية (في حزمة إمكانية الوصول) التي تمنحك ميزات إضافية مثل التنقل في لوحة المفاتيح وعناصر التحكم المرئية لتقديم حل أكثر اكتمالًا وشمولية.

1. الشريط الجانبي لإمكانية الوصول

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

2. تعديلات الوصول

يضيف تعديلات الوصول إلى ميزات عملية تساعد المستخدمين على التنقل في موقعك بسهولة أكبر. وتشمل ذلك Skip Links for Better Mavigation ، Focus Orfulles لمساعدة مستخدمي لوحة المفاتيح على معرفة مكان وجودهم ، والتحسينات الخفية الأخرى التي تعمل على تحسين قابلية الاستخدام دون تغيير تخطيط موقعك.

تحقق من حزمة إمكانية الوصول

اجعل مواقع Divi 5 الخاصة بك متاحة اليوم

تمنحك سمات إمكانية الوصول طريقة سهلة ومرئية لجعل موقع Divi أكثر شمولاً. لا ترميز ، لا حلول - فقط الأدوات الصحيحة التي تم إنشاؤها مباشرة في المنشئ.

إنه متوافق تمامًا مع Divi 5 ، المدعوم بنشاط ، والآن بنسبة 50 ٪ حتى 28 يونيو. طالما أن العرض يعمل ، يمكنك الحصول على حزمة إمكانية الوصول الكاملة ، بما في ذلك الشريط الجانبي والقرص ، مقابل 36 دولارًا فقط في السنة. إذا كنت مستعدًا لجعل موقعك أفضل للجميع ، فهذه هي أبسط طريقة للبدء.

احصل على باقة إمكانية الوصول بخصم 50 ٪