‏هذا الصنف aria-label هو سمة تُستخدم لتوفير وصف نصي لعنصر واجهة المستخدم عندما لا يكون النص المرئي المتاح كافيًا لوصف العنصر يُعتبر جزءًا من مجموعة ARIA (Accessible Rich Internet Applications)، التي تم تطويرها لتحسين إمكانية الوصول على الويب للأشخاص ذوي الإعاقة.

كيف يتم استخدام  aria-label ؟

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

هذا مثال على كيفية استخدام aria-label في علامة التشعب:

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

كيف يظهر للمستخدم ؟

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

هل يحسن في تصدر نتائج البحث ؟

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

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

كيف اجعل النص يظهر بالكامل لما اضع الماوس فوق العنوان ؟

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

في هذا الكود : 

لإضافة خصائص aria-label و title إلى هذا السطر الخاص بمدونات بلوجر إلى العنصر <a> المحيط بعنوان المقالة هذا هو التعديل الذي يجب إجراؤه عليه الخاص بك يمكنك , تعديل السطر بالشكل التالي:: 

بهذا التعديل، عندما يضع المستخدم الماوس فوق عنوان المقالة، سيظهر العنوان بالكامل كتلميح ايضا في هذا التعديل، تمت إضافة كل من expr:aria-label='data:post.title' و expr:title='data:post.title' إلى العنصر <a> مما يجعل كل من aria-label و title يأخذ قيمة عنوان المقالة.