تسمية مناطق متعددة باستخدام aria-label
ميّز بين عنصري nav ليعرف المستخدمون وظيفة كل منهما.
تسمية مناطق متعددة باستخدام aria-label درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
قائمتا تنقل ومشكلة واحدة
تحتوي صفحات كثيرة على قائمة رئيسية وقائمة في التذييل. كلتاهما معلمان من نوع nav، ومن دون أسماء ستبدوان متطابقتين لقارئ الشاشة.
سمِّ منطقة
أضف aria-label لمنح المعلم اسمًا قصيرًا يُنطق للمستخدم. عندها سيتمكن قارئ الشاشة من التمييز بين قائمتي التنقل.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>أبقِ التسميات قصيرة
ينبغي أن تتكون aria-label من كلمتين تقريبًا، مثل «الرئيسية» أو «مسار التنقل». يسمع المستخدمون هذه التسمية منطوقة، لذا فإن إيجازها احترام لوقتهم.
لا تكرر الدور
اكتب «التذييل» بدلًا من «تنقل التذييل». فقارئ الشاشة يقول التنقل مسبقًا، وإضافتها مرة أخرى ليست سوى ضوضاء.
<nav aria-label="Footer">...</nav>أعد استخدام عنوان مرئي
إذا كانت المنطقة تحتوي أصلًا على عنوان مرئي، فأشِر إليه باستخدام aria-labelledby بدلًا من كتابة الاسم مرتين.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label في مقابل labelledby
استخدم aria-label عندما لا يوجد نص مرئي، واستخدم aria-labelledby عندما يمكن لعنوان أو نص ظاهر على الشاشة أن يكون الاسم.
يعمل مع أي معلم
لا تقتصر التسمية على nav. سمِّ عنصر aside أو قسمًا كي يعرف المستخدمون محتوى كل منطقة.
<aside aria-label="Related">...</aside>منطقة واحدة، لا حاجة إلى تسمية
إذا احتوت الصفحة على عنصر nav واحد فقط، فلا يحتاج إلى تسمية. تزداد أهمية التسمية عندما تتشارك منطقتان الدور نفسه.
أهمية الأسماء المميزة
امنح كل منطقة اسمًا مميزًا. فتسمية قائمتي التنقل كلتيهما باسم «القائمة» تفوّت الغرض، إذ لن يتمكن المستخدمون من التمييز بينهما.
استمع إلى الفرق
بعد إضافة الأسماء، تعرض قائمة المعالم «التنقل الرئيسي» و«تنقل التذييل»، فيختار المستخدمون المعلم الصحيح فورًا. 🔊
التسميات غير مرئية
يُنطق aria-label لكنه لا يظهر على الشاشة مطلقًا، لذا لا يغير شيئًا بصريًا، مع أنه يساعد كل مستخدمي قارئات الشاشة.
تحقق سريع
لديك منطقتا nav. ما أفضل تسمية للمنطقة السفلية؟
مراجعة: سمِّ مناطقك
تعلمت تسمية المعالم المتكررة باستخدام aria-label أو aria-labelledby، مع إبقاء الأسماء قصيرة ومميزة وخالية من الدور.
الأسئلة الشائعة
هل درس «تسمية مناطق متعددة باستخدام aria-label» مجاني؟
نعم — نص درس «تسمية مناطق متعددة باستخدام aria-label» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «تسمية مناطق متعددة باستخدام aria-label»؟
ميّز بين عنصري nav ليعرف المستخدمون وظيفة كل منهما. تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تسمية مناطق متعددة باستخدام aria-label»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- header وnav وmain وfooter: العناصر الأربعة الكبرى
- وضع المحتوى في main واستخدام main واحد فقط
- تسمية مناطق متعددة باستخدام aria-label
- التنقل بين المعالم: كيف يتنقل المستخدمون