سهولة الاستعمال للجميع

01استعمل عناصر HTML الأصلية

الزر button كيدعم الكلافي بوحدو، والرابط a كيدعم التنقّل. أما div اللي درتيه قابل للكليك ما كيجيش بهاد السلوك تلقائياً.

<button type="button">Show details</button>
<a href="services.html">Explore services</a>

02خلّي Focus باين

دوز بين العناصر بـ Tab. كل عنصر تفاعلي خاصو يبيّن فين وصل Focus. ما تحيدش Outline إلا عوّضتيه بشي علامة واضحة بحالو.

a:focus-visible, button:focus-visible {
  outline: 3px solid #2f5bea;
  outline-offset: 4px;
}

03جرّب الموقع كامل

استعمل عناوين مفهومة، ألوان متباينة، نصوص alt مفيدة وLabels واضحة. ما تعتمدش غير على اللون. جرّب الكلافي والزووم، واحترم الناس اللي كيفضّلو حركة أقل.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animated-card { animation: none; }
}

04جرّب براسك

جرّب Tab وEnter باش تحلّ التفاصيل، وشوف كيفاش كيبان Focus.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.