ولوجية HTML
ولوجية HTML
اكتب كود HTML دائمًا مع وضع إمكانية الوصول في الاعتبار!
زود المستخدم بطريقة جيدة للتنقل والتفاعل مع موقعك. اجعل كود HTML الخاص بك دلالي بقدر الإمكان.
HTML الدلالية
يعني HTML الدلالي استخدام عناصر HTML الصحيحة للغرض الصحيح قدر الإمكان. العناصر الدلالية هي عناصر لها معنى ؛ إذا كنت بحاجة إلى زر ، فاستخدم <button>العنصر (وليس
<div>عنصرًا).
متعلق بدلالات الألفاظ
<button>Report an Error</button>
غير دلالي
<div>Report an Error</div>
يوفر HTML الدلالية السياق لقارئات الشاشة ، التي تقرأ محتويات الصفحة بصوت عالٍ.
مع وضع مثال الزر في الاعتبار:
- تتميز الأزرار بتصميم أكثر ملاءمة بشكل افتراضي
- يعرفه قارئ الشاشة بأنه زر
- يمكن التركيز عليه
- قابل للنقر
يمكن الوصول إلى الزر أيضًا للأشخاص الذين يعتمدون على التنقل باستخدام لوحة المفاتيح فقط ؛ يمكن أن يكون قابلاً للنقر باستخدام كل من الماوس والمفاتيح ، ويمكن كلفته بين (باستخدام مفتاح tab على لوحة المفاتيح).
أمثلة على العناصر غير الدلالية : <div>و <span>- لا تخبر شيئًا عن محتواها.
أمثلة على العناصر الدلالية : <form>، <table>و <article>- تحدد بوضوح محتواها.
العناوين مهمة
يتم تحديد العناوين بعلامات <h1>إلى <h6>:
مثال
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
تستخدم محركات البحث العناوين لفهرسة بنية ومحتوى صفحات الويب الخاصة بك.
يتصفح المستخدمون صفحاتك من خلال عناوينها. من المهم استخدام العناوين لإظهار بنية المستند والعلاقات بين الأقسام المختلفة.
تستخدم برامج قراءة الشاشة العناوين أيضًا كأداة تنقل. تحدد الأنواع المختلفة للعناوين مخطط الصفحة.
<h1>يجب استخدام العناوين للعناوين الرئيسية ، متبوعة <h2>بالعناوين ، ثم الأقل أهمية
<h3>، وهكذا.
ملاحظة: استخدم عناوين HTML للعناوين فقط. لا تستخدم العناوين لجعل النص كبير أو عريض .
نص بديل
توفر altالسمة نصًا بديلاً للصورة ، إذا كان المستخدم لسبب ما لا يمكنه عرضها (بسبب بطء الاتصال ، أو خطأ في
src
السمة ، أو إذا كان المستخدم يستخدم قارئ الشاشة).
يجب أن تصف قيمة altالسمة الصورة:
مثال
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
إذا لم يتمكن المستعرض من العثور على صورة ، فسيعرض قيمة alt
السمة:
مثال
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
أعلن اللغة
يجب عليك دائمًا تضمين lang
السمة داخل <html>العلامة للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
يحدد المثال التالي اللغة الإنجليزية كلغة:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
استخدم لغة واضحة
استخدم دائمًا لغة واضحة يسهل فهمها. حاول أيضًا تجنب الأحرف التي لا يمكن لقارئ الشاشة قراءتها بوضوح. فمثلا:
- اجعل الجمل قصيرة قدر الإمكان
- تجنب الشرطات. بدلًا من كتابة 1-3 ، اكتب 1 إلى 3
- تجنب الاختصارات. بدلاً من كتابة فبراير ، اكتب فبراير
- تجنب الكلمات العامية
إنشاء نص ارتباط جيد
يجب أن يشرح نص الرابط بوضوح المعلومات التي سيحصل عليها القارئ من خلال النقر على هذا الرابط.
أمثلة على الروابط الجيدة والسيئة:
حسن
سيئة
ملاحظة: هذه الصفحة هي مقدمة في الوصول إلى الويب. قم بزيارة البرنامج التعليمي الخاص بإمكانية الوصول لمزيد من التفاصيل.