يعطي العنصر <label> عنصر تحكم في النموذج اسماً يسهل الوصول إليه وهدفاً أكبر للنقر عليه. هناك طريقتان لربطهما، وهذا الربط أساسي للوصول المتاح.
الطريقة 1: for + id (صريحة)
html
Email address
يعطي العنصر <label> عنصر تحكم في النموذج اسماً يسهل الوصول إليه وهدفاً أكبر للنقر عليه. هناك طريقتان لربطهما، وهذا الربط أساسي للوصول المتاح.
for + id (صريحة)Email address
يطابق for في التسمية id الخاص بعنصر الإدخال. يعمل حتى لو لم تكن متجاورة في الترميز.
<label>
Email address
<input type="email" />
</label>
عنصر الإدخال متداخل داخل التسمية — لا حاجة إلى id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
يختفي placeholder عندما يكتب المستخدم ولا يتم الإعلان عنه بشكل موثوق — لا تستخدمه أبداً كتسمية وحيدة.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
استخدم aria-label (أو aria-labelledby) فقط عندما لا تكون التسمية المرئية ممكنة حقاً.
التسميات المرتبطة بشكل صحيح هي من أكثر ممارسات الوصول المتاح تأثيراً في النماذج — فهي تعطي كل تحكم اسماً لتكنولوجيا المساعدة وتوسع أهداف النقر للجميع.
فضل عنصر <label> حقيقي؛ تراجع إلى aria-label فقط عند الضرورة، ولا تعتمد أبداً على placeholder كتسمية.