HTML for Kids · درس

أساسيات إمكانية الوصول

أضف نصًا بديلًا إلى الصور واجعل صفحات الويب سهلة الاستخدام

أساسيات إمكانية الوصول درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.

جعل الصفحات سهلة الوصول

أساسيات إمكانية الوصول

مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية جعل صفحات الويب الخاصة بكم سهلة الوصول للجميع، بمن في ذلك الأشخاص ذوو الإعاقة. تُعدّ إمكانية الوصول جزءًا مهمًا من إنشاء مواقع ويب سهلة الاستخدام.

ما إمكانية الوصول؟

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

لديهم إعاقات بصرية أو سمعية.
يستخدمون قارئات الشاشة أو التقنيات المساعدة الأخرى.
يتنقّلون في مواقع الويب باستخدام لوحة المفاتيح بدلًا من الفأرة.

لنتعلّم كيفية جعل صفحاتكم أكثر شمولًا!

إضافة نص بديل إلى الصور

استخدموا السمة alt في وسم <img> لوصف الصورة. ويساعد ذلك قارئات الشاشة على نقل محتوى الصورة إلى المستخدمين ذوي الإعاقة البصرية.

مثال:

<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />

استخدام HTML الدلالية

تساعد الوسوم الدلالية، مثل <header> و<nav> و<footer>، التقنيات المساعدة على فهم بنية صفحتكم.

مثال:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<footer>
  <p>© 2024 My Blog</p>
</footer>

التنقّل باستخدام لوحة المفاتيح

تأكّدوا من إمكانية الوصول إلى جميع العناصر التفاعلية، مثل الروابط والأزرار، باستخدام مفتاح Tab. استخدموا السمة tabindex للتحكم في ترتيب التنقّل باستخدام مفتاح Tab.

مثال:

<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>

توفير تسميات لحقول الإدخال

استخدم وسم <label> لتوفير أوصاف واضحة لحقول الإدخال. اربط التسمية بحقل الإدخال باستخدام السمة for.

مثال:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

تباين الألوان

تأكد من وجود تباين كافٍ بين ألوان النص والخلفية حتى يتمكن الجميع من قراءة المحتوى بسهولة. استخدم الأدوات المتاحة عبر الإنترنت للتحقق من نسب تباين الألوان.

نصيحة: يؤدي التباين العالي إلى تحسين سهولة القراءة للمستخدمين الذين يعانون من إعاقات بصرية.

مثال:

<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>

جرّب بنفسك

لننشئ نموذجًا يسهل الوصول إليه. إليك مثالًا:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Form</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" />
      <br />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

مراجعة سريعة لإمكانية الوصول

أحسنت!

تهانينا! لقد تعلمت كيفية جعل صفحات الويب الخاصة بك متاحة للجميع. تُعد إمكانية الوصول جزءًا أساسيًا من تطوير الويب الحديث. في الدرس التالي، سنتعلم كيفية التحقق من صحة كود HTML الخاص بك للتأكد من توافقه مع معايير الويب. استعد لصقل مهاراتك!

الأسئلة الشائعة

هل درس «أساسيات إمكانية الوصول» مجاني؟

نعم — نص درس «أساسيات إمكانية الوصول» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.

ماذا ستتعلم في «أساسيات إمكانية الوصول»؟

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

هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟

لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «أساسيات إمكانية الوصول»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى HTML for Kids