بنية الصفحة

مثال سيء

مرحبًا

محتوى الصفحة الرئيسية...

<!-- pageStructure.badComment -->
<div class="page-header">
  <div class="site-title">pageStructure.siteTitle</div>
  <div class="navigation">
    <div>pageStructure.home</div>
    <div>pageStructure.about</div>
  </div>
</div>
<div class="page-content">
  <div class="content-title">pageStructure.welcome</div>
  <div>pageStructure.mainContent</div>
</div>
<div class="page-footer">
  pageStructure.copyright
</div>

مثال جيد

مرحبًا

محتوى الصفحة الرئيسية...

<!-- pageStructure.goodComment -->
<header>
  <div class="site-title">pageStructure.siteTitle</div>
  <nav aria-label="pageStructure.mainNav">
    <ul>
      <li><a href="/">pageStructure.home</a></li>
      <li><a href="/about">pageStructure.about</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>pageStructure.welcome</h1>
  <p>pageStructure.mainContent</p>
</main>
<footer>
  <p>pageStructure.copyright</p>
</footer>

الشرح: تساعد البنية الدلالية الواضحة قارئات الشاشة على التنقل وفهم المحتوى. تنشئ عناصر التقسيم (header، nav، main، footer) معالم مهمة.

تسلسل العناوين

مثال سيء

مقدمة لإمكانية الوصول

إمكانية الوصول إلى الويب مهمة...

تقنيات أساسية

إليك بعض التقنيات...

HTML الدلالي

HTML الدلالي...

عناصر البنية

عناصر مثل header، nav...

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

يمكن لـ CSS تحسين...

<!-- headings.badComment -->
<div class="title-large">headings.intro</div>
<p>headings.content</p>
<div class="title-medium">headings.section1</div>
<p>headings.content</p>
<div class="title-medium">headings.section2</div>
<p>headings.content</p>
<div class="title-small">headings.subsection</div>
<p>headings.content</p>

مثال جيد

مقدمة لإمكانية الوصول

إمكانية الوصول إلى الويب مهمة...

تقنيات أساسية

إليك بعض التقنيات...

HTML الدلالي

HTML الدلالي...

عناصر البنية

عناصر مثل header، nav...

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

يمكن لـ CSS تحسين...

<!-- headings.goodComment -->
<h1>headings.intro</h1>
<p>headings.content</p>
<h2>headings.basicTechniques</h2>
<p>headings.content</p>
<h3>headings.semanticHTML</h3>
<p>headings.content</p>
<h4>headings.structureElements</h4>
<p>headings.content</p>
<h3>headings.cssAccessibility</h3>
<p>headings.content</p>

الشرح: يسمح التسلسل المنطقي للعناوين (h1 → h2 → h3) لقارئات الشاشة بإنشاء مخطط تنقل والمستخدمين بفهم بنية المحتوى.

الأزرار مقابل العناصر القابلة للنقر

مثال سيء

💾 حفظ

🗑️ حذف

👤 عرض الملف الشخصي

ℹ️ مزيد من المعلومات

<!-- buttonsVsLinks.badComment -->
<div @click="handleSave" style="cursor: pointer;">
  💾 buttonsVsLinks.save
</div>
<div @click="handleDelete" style="cursor: pointer;">
  🗑️ buttonsVsLinks.delete
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
  👤 buttonsVsLinks.profile
</span>

مثال جيد

👤 عرض الملف الشخصي

<!-- buttonsVsLinks.goodComment -->
<button type="button" @click="handleSave">
  💾 buttonsVsLinks.save
</button>
<button type="button" @click="handleDelete">
  🗑️ buttonsVsLinks.delete
</button>
<a href="/profile">
  👤 buttonsVsLinks.profile
</a>
<button type="button" @click="toggleModal">
  ℹ️ buttonsVsLinks.moreInfo
</button>

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

القوائم والبيانات المنظمة

مثال سيء

مكونات العجة:

3 بيضات

2 ملاعق كبيرة من الحليب

ملح وفلفل

1 ملعقة كبيرة من الزبدة

الخطوات:

1. اخفق البيض مع الحليب

2. سخن الزبدة

3. اسكب البيض واطهيه

4. اطوِ نصفين وقدم

<!-- lists.badComment -->
<div class="list-title">lists.ingredientsTitle</div>
<div>lists.eggs</div>
<div>lists.milk</div>
<div>lists.seasoning</div>

<div class="list-title">lists.stepsTitle</div>
<div>1. lists.step1</div>
<div>2. lists.step2</div>
<div>3. lists.step3</div>

مثال جيد

مكونات العجة:

3 بيضات
2 ملاعق كبيرة من الحليب
ملح وفلفل
1 ملعقة كبيرة من الزبدة

الخطوات:

اخفق البيض مع الحليب
سخن الزبدة
اسكب البيض واطهيه
اطوِ نصفين وقدم

<!-- lists.goodComment -->
<h3>lists.ingredientsTitle</h3>
<ul>
  <li>lists.eggs</li>
  <li>lists.milk</li>
  <li>lists.seasoning</li>
</ul>

<h3>lists.stepsTitle</h3>
<ol>
  <li>lists.step1Full</li>
  <li>lists.step2</li>
  <li>lists.step3</li>
  <li>lists.step4</li>
</ol>

الشرح: يتيح استخدام عناصر القائمة المناسبة لقارئات الشاشة الإعلان عن عدد العناصر وتسهيل التنقل.

بنية الصفحة

❌ مثال سيء

✅ مثال جيد

مرحبًا

تسلسل العناوين

❌ مثال سيء

✅ مثال جيد

مقدمة لإمكانية الوصول

تقنيات أساسية

HTML الدلالي

عناصر البنية

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

الأزرار مقابل العناصر القابلة للنقر

❌ مثال سيء

✅ مثال جيد

القوائم والبيانات المنظمة

❌ مثال سيء

✅ مثال جيد

مكونات العجة:

الخطوات:

مثال سيء

مثال جيد

مثال سيء

مثال جيد

مثال سيء

مثال جيد

مثال سيء

مثال جيد