الوصولية (A11y)

<!-- الحل المتوقع -->
<a href="#login-form" class="skip-link">
  انتقل لنموذج تسجيل الدخول
</a>

<main>
  <article>
    <header>
      <h1>تسجيل الدخول</h1>
    </header>

    <form id="login-form" aria-labelledby="form-title">
      <h2 id="form-title" class="sr-only">
        نموذج تسجيل الدخول
      </h2>

      <div>
        <label for="login-email">
          البريد الإلكتروني
          <span aria-hidden="true">*</span>
        </label>
        <input
          type="email"
          id="login-email"
          name="email"
          aria-required="true"
          autocomplete="email"
        />
      </div>

      <div>
        <label for="login-password">
          كلمة المرور
          <span aria-hidden="true">*</span>
        </label>
        <input
          type="password"
          id="login-password"
          name="password"
          aria-required="true"
          autocomplete="current-password"
        />
      </div>

      <div>
        <input type="checkbox" id="remember" />
        <label for="remember">تذكرني</label>
      </div>

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

      <!-- رسالة خطأ -->
      <div role="alert" aria-live="assertive"
           id="error-message" style="color: red">
        البريد أو كلمة المرور غير صحيحة
      </div>
    </form>

    <p>
      ليس لديك حساب؟
      <a href="/register">سجّل الآن</a>
    </p>
  </article>
</main>