مفتاح الوجبات السريعة

• يعد عنصر HTML5 NAV ، الذي يمثل مجموعة من روابط التنقل ، أداة مهمة لتعزيز إمكانية الوصول إلى موقع الويب ، حيث يتيح لقراء الشاشة تخطي التنقل في الموقع ، وتحسين تجربة المستخدم لأولئك الذين يعانون من ضعف بصري.
يمكن استخدام عنصر NAV عدة مرات على صفحة واحدة ، ولأشرطة التنقل الأولية والروابط الثانوية ، وعلى الرغم من أنه ليس إلزاميًا لجميع روابط الملاحة ، إلا أنه يوصى بكتل الملاحة الرئيسية لتحسين إمكانية الوصول إلى الموقع و SEO.
• في حين أن قراء الشاشة الحالية قد يفشلون في التعرف على عنصر NAV ، يتم تشجيع استخدامه مع استمرار التطور في التكنولوجيا المساعدة ، مما يضمن أن تظل مواقع الويب متاحة في المستقبل.
• من الآمن افتراض أن هذا العنصر سيظهر في كل مشروع تقريبًا. يمثل NAV بالضبط ما يعنيه: مجموعة من روابط التنقل. على الرغم من أن الاستخدام الأكثر شيوعًا لـ NAV سيكون لالتفاف قائمة الروابط غير المرتبة ، إلا أن هناك خيارات أخرى. يمكنك أيضًا لف عنصر NAV حول فقرة من النص الذي يحتوي على روابط التنقل الرئيسية لصفحة أو قسم من الصفحة. في كلتا الحالتين ، يجب أن يكون عنصر NAV مخصصًا للتنقل ذي الأهمية الأساسية. لذلك ، يوصى بتجنب استخدام NAV للحصول على قائمة موجزة من الروابط في تذييل ، على سبيل المثال.
NAV و Accessibility

نمط التصميم الذي ربما رأيته تم تنفيذه في العديد من المواقع هو رابط "Skip Mavigation". تتمثل الفكرة في السماح للمستخدمين بقراء الشاشة بتخطي التنقل الرئيسي في موقعك بسرعة إذا سمعوا ذلك بالفعل - بعد كل شيء ، لا يوجد أي جدوى من الاستماع إلى قائمة التنقل الكاملة في موقع كبير في كل مرة تنقر فيها إلى صفحة جديدة! عنصر NAV لديه القدرة على القضاء على هذه الحاجة ؛ إذا رأى قارئ الشاشة NAV العنصر ، يمكن أن يسمح لمستخدميها بالتخطي عبر التنقل دون الحاجة إلى رابط إضافي. تنص المواصفات: يمكن لمستخدمي المستخدمين (مثل قراء الشاشة) المستهدفين للمستخدمين الذين يمكنهم الاستفادة من معلومات التنقل التي يتم حذفها في العرض الأولي ، أو الذين يمكنهم الاستفادة من معلومات التنقل المتوفرة على الفور ، استخدام هذا العنصر كوسيلة لتحديد المحتوى على الصفحة لتخطي و/أو تقديم الطلب في البداية. يفشل قراء الشاشة الحاليين في التعرف على NAV ، لكن هذا لا يعني أنه يجب ألا تستخدمه. ستستمر التكنولوجيا المساعدة في التطور ، ومن المحتمل أن تكون صفحتك على الويب في المستقبل. من خلال بناء المعايير الآن ، يمكنك التأكد من أنه مع تحسن قراء الشاشة ، ستصبح صفحتك أكثر سهولة مع مرور الوقت.

ما هو وكيل المستخدم؟

ستواجه مصطلح وكيل المستخدم كثيرًا عند التصفح من خلال المواصفات. حقًا ، إنه مجرد مصطلح خيالي لمتصفح - برنامج "وكيل" يستخدمه المستخدم للوصول إلى محتوى الصفحة. السبب في أن المواصفات لا تقول ببساطة "المتصفح" هو أن وكلاء المستخدم يمكنهم تضمين قراء الشاشة ، أو أي وسيلة تكنولوجية أخرى لقراءة صفحة ويب. يمكنك استخدام NAV أكثر من مرة على صفحة معينة. إذا كان لديك شريط تنقل أساسي للموقع ، فسيطلب ذلك لعنصر NAV. بالإضافة إلى ذلك ، إذا كان لديك مجموعة ثانوية من الروابط التي تشير إلى أجزاء مختلفة من الصفحة الحالية (باستخدام المراسي في الصفحة) ، يمكن أن يتم لفها أيضًا في عنصر NAV. كما هو الحال مع القسم ، كان هناك بعض النقاش حول ما يشكل استخدامًا مقبولًا لـ NAV ولماذا لا ينصح به في بعض الحالات (مثل داخل تذييل). يعتقد بعض المطورين أن هذا العنصر مناسب لترقيم الصفحات أو ارتباطات الخبز ، أو لنموذج البحث الذي يشكل وسيلة أساسية للانتقال إلى موقع ما (كما هو الحال على Google). سيكون هذا القرار في النهاية متروكًا لك ، المطور. أجاب إيان هيكسون ، المحرر الرئيسي لمواصفات HTML5 من WhatWG ، على السؤال مباشرة: "استخدم [كلما كنت ستستخدم class = nav". [انظر التعليق]

هذا مقتطف من HTML5 و CSS3 للعالم الحقيقي ، بقلم Alexis Goldstein ، Louis Lazaris & Estelle Weyl.

تبحث عن المزيد من البرامج التعليمية؟ إذا كنت ترغب في معرفة المزيد عن عنصر HTML5 NAV ، فإن SitePoint لديها مجموعة كبيرة من البرامج التعليمية عبر الإنترنت على قوائم HTML5 NAV. بناء شريط تنقل تفاعلي بواسطة Laura Athanasiou "يمكن أن يزيد هيكل التنقل المباشر من قابلية استخدام موقعك ، ويجعل المعلومات سهلة العثور عليها. باستخدام HTML و CSS الأساسيين ، يمكنك إنشاء شريط NAV أفقي يوفر التفاعل عندما يحوم المستخدم على رابط التنقل." إنشاء قائمة ملاحة منسدلة متحركة في HTML5/CSS3 و WebKit من قبل Jean-Pierre Gassin "هذا برنامج تعليمي للمبتدئين والمتوسطة HTML5 و CSS3 الذين يرغبون في إنشاء قائمة منسدلة. القائمة التي نقوم بإنشائها متحركة باستخدام CSS فقط ... لا يوجد أي javascript!" قم ببناء موقع ويب سريع الاستجابة للهواتف المحمولة من البداية: HTML الدلالي من قبل Annarita Tranfici "أولاً وقبل كل شيء ، دعنا ننشئ قائمة كلاسيكية. وفي هذه الحالة ، فإن العنصر الأكثر ملاءمة لغرضنا هو عنصر NAV ، وهو عنصر دلالي يستخدم لإعلان قسم ملفي لموقع الويب." هل يجب تحديد التنقل في القوائم؟ بقلم كريج باكلر "السؤال: هل عناصر القائمة ضرورية؟" كيفية إنشاء قائمة Sliding Menu CSS3 من قبل Craig Buckler "في هذه المقالة ، سنقوم ببناء قائمة شرائح باستخدام CSS وحدها. إذا كنت تستخدم متصفحًا حديثًا ، فسيظهر أيضًا تأثيرًا جميلًا ثلاثي الأبعاد."

يتم طرح الأسئلة بشكل متكرر حول عنصر HTML5 NAV

ما هو الغرض من عنصر HTML5 NAV؟

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

كيف يمكنني استخدام عنصر HTML5 NAV؟ على سبيل المثال:

القسم 1

القسم 2 صفحة؟

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

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

كيف يؤثر عنصر NAV على SEO؟ باستخدام عنصر NAV لتحديد روابط التنقل الخاصة بك ، يمكنك المساعدة في فهم محركات البحث عن العلاقة بين الصفحات أو الأقسام المختلفة من صفحتك.

هل يمكنني تصميم عنصر NAV مع CSS؟ يمكنك تطبيق أي خصائص CSS على عنصر NAV ، تمامًا مثل أي عنصر HTML آخر. على سبيل المثال ، يمكنك تغيير لون الخلفية وحجم الخط وهامش شريط التنقل الخاص بك.

ما هو الفرق بين عنصر NAV وعنصر القائمة؟ على الرغم من أنه يمكن استخدام كلا العنصرين للملاحة ، فإن عنصر NAV أكثر ملاءمة لكتل ​​الملاحة الرئيسية ، في حين أن عنصر القائمة أكثر ملاءمة للقوائم السياقية.

هل يمكنني استخدام عنصر NAV في الإصدارات القديمة من HTML؟ ومع ذلك ، يمكنك استخدام polyfill لإضافة دعم لعنصر NAV في المتصفحات القديمة. يساعد عنصر NAV في تحسين إمكانية الوصول وكبار المسئولين الاقتصاديين لموقع الويب الخاص بك ، لذلك يوصى باستخدامه في كتل التنقل الرئيسية.