النماذج القابلة للوصول

<!-- ✅ جيد: تسميات صريحة ومرتبطة -->
<form>
  <h4>تسجيل الدخول</h4>

  <!-- تسمية مرتبطة عبر for/id -->
  <label for="email-good">عنوان البريد الإلكتروني</label>
  <input
    type="email"
    id="email-good"
    placeholder="example@domain.com"
    required
    aria-describedby="email-help"
    autocomplete="email">
  <div id="email-help">
    لن نشارك بريدك الإلكتروني أبدًا
  </div>

  <!-- تسمية مع تعليمات -->
  <label for="password-good">كلمة المرور</label>
  <input
    type="password"
    id="password-good"
    required
    aria-describedby="password-help"
    autocomplete="current-password">
  <div id="password-help">
    8 أحرف على الأقل مع أحرف كبيرة وأرقام
  </div>

  <!-- مربع اختيار مرتبط بشكل صحيح -->
  <input type="checkbox" id="remember-good">
  <label for="remember-good">تذكرني</label>

  <button type="submit">تسجيل الدخول</button>
</form>

<!-- ✅ جيد: أخطاء مرتبطة بوضوح -->
<form @submit.prevent="submitGoodForm" novalidate>
  <h4>الاشتراك في النشرة الإخبارية</h4>

  <!-- ملخص الأخطاء مع التنقل -->
  <div
    v-if="submitted && goodFormErrors.length"
    role="alert"
    aria-labelledby="error-summary-title">
    <h5 id="error-summary-title">أخطاء يجب تصحيحها:</h5>
    <ul>
      <li v-for="error in goodFormErrors" :key="error.field">
        <a :href="`#${error.field}-good-form`">
          
        </a>
      </li>
    </ul>
  </div>

  <!-- حقل مع خطأ محدد مرتبط -->
  <label for="name-good-form">الاسم الكامل *</label>
  <input
    type="text"
    id="name-good-form"
    v-model="goodForm.name"
    required
    aria-invalid="submitted && !goodForm.name"
    aria-describedby="name-error">
  <div
    v-if="submitted && !goodForm.name"
    id="name-error"
    role="alert">
    ❌ الاسم مطلوب
  </div>

  <button type="submit">اشترك</button>
</form>

<!-- ✅ جيد: مجموعات منطقية مع aria-labelledby -->
<form>
  <h4>تفضيلات الاتصال</h4>

  <!-- قسم المعلومات الشخصية -->
  <div role="group" aria-labelledby="personal-info-title">
    <h5 id="personal-info-title">
      المعلومات الشخصية
    </h5>

    <label for="name-good">الاسم الكامل *</label>
    <input
      type="text"
      id="name-good"
      name="name"
      required
      aria-required="true"
      aria-describedby="name-desc">
    <span id="name-desc">
      اسمك الكامل كما سيظهر في اتصالاتنا
    </span>
  </div>

  <!-- مجموعة أزرار الراديو -->
  <div
    role="radiogroup"
    aria-labelledby="contact-method-title"
    aria-required="true">
    <h5 id="contact-method-title">
      طريقة الاتصال المفضلة *
    </h5>

    <input
      type="radio"
      name="contact-good"
      id="email-contact-good"
      value="email"
      required>
    <label for="email-contact-good">البريد الإلكتروني</label>

    <input
      type="radio"
      name="contact-good"
      id="phone-contact-good"
      value="phone"
      required>
    <label for="phone-contact-good">الهاتف</label>
  </div>

  <!-- مجموعة مربعات الاختيار -->
  <div role="group" aria-labelledby="comm-types-title">
    <h5 id="comm-types-title">أنواع الاتصالات</h5>
    <p id="comm-types-desc">
      اختر أنواع الاتصالات التي ترغب في تلقيها
    </p>

    <input
      type="checkbox"
      id="newsletter-good"
      value="newsletter"
      aria-describedby="comm-types-desc">
    <label for="newsletter-good">النشرة الإخبارية</label>
  </div>

  <button type="submit">
    حفظ التفضيلات
  </button>
</form>

<!-- ✅ جيد: تحقق محترم مع ردود الفعل -->
<form>
  <h4>إنشاء حساب</h4>

  <!-- التحقق عند blur، وليس على input -->
  <label for="username-complex">اسم المستخدم *</label>
  <input
    type="text"
    id="username-complex"
    v-model="complexGoodForm.username"
    @blur="validateUsernameGood"
    :class="{ error: usernameGoodError,
              success: usernameGoodValid }"
    aria-describedby="username-requirements username-feedback"
    aria-invalid="!!usernameGoodError"
    required>

  <!-- تعليمات واضحة -->
  <div id="username-requirements">
    <h6>المتطلبات:</h6>
    <ul>
      <li :class="{ valid: complexGoodForm.username.length >= 3 }">
        3 أحرف على الأقل
      </li>
      <li :class="{ valid: /^[a-zA-Z0-9_]+$/.test(username) }">
        أحرف وأرقام وشرطة سفلية فقط
      </li>
    </ul>
  </div>

  <!-- ردود فعل يمكن الوصول إليها -->
  <div
    v-if="usernameGoodError"
    id="username-feedback"
    role="alert"
    aria-live="polite">
    ❌ 
  </div>
  <div
    v-else-if="usernameGoodValid"
    id="username-feedback"
    role="status"
    aria-live="polite">
    ✅ اسم المستخدم متاح
  </div>

  <!-- مؤشر قوة كلمة المرور -->
  <label for="password-complex">كلمة المرور *</label>
  <input
    type="password"
    id="password-complex"
    v-model="complexGoodForm.password"
    @input="validatePasswordGood"
    aria-describedby="password-strength"
    autocomplete="new-password"
    required>

  <div id="password-strength">
    <h6>قوة كلمة المرور:</h6>
    <div class="strength-indicator">
      <div
        class="strength-bar"
        :class="`strength-${passwordStrength}`"
        :style="{ width: `${passwordStrength * 25}%` }">
      </div>
    </div>
  </div>

  <button type="submit" :disabled="!isFormValid">
    إنشاء حساب
  </button>
</form>