كيفية استخدام ARIA في HTML الخاص بموقع WordPress الخاص بك

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

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

مقدمة عن ARIA: ما هي ولماذا قد ترغب في استخدامها

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

هذا لأن دمج ARIA في HTML الخاص بك يؤثر على طريقة تعديل المتصفحات لصفحات الويب الخاصة بك لقارئات الشاشة. يتم تقديم هذا المحتوى المعدل في شجرة إمكانية الوصول ، وتتولى ARIA مهمة ترجمة عناصر HTML الخاصة بك إليها.

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

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

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

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

كيفية استخدام ARIA في HTML الخاص بموقع WordPress (3 ممارسات رئيسية)

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

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

1. استخدام ARIA مع HTML الدلالية

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

العناصر الدلالية - مثل <header> و <figure> و <nav> - تصف الغرض من HTML الخاصة بهم. سيكون دمج ARIA في هذه العناصر زائدًا عن الحاجة ، نظرًا لأن HTML الدلالي يتضمن بالفعل دور العنصر (سنتحدث أكثر عن أدوار ARIA في لحظة).

بالإضافة إلى ذلك ، هناك قواعد معينة تنطبق على استخدام ARIA ، وذلك لمنع المطورين من استخدامه بطريقة تتعارض مع HTML الدلالية. يحتوي اتحاد شبكة الويب العالمية (W3C) على جدول مفيد يفصل عناصر HTML الدلالية التي تتضمن أدوار ARIA:

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

2. إضافة الأدوار إلى علامات HTML

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

لذلك على سبيل المثال ، إذا أردت إنشاء تنبيه لإعلام المستخدمين بأنهم بحاجة إلى تثبيت تحديث ، يمكنك استخدام دور "التنبيه" على النحو التالي:

 <div role = "alert">
<p> الرجاء تثبيت آخر تحديث! </ p>
</div>

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

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

على سبيل المثال ، إذا أردت إضافة التنبيه أعلاه إلى رأسك ، فقد يبدو مثل هذا:

 <header> <div role = "alert">
<p> الرجاء تثبيت آخر تحديث! </ p>
</div> </header>

بدلاً من الإشارة إلى أن العنصر الفردي عبارة عن رأس وتنبيه في آنٍ واحد ، فإن هذا يوضح أن هناك تنبيهًا مضمنًا في الرأس.

3. بما في ذلك السمات لملاحظة الحالات والخصائص

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

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

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

 <span role = "checkbox" 
aria-check = "صحيح"
tabindex = "0">
</ span>

وبالمثل ، فإن الخاصية المستخدمة في ملاحظة عندما يقوم عنصر بتسمية عنصر آخر هي aria-labelledby. يمكنك تطبيق هذه السمة على صورة ، على سبيل المثال ، للإشارة إلى التسمية التوضيحية المرتبطة بها:

 <figure aria-labelledby = "operahouse_1" role = "group">
<img src = "operahousesteps.jpg" alt = "دار أوبرا سيدني">
<figcaption> شاهدنا أوبرا <cite> Barber of Seville </cite> هنا! </ figcaption>
</figure>

نوصي باستشارة قائمة W3C للأدوار والحالات والخصائص المسموح بها ، لمشاهدة المزيد من الأمثلة على السمات التي يمكنك استخدامها.

استنتاج

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

تتضمن ثلاث ممارسات رئيسية لاستخدام ARIA على موقع WordPress الخاص بك ما يلي:

1. استخدام ARIA مع HTML الدلالية.
2. إضافة الأدوار لعلامات HTML.
3. بما في ذلك سمات لملاحظة الحالات والخصائص.

هل لديك أي أسئلة حول استخدام ARIA على موقع WordPress الخاص بك؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

المادة المصغرة الصورة EgudinKa / shutterstock.com