وسم منطقة البحث <search>

وسم search معلم دلالي جديد يغلّف أي منطقة بحث أو تصفية — يمنحها دور search تلقائيًا في شجرة إمكانية الوصول بلا حاجة لـ role يدوي.

قبل هذا الوسم، كانت منطقة البحث تُغلَّف بـ div عادي أو بإضافة role="search" يدويًا للحصول على نفس المعنى لقارئات الشاشة. search يفعل ذلك تلقائيًا، تمامًا كما يمنح nav دور navigation مجانًا.

لا يشترط أن يحيط بـ form فقط — أي منطقة تصفية أو فرز لنتائج معروضة (قائمة select للفئة، فلاتر جانبية) تصلح أيضًا داخل search. صفحة واحدة قد تحتوي أكثر من search — بحث عام في الرأس وتصفية داخل الصفحة — ميّز كلًّا منها بـ aria-label كما تفعل مع أكثر من nav.

الصياغة

<search>
  <form action="/search">
    <input type="search" name="q" />
  </form>
</search>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<search aria-label="بحث الموقع" style="display:flex; gap:8px">
  <input type="search" placeholder="ابحث..." style="padding:6px 10px; border-radius:8px; border:1px solid #ccc" />
  <button style="padding:6px 14px; border-radius:8px">بحث</button>
</search>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
aria-label	تمييز أكثر من منطقة search بالصفحة (بحث عام مقابل تصفية داخل الصفحة)

💡 نصائح عملية

يعطي دور search تلقائيًا — لا حاجة لإضافة role="search" يدويًا
يصلح أيضًا لمناطق التصفية والفرز، لا فقط نموذج بحث تقليدي

⚠️ أخطاء شائعة

تغليف الصفحة كاملة أو عناصر عشوائية به — خصّصه لمناطق البحث/التصفية الفعلية فقط
نسيان aria-label عند وجود أكثر من search بالصفحة فتتشابه على مستخدمي قارئ الشاشة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs