HTML وCSS / دليل حلول تحريري
تشخيص التسميات والأخطاء والتركيز غير الميسر
اتبع تفاعل النموذج كاملا لتحديد غياب الاسم والعلاقات المكسورة والتركيز المخفي والرسائل غير المفيدة.
قاعدة معرفة للقراءة فقط · بلا تعليقات عامة
تعرّف على الأعراض
قد يعلن الحقل دون اسم أو لا ينقله نقر النص أو يختفي التركيز أو تنفصل رسالة الخطأ. قد يبدو النموذج جميلا وتفشل التفاعلات.
قد يكون placeholder التعليمة الوحيدة أو تربط معرفات مكررة التسمية بحقل آخر أو يقص الأب إطار التركيز.
افهم الأسباب المحتملة
- لا تنشئ المجاورة علاقة تسمية ولا يجعل تنسيق div زرّا أصليا، ولا يلغي حذف الإطار حاجة التركيز. لا يشرح لون الخطأ السبب.
- قد يفترق السلوك عن الترميز؛ فتحتفظ لوحة مخفية بعناصر تركيز أو تتغير الرسالة دون العلاقة والحالة.
1. أعد التفاعل كاملا
استخدم قيما مصطنعة وتنقل بالمفاتيح المتوقعة وسجل موضع فقد التعرف والتنشيط والتصحيح والخروج. افحص شجرة الإتاحة للدور والاسم والوصف والحالة. ينبغي توافق الاسم والتسمية ليسهلا الإدخال الصوتي والفهم. تساعد الأداة الآلية ولا تحكم على ملاءمة الاسم أو منطق التركيز.
2. أصلح علاقة التسمية الأصلية
امنح كل تحكم id فريدا واربط for تماما. يخدم name الإرسال ولا يعوض العلاقة. احفظ التسميات الدائمة واستخدم fieldset وlegend للسؤال المشترك. يقرن المثال label بالبريد وشرحا منفصلا. لا تضف aria-label علاجا عاما لأنها قد تستبدل المرئي وتخلق اختلافا؛ فضل العلاقة الأصلية البسيطة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Label repair</title>
</head>
<body>
<main><h1>Contact form</h1><form><label for="email">Email address</label><input id="email" name="email" type="email" aria-describedby="email-help"><p id="email-help">Use an address you can access.</p><button type="button">Local preview</button></form></main>
</body>
</html>
The email field has a visible label and connected help.يوفر زوج id وfor الاسم ويضيف describedby المساعدة دون استبداله. النتيجة المتوقعة: لحقل البريد تسمية مرئية ومساعدة مرتبطة.
3. استعد التركيز المرئي والوصول دون قص
أزل تصفير الإطار غير المبرر أو قدم بديلا واضحا. افحص قص الآباء والتراكبات والثابت الذي يغطي التحكم، واختبر حركة مفاتيح فعلية. لا تصلح الترتيب بـtabindex موجب بل المصدر والتخطيط. يضيف المثال focus-visible دون تعطيل كل سلوك المتصفح. اختبر الثيمات والتكبير؛ فقد يغيب الأزرق على خلفية أخرى.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus repair</title>
<style>
input, button { font: inherit; padding: .6rem; margin: .5rem; } :is(input, button):focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; }
</style>
</head>
<body>
<main><h1>Focus check</h1><form><label for="name">Contact name</label><input id="name" name="name"><button type="button">Continue preview</button></form></main>
</body>
</html>
Keyboard navigation visibly identifies the active control.للمفاتيح إطار مميز وتساعد المسافة لكن يبقى فحص سلسلة الآباء لازما. النتيجة المتوقعة: تحدد حركة المفاتيح العنصر النشط بصريا.
4. اربط الأخطاء وتحقق من التعافي
اعرض تصحيحا محددا واربطه بالحقل وحدد عدم الصلاحية حين ينطبق. لا تسم كل حقل غير مستخدم خاطئا دون تصميم. راجع توقيت الرسائل وإعلانها وملخصها والتركيز بالتقنية المناسبة. احفظ القيم حيث يؤمن واصدق بشأن الخادم. يعزز الإطار الأحمر الخطأ ولا يشرحه أو يعلن التغيير. اختبر التصحيح والمتابعة لا الظهور فقط.
تحقق من نجاح الإصلاح
انقر التسميات وافحص الأسماء والأوصاف وأكمل بالمفاتيح وأحدث خطأ مصطنعا وصححه وغادر دون حبس. أعد مع التكبير والتقنية المدعومة ولا تجعل المعلومة باللون أو التحويم أو placeholder وحده.
امنع تكرار المشكلة
- استخدم أنماطا أصلية قابلة لإعادة الاستخدام ومعرفات فريدة وراجع التكرار الديناميكي، وضم رحلة المفاتيح والتعافي للقبول.