أزرار راديو HTML التي تقوم بالتحويل: الدليل النهائي

تبدو أزرار الاختيار بسيطة. بنقرة واحدة، خيار واحد. ومع ذلك، فهي أيضًا إحدى أسهل الطرق للتنازل عن تجربة المستخدم وإمكانية الوصول. إخفاء الإدخال الأصلي، تخطيمجموعة الحقولوالأسطورة، أو التحقق من الصحة بقوة شديدة وستقوم بشحن نموذج يربك مستخدمي لوحة المفاتيح، ويحبط قارئي الشاشة، ويؤدي إلى استنزاف التحويلات.

يوضح لك هذا الدليل كيفية إنشاء أجهزة الراديو بشكل صحيح في عام 2025: سريع الاختيار، وسهل المسح، ويمكن الوصول إليه بالكامل، وقابل للقياس. سنبدأ بخط أساسي واضح ودلالي، ثم نطبق طبقة على CSS الحديثة حتى تبدو أجهزة الراديو وكأنها بطاقات أو عناصر تحكم مجزأة دون تعطيل سلوك لوحة المفاتيح أو قارئ الشاشة.

ستشاهد أنماط التحقق العملية التي لا تزعجك، والتخطيطات سريعة الاستجابة التي تحافظ على الأهداف كبيرة على الهاتف المحمول، ومقتطفات الإنتاج التي يمكنك لصقها في أي حزمة. سنغطي أيضًا التحليلات وأفكار A/B وإعداد Formspree حتى تتمكن من التقاط النتائج على الفور.

لمن هذا: المصممين ومطوري الواجهة الأمامية والمسوقين الذين يهتمون بكليهماإمكانية الوصولوتحويل. لا توجد حاجة إلى أطر عمل ثقيلة، فقط HTML قوي، وCSS مركّز، وقليل من التحسين التدريجي.

وفي النهاية ستعرف:

• عندما تتغلب أجهزة الراديو على التحديد أو مربعات الاختيار أو التبديل
• كيفية إنشاء مجموعة راديو يمكن الوصول إليها (مجموعة الحقول,وسيلة الإيضاح, وضع العلامات, التركيز)
• كيفية تصميم أجهزة راديو "بطاقة" مخصصة دون إخفاء الإدخال
• كيفية التحقق من الصحة باستخدام HTML Constraint API (والرسالة جيدًا)
• كيفية توصيل أجهزة الراديو إلى Formspree وقياس التحديدات

ليرة تركية

• استخدمأجهزة الراديوبالضبطواحدالاختيار ضمن مجموعة محددة جيدًا (من الناحية المثالية2–6 خيارات) التي يجب أن تكونمرئية مرة واحدة.
• قم دائمًا بلف أجهزة الراديو في<مجموعة الحقول>+<أسطورة>، أعطهمنفسالاسم، واجعل كل خيارقابلة للنقر<التسمية>.
• لا تخفي المدخلات باستخدامالعرض: لا شيء; احتفظ بهمقابلة للتركيز(على سبيل المثال،العتامة:0؛ الموضع:مطلق؛ داخلي:0) لذاعلامة التبويب/الأسهم/مسافةعمل.
• اجعل الأهداف كبيرة: على الأقل44×44بكسل، معحلقة التركيزوهذا واضح للعيان.
• التحقق من صحة معواجهة برمجة تطبيقات قيود HTML(مطلوب,reportValidity())، ثم قم بتحسين الرسائل، وليس العكس.
• إذا كان لديك العديد من الخيارات أو أنها غير مألوفة، أضفنص مساعدتحت كل تسمية والنظر فيبحث أو تجميعبدلاً من.
• على الهاتف المحمول، قم بتجميععمود واحد; على الشاشات العريضة2-3 أعمدةعبر شبكة CSS.
• التدبير: المسارمرات الظهور والاختيار والإرسالواختبار أ/بأمر الخيارونسخ.
• بالنسبة إلى Formspree، احتفظ بـالمشاركة الأصليةكاحتياطي. إضافةجلبفقط كتعزيز تدريجي.

متى يجب استخدام أجهزة الراديو (شجرة القرار)

س1. هل يختار المستخدم خيارًا واحدًا بالضبط؟

• لا →استخدمخانات الاختيار(0–كثير) أوتبديل(ثنائي) أو إعادة التفكير في المهمة.
• نعم →انتقل إلى س2.

س2. هل يجب أن تكون الخيارات مرئية في لمحة؟

• نعم →استخدمأجهزة الراديو(الأفضل للمسح الضوئي والاختيار السريع).
• لا (المساحة ضيقة/الخيارات كثيرة)→ فكر فيحدد(اسقاط). إذا كانت الاختيارات حاسمة وتستفيد من المقارنة، ففضل أجهزة الراديو وأعد تصميم التخطيط.

س3. كم عدد الخيارات؟

• 2–6→ أجهزة الراديو مثالية.
• 7-10→ قد تستمر أجهزة الراديو في العمل مع التجميع أوعمودينشبكة؛ وإلا استخدم قائمة مختارة أو قابلة للبحث.
• >10→ استخدماختر بالبحثأوالخطوةهذا يضيق المجموعة أولاً.

س 4. هل الخيارات حالات متنافية؟

• نعم →أجهزة الراديو.
• لا / المجموعات منطقية →خانات الاختيار.

س5. هل سيثير الاختيار أسئلة متابعة مختلفة؟

• نعم →أجهزة الراديو لا تزال بخير. عرض المتابعاتبشرطولكن احتفظ بالحقول المخفيةخارج ترتيب التبويبوتدفق SR حتى كشفها.
• لا →مجموعة راديو بسيطة.

س6. مألوفة مقابل وصفية؟

• تسميات مألوفة(على سبيل المثال، "صغير / متوسط ​​/ كبير") ← الملصقات القصيرة كافية.
• غير مألوف أو عالي المخاطر(على سبيل المثال، "تحسين محركات البحث الفنية مقابل تحسين محركات البحث للمحتوى") → أضفميكروكوبي(وصف من سطر واحد) تحت كل تسمية.

س7. الجوال أولاً؟

• نعم (دائماً)→ استخدممكدس عمود واحدمع تباعد كبير ونص بحجم 16-18 بكسل. ترقيةالأكثر اختيارًاالخيار نحو الأعلى.

أمثلة عملية

• النموذج الخاص بك: "أي خدمة؟" → تتفوق أجهزة الراديو على التحديد لأنه يجب على المستخدمين مقارنة الخيارات جنبًا إلى جنب. احتفظ بثلاث بطاقات (Link Building، SEO، Web Dev) مع نص فرعي قصير.
• سرعة الشحن: 3–4 سرعات متبادلة → أجهزة الراديو (مع دلتا الأسعار في النص الفرعي).
• تردد النشرة: يومي/أسبوعي/شهري → أجهزة الراديو.
• الاهتمامات (يمكن اختيار عدة)→ ليس أجهزة الراديو. استخدم خانات الاختيار.

تشريح مجموعة الراديو المناسبة

انسخ والصق الخط الأساسي الدلالي (لا يوجد CSS فاخر بعد)

<معرف مجموعة الحقول = "مجموعة الخدمة">
ما هي الخدمة التي تحتاجها؟

اختر خيارًا واحدًا يناسب هدفك على أفضل وجه.



<التسمية>
<نوع الإدخال = "راديو" اسم = "خدمة" معرف = "svc-link" قيمة = "بناء الارتباط" مطلوب>
بناء الروابط


<التسمية>

تحسين محركات البحث


<التسمية>

تصميم / تطوير الويب






متابعة

لماذا كل جزء مهم

• <مجموعة الحقول>+<أسطورة>يمنح المجموعة اسمًا لقارئات الشاشة ويحدد السياق للجميع.
• نفسالاسميجعل المدخلات متنافية.
• قابلة للنقر<التسمية>حول كل إدخاليمنحك مساحة نقر/نقر ضخمة (44 بكسل +).
• مطلوبعلى الراديو الأوليتيح للمتصفح التحقق من صحة المجموعة محليًا.
• نص مساعد(تلميح الخدمة) ونص الخطأ(خطأ الخدمة) منفصلان حتى تتمكن من إظهار/إخفاء الأخطاء دون تحريك الأشياء.
• ليست هناك حاجة لأدوار ARIA.تكشف أجهزة الراديو الأصلية بالفعل عن الدلالات الصحيحة.

الحد الأدنى من CSS لسهولة الاستخدام (المظهر الأصلي، الأهداف الكبيرة، التركيز الواضح)

/* التخطيط والتباعد */
تسمية الحقل {
العرض: فليكس؛
محاذاة العناصر: مركز؛
الفجوة: .6rem؛
الحشو: .65rem .8rem؛      /* هدف النقر الكبير */
نصف قطر الحدود: .6rem؛
المؤشر: المؤشر؛
}

/* تركيز لوحة المفاتيح: قم بتمييز الملصق بالكامل عند تركيز الإدخال */
.field label:has(input:focus-visible) {
المخطط التفصيلي: 3 بكسل صلب #3b82f6؛
إزاحة المخطط التفصيلي: 2 بكسل؛
}

/* الحالة المحددة (اختيارية، النقطة الأصلية لا تزال تظهر) */
.field label:has(input:checked) {
الخلفية: #f1f5ff؛
}

/* نص الخطأ */
.خطأ { اللون: #b91c1c؛ الهامش العلوي: .5rem؛ حجم الخط: .9rem؛ }

نصيحة::لديه()يمنحك "حلقة التركيز على البطاقة بأكملها" دون إخفاء الإدخال الحقيقي. إذا كان المتصفح الأقدم لا يدعم ذلك، فسيظل المستخدمون يحصلون على حلقة التركيز الأصلية على الراديو نفسه.

التحقق من الصحة لطيف ويمكن الوصول إليه (يستخدم المتصفح أولاً)

اسمح للمتصفح بالتعامل مع الجزء "يجب عليك اختيار واحد"، ثم قم بإظهار الخطأ المضمّن إذا لزم الأمر.

نموذج ثابت = document.getElementById('quote-form');
مجموعة const = document.getElementById('service-group');
خطأ const = document.getEementById('خطأ الخدمة');

form.addEventListener('submit', (e) => {
// تشغيل واجهة مستخدم التحقق الأصلية (يعمل لأن الراديو الأول يحتوي على "مطلوب")
إذا (!form.reportValidity()) {
// اختياري: قم بإظهار خطأ سطري مألوف أيضًا
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
} آخر {
error.hidden = true;
group.removeAttribute('aria-invalid');
}
});

السلوك الذي يجب أن تتوقعه (واختبره):

• لوحة المفاتيح:اضغط مرة واحدة للدخول إلى المجموعة؛ استخدممفاتيح الأسهمللتحرك؛مساحةيختار.
• قارئات الشاشة:تتم قراءة وسيلة الإيضاح كتسمية المجموعة؛ يتم الإعلان عن كل خيار بحالة "محدد/غير محدد".
• يلمس:يؤدي النقر على الملصق إلى تبديل الراديو (بفضل التفاف الملصق).

أجهزة راديو "بطاقة" ذات تصميم مخصص (بدون كسر إمكانية الوصول)

نسخ ولصق HTML

<مجموعة الحقول>
اختر خطة

اختر خيارًا واحدًا. يمكنك التغيير في أي وقت.




<نوع الإدخال = "راديو" اسم = "خطة" قيمة = "بادئ" مطلوب>
البادئ
مناسب للمواقع الصغيرة




النمو
الأكثر شهرة




الاحترافي
ميزات متقدمة

الحد الأدنى، CSS قوي

:الجذر{
--العلامة التجارية:#0b5cff; --ring: rgba(11,92,255,.35);
--الحدود:#e5e7eb; --bg:#fff; --صامت:#6b7280;
--نصف القطر: 14 بكسل؛
}

/* الشبكة */
.card-group{
العرض: الشبكة؛ الفجوة: 16 بكسل؛
أعمدة قالب الشبكة: كرر (3، minmax (0،1fr))؛
}
@media (max-width:900px){ .card-group{ أعمدة قالب الشبكة: 1fr 1fr; } }
@media (max-width:640px){ .card-group{ Grid-template-columns:1fr; } }

/* تسمية البطاقة */
.بطاقة {
الموقف:نسبي؛
العرض: الشبكة؛ عناصر المكان:مركز؛ محاذاة النص:مركز؛
الفجوة: 6 بكسل؛ الحشو: 18 بكسل؛
الحدود: 1 بكسل الصلبة var(--border); نصف قطر الحدود:var(--radius);
الخلفية:فار(--بج);
المؤشر:المؤشر؛ تحديد المستخدم: لا شيء؛
الانتقال: مربع الظل .15s، لون الحدود .15s، التحويل .02s؛
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* اجعل الإدخال الأصلي قابلاً للتركيز: لا يوجد عرض: لا شيء */
.إدخال البطاقة{
الموقف:مطلق؛ أقحم:0؛ العتامة:0؛
}

/* حلقة تركيز لوحة المفاتيح على البطاقة بأكملها */
.card:has(input:focus-visible){
ظل الصندوق:0 0 0 3px var(--ring);
لون الحدود: var(--brand);
}

/* الحالة المحددة */
.card:has(input:checked){
لون الحدود: var(--brand);
ظل الصندوق:0 0 0 3px var(--ring);
}

/* المحتوى */
.card-title{ وزن الخط: 700؛ اللون: #111؛ }
.card-sub{ حجم الخط:14px; اللون:فار(--صامت); }

/* نص الخطأ */
.خطأ{ اللون:#b91c1c; الهامش العلوي: .5rem؛ حجم الخط: .9rem؛ }

ملاحظات السلوك (لماذا يعمل هذا النمط)

• لاالعرض: لا شيءعلى الإدخال → يمكن لمستخدمي لوحة المفاتيح الدخول؛مفاتيح الأسهماختيار التحرك؛مساحةيختار.
• البطاقة بأكملها قابلة للنقر لأن الإدخال موجود داخلالتسمية.
• :ها ()دعونا نصممالتركيزوتم التحققتنص على البطاقة الأم دون اختراق ARIA.
• الشبكة المستجيبة تعطي1–3 أعمدةتلقائيا؛ تظل أهداف اللمس كبيرة.

اختياري: التحقق اللطيف (الأصلي أولاً)

نموذج ثابت = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // يستخدم "المطلوب" في الراديو الأول
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

استراتيجيات التحقق من الصحة التي لا مزعجة

التحقق من الصحة الرائع يكون غير مرئي حتى يتم الحاجة إليه. إليك أسلوبًا خاصًا بالراديو يكون سريعًا ويمكن الوصول إليه ومريحًا للمستخدمين.

مبادئ

• أصلي أولاً.دع HTML يتعامل مع "يجب تحديد واحد".
• تأجيل الأخطاء.لا تصرخ على المستخدمين قبل أن يحاولوا المتابعة.
• أشر إلى المشكلة.أعلن عن الأخطاء، وحرك التركيز بذكاء، واجعل النسخة قصيرة.
• واضح على التغيير.بمجرد إجراء اختيار صالح، قم بإزالة الخطأ.

خط الأساس (الأصلي فقط)

يمكن لـ HTML وحده فرض القاعدة باستخداممطلوبعلى راديو واحد في المجموعة.

ما هي الخدمة التي تحتاجها؟

اختر خيارًا واحدًا.


<التسمية>
<نوع الإدخال = "راديو" اسم = "خدمة" قيمة = "الرابط" مطلوب>
بناء الروابط

<التسمية>

تحسين محركات البحث

<التسمية>

تصميم / تطوير الويب

يمنحك هذا بالفعل: أسهم لوحة المفاتيح، ومساحة للاختيار، والتحقق من الصحة على مستوى المتصفح.

الأخطاء المضمنة الودية (التحسين التدريجي)

قم بإيقاف تشغيل النافذة المنبثقة للمتصفح والتعامل مع الرسائل المضمنة بحيث تتوافق مع تصميمك.

HTML (أضف منطقة خطأ)

متابعة

CSS (أسلوب بسيط)

.خطأ { اللون:#b91c1c؛ الهامش العلوي: .5rem؛ حجم الخط: .9rem؛ }

JS (تأجيل الأخطاء، الإعلان بشكل صحيح)

نموذج ثابت = document.getElementById('quote');
مجموعة const = document.getElementById('svc');
const err = document.getElementById('svc-err');
أجهزة الراديو const =form.querySelectorAll('input[name="service"]');

دع المحاولة = خطأ؛ // لا تظهر الأخطاء إلا بعد أن يحاول المستخدم المتابعة

الوظيفة hasSelection() {
return [...radios].some(r => r.checked);
}

دالة showError(msg='يرجى اختيار خيار واحد.') {
err.textContent = msg;
err.hidden = false;
group.setAttribute('aria-invalid', 'true');
// إلحاق خطأ بالوصف الموضح حتى يعلنه SRs بعد ذلك
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

وظيفة ClearError() {
err.hidden = true;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-describedby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
محاولة = صحيح؛
if (!hasSelection()) {
e.preventDefault();
showError();
// أظهر المجموعة وركز على الراديو الأول
أجهزة الراديو[0].focus();
group.scrollIntoView({ السلوك: 'ناعم'، الكتلة: 'المركز' });
} آخر {
ClearError();
}
});

// لا تتذمر مبكرًا؛ واضح بمجرد اختيار شيء ما
radios.forEach(r => {
r.addEventListener('change', () => {
if (attempted) ClearError();
});
});

لماذا يعمل هذا

• لا توجد فقاعات تلميحات أدوات المتصفح؛ يرى المستخدمون أخطاءمضمنةبجانب المجموعة.
• يسمع قارئو الشاشةالأسطورة، ثمخطأبفضلالأغنية الموصوفة بواسطة.
• تظهر الأخطاء فقطبعدمحاولة إرسال (أو عند العودة للإصلاح).

التحقق اللطيف من كل خطوة (نماذج متعددة الخطوات)

إذا قمت بالبوابة باستخدام زر "التالي"، فقم بالتحقق من صحة هذه الخطوة فقط.

document.getElementById('nextBtn').addEventListener('click', () => {
if (!hasSelection()) {
showError();
} else {
ClearError();
// التقدم إلى الخطوة التالية...
}
});

رسائل مخصصة باستخدام Constraint API (اختياري)

إذا كنت تفضل الاحتفاظ بنموذج صلاحية المتصفح، فقم بتعيين رسالة مخصصة علىأولالراديو في المجموعة.

const firstRadio = أجهزة الراديو[0];
form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('الرجاء اختيار خيار واحد.');
// تشغيل واجهة المستخدم الأصلية؛ أو استدعاء form.reportValidity()
e.preventDefault();
form.reportValidity();
} آخر {
firstRadio.setCustomValidity('');
}
});

استخدم هذا عندما تريد "الفقاعة" الأصلية بالإضافة إلى النص الخاص بك، وإلا فالتزم بالطريقة المضمنة أعلاه للحصول على واجهة مستخدم متسقة.

ملخص الأخطاء (للنماذج الطويلة)

إذا كان النموذج الخاص بك طويلاً، قم بإضافةالملخص الأعلىالذي يرتبط بمنطقة المشكلة.

دالة showSummary() {
const sum = document.getElementById('ملخص الخطأ');
sum.hidden = false;
sum.querySelector('a').focus(); // SRs يعلنون التنبيه
}

الاحتياطيات من جانب الخادم والشبكة

يعمل التحقق من جانب العميل على تحسين تجربة المستخدم، ولكندائماالتحقق من الصحة على الخادم (أو عن طريق خدمة الإرسال الخاصة بك) أيضًا. إذا فشل الإرسال، قم بإرجاع الصفحة التي تحتوي على:

• السابقاستمر الاختيارو
• The نفس الخطأ المضمنبجانب المجموعة.

تكامل Formspree (التحسين التدريجي)

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

HTML الأصلي (يعمل دائمًا)

<النموذج
معرف = "اقتباس"
الإجراء = "https://formspree.io/f/your_form_id"
الطريقة = "POST"
>
<مجموعة الحقول>
ما هي الخدمة التي تحتاجها؟

اختر خيارًا واحدًا.



<نوع الإدخال = "راديو" اسم = "خدمة" قيمة = "بناء الارتباط" مطلوب>
بناء الروابط
احصل على روابط خلفية عالية الجودة.



<نوع الإدخال = "راديو" اسم = "خدمة" قيمة = "SEO">
تحسين محركات البحث
تعزيز التصنيف وحركة المرور.




تصميم/تطوير الويب
مواقع سريعة ومخصصة للجوال أولاً.



<التسمية>
الاسم الكامل
<نوع الإدخال = "نص" اسم = "اسم" الإكمال التلقائي = "الاسم" مطلوب>


<التسمية>
البريد الإلكتروني
<نوع الإدخال = "البريد الإلكتروني" اسم = "البريد الإلكتروني" الإكمال التلقائي = "البريد الإلكتروني" مطلوب>








احصل على اقتراحي المجاني

ماذا يمنحك هذا:

• يعمل مع JS off (جيد لتحسين محركات البحث والموثوقية).
• يعالج المتصفح "يجب تحديد واحد" (مطلوبفي الراديو الأول).
• يتلقى Formspreeالخدمة,الاسم,البريد الإلكترونيو_الموضوع.

تحسين JS (تجربة مستخدم رائعة، تتبع أفضل)

اعتراض الإرسال والتحقق من صحته وإرساله باستخدامأحضر، وأظهر رسالة شكر مضمّنة (أو إعادة توجيه).

ملاحظات

• تعيينقبول: التطبيق/jsonلذا يقوم Formspree بإرجاع JSON ويمكنك أن تقرر النجاح/الفشل بشكل نظيف.
• استخدمform.reportValidity()لذلك يفرض المتصفح اختيار الراديو وتنسيق البريد الإلكتروني قبل الإرسال.
• احتفظ بالأصلالعمل/الطريقةلذلك لا يزال النموذج يعمل بدون JS.

التحكم في البريد العشوائي دون الإضرار بالتحويلات

• مصيدة العسل(المذكور أعلاه) يلتقط العديد من الروبوتات بدون أي احتكاك.
• التوقيت: إضافة مخفيبدأت_فيعند تحميل الصفحة؛ تجاهل عمليات الإرسال بشكل أسرع من ثانيتين على سبيل المثال.
• إشارات المحتوى: إذا رأيت قيمًا غير مهمة متكررة، فقم بتصفيتها في قواعد Formspree أو في مرحلة ما بعد المعالجة.

// في معالج الإرسال قبل الإرسال:
بدأ const = Number(fd.get('started_at'));
إذا كان (Date.now() - بدأ <2000) يعود؛ // يبدو وكأنه روبوت

سطر الموضوع الذي يعكس اختيار الراديو (صندوق الوارد النظيف)

يمكنك تفصيل_الموضوعمن الراديو المحدد:

خدمة const = fd.get('service'); // على سبيل المثال، "seo"
fd.set('_subject', `عميل محتمل جديد ${service} من نموذج الاتصال`);

المزالق الشائعة التي يجب تجنبها

• إخفاء أجهزة الراديو معالعرض: لا شيء.استخدمالعتامة:0؛ الموقف:مطلق؛ أقحم: 0داخل الملصق حتى تظل لوحات المفاتيح تعمل.
• النسيانمجموعة الحقول/الأسطورة.تعتمد قارئات الشاشة عليها في السياق.
• الإفراط في التحقق من الصحة في وقت مبكر.إظهار الأخطاء بعد الإرسال/التالي، ثم مسحها بمجرد قيام المستخدم بإصلاح المجموعة.
• عدم التقاط السياق.أضفpage_url,المرجعوحقول UTM، ستشكر نفسك لاحقًا.

التدويل والشمولية

اللغة والتسميات والنبرة

• استخدم الصفحةلانج(وتبديل الصفحات حسب اللغة): …
• اجعل التسميات قصيرة ووصفي، وتجنب المصطلحات الخاصة بالثقافة.
• تفضلمحايدالصياغة ("اختر خطة") بدلاً من الافتراضات ("ما هي ميزانيتك؟").
• توطينأخطاءونص مساعدمع قاموس بسيط مرتبط بـdocument.documentElement.lang.

const i18n = {
ar: { اختر: "الرجاء اختيار خيار واحد." },
es: { اختر: "اختار خيارًا لصالحك." },
ar: { اختر: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('choose');

تسميات طويلة وخيارات متعددة الأسطر

• دع التسمياتالتفاف; لا تقم أبدًا باقتطاع الكلمات المهمة.
• أبقِ منطقة الضرب كبيرة حتى عندما يلتف النص: استخدم الحشو علىالتسمية، وليس الإدخال فقط.

.card { الحجم المضمّن: 100%؛ الحشو: 16 بكسل؛ }
.card .card-title { وزن الخط: 700؛ ارتفاع الخط: 1.25؛ }
.card .card-sub { حجم الخط: 14 بكسل؛ ارتفاع الخط: 1.4؛ }

دعم من اليمين إلى اليسار (RTL)

استخدم CSSالخصائص المنطقيةو:دير ()لذلك لا تحتاج إلى أنماط منفصلة.

/* التباعد الذي يقلب في RTL تلقائيًا */
.card { الحشو المضمن: 16 بكسل؛ كتلة الحشو: 16 بكسل؛ }

/* حلقة التركيز التي تحترم الاتجاه */
.card:has(input:focus-visible) {
المخطط التفصيلي: 3px صلب var(-ring);
إزاحة المخطط التفصيلي: 2 بكسل؛
}

/* اختياري: تعديلات خاصة بالاتجاه */
:dir(rtl) .card-group { الاتجاه: rtl; }

إمكانية الوصول خارج نطاق ARIA

• تأكدالتباين ≥ 4.5:1للتسميات وحالات التركيز.
• أهداف اللمس ≥44×44 بكسل(الحشوة بدلاً من حجم الخط).
• لا تنقل الحالة من خلال اللون وحده؛ يستخدمالحدود أو الرموز أو النص.

قائمة التحقق من الاختبار (صالحة للطباعة)

• دلالات: أجهزة الراديو بالداخلمجموعة الحقولمع مرئيةالأسطورة.
• لوحة المفاتيح: علامة التبويب تدخل المجموعة؛سهاميتحرك؛مساحةيختار.
• قارئات الشاشة: تم الإعلان عن الأسطورة؛ يقول كل خيار محدد/غير محدد.
• التركيز: حلقة مرئية علىالبطاقة كاملة(وعلى المدخلات الأصلية).
• منطقة الضرب: التسمية بأكملها قابلة للنقر؛ يعمل على الهاتف المحمول.
• التحقق: لا توجد أخطاء حتى الإرسال/التالي؛ أخطاء واضحة عند التغيير.
• نسخ: الخيارات قصيرة؛ يوضح النص المساعد الاختلافات.
• تَخطِيط: عمود واحد على الهواتف؛ 2–3 على سطح المكتب؛ لا لقطة الفائض.
• i18n: الأخطاء/التسميات المترجمة؛ يلتف النص الطويل برشاقة؛ موافق من اليمين إلى اليسار.
• تحليلات: أحداث الظهور، التحديد، الإرسال.
• الأداء: لا توجد libs ثقيلة لواجهة المستخدم؛ الحد الأدنى من CSS؛ لا يوجد تحول في التخطيط.

الأداء وقابلية الصيانة

• صالحالمدخلات الأصلية+ ضوء CSS؛ تجنب استبدال أجهزة الراديو بـ div.
• احتفظ بوحدات CSS (الخصائص المخصصة للألوان ونصف القطر والحلقة).
• تجنبالعرض: لا شيءعلى المدخلات. استخدمالعتامة:0؛ الموقف:مطلق؛ أقحم: 0لذلك تبقى إمكانية الوصول سليمة.
• تأجيل JS غير الحرجة؛ احتفظ بالتحسينات ضمن ~ 2–5 كيلو بايت عندما يكون ذلك ممكنًا.
• استخدماستعلامات الحاوية(عند توفرها) بدلاً من نقاط توقف الوسائط المعقدة للنماذج المضمنة.

@container (الحد الأدنى للعرض: 680 بكسل) {
.card-group { أعمدة قالب الشبكة: 1fr 1fr 1fr؛ }
}

التحليل والتجريب

تتبع النية ونقاط الاحتكاك:

// أطلق عندما تصبح مجموعة الراديو مرئية
gtag?.('event','form_step_view', { الخطوة: 1, النموذج: 'contact' });

// إطلاق النار على الاختيار
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
});
});

// إطلاق النار على الإرسال الناجح
gtag?.('event','generate_lead', {form: 'contact',service:form.service.value });

اختبار أ/ب:

• أمر الخيار(الأكثر اختيارًا أولاً)
• نسخة CTA("احصل على عرضي المجاني" مقابل "احصل على عرضي")
• نص مساعدحضور

الأنماط المضادة (لا تفعل هذا)

• إخفاء المدخلات معالعرض: لا شيء(فواصل لوحة المفاتيح وSRs).
• مفقودمجموعة الحقول / وسيلة الإيضاح.
• مناطق الإصابة الصغيرة (فقط النقطة الصغيرة القابلة للنقر).
• حالة اختيار اللون فقط؛ التركيز غير المرئي.
• التحقققبليحاول المستخدم المتابعة.
• تعبئة 10-20 خيارًا في أجهزة الراديو؛ استخدم تحديدًا قابلاً للبحث بدلاً من ذلك.

قائمة المراجعة النهائية

• مجموعة الحقول+الأسطورةحاضر
• نفسالاسمفريدة من نوعهاالقيمةق
• تسميات التفاف المدخلات. البطاقة بأكملها قابلة للنقر
• حلقة التركيز مرئية بوضوح
• مطلوبفي الراديو الأول؛ أخطاء مضمنة لطيفة
• 1-3 شبكة أعمدة مستجيبة، أهداف لمسية كبيرة
• سلاسل مترجمة؛ RTL آمن عبر الخصائص المنطقية
• التحليلات عند العرض/الاختيار/الإرسال
• يعكس التحقق من جانب الخادم قواعد العميل

الموارد

المواصفات وأنماط التأليف

• معيار HTML –<نوع الإدخال = "راديو">: دلالات أصلية، التجميع حسبالاسم، شكل السلوك.
• ممارسات تأليف WAI-ARIA 1.2 – مجموعة الراديو: سلوك لوحة المفاتيح المتوقع (انتقل إلى المجموعة،السهمللتنقل،المسافةللتحديد)، ووضع العلامات على الأنماط.
• WCAG 2.2أساسيات أجهزة الراديو:
  • 2.1.1لوحة المفاتيح(كل شيء يمكن تشغيله عن طريق لوحة المفاتيح)
  • 2.4.7التركيز مرئي(بؤرة واضحة المعالم)
  • 2.5.5حجم الهدف(يوصى به ≥44×44 بكسل)
  • 1.4.3التباين (الحد الأدنى)

الأدلة المرجعية

• مدن: مدخل الراديو،التسمية,مجموعة الحقول/الأسطورةالتحقق من صحة النموذج (Constraint Validation API).
• نظام التصميم GOV.UK – أجهزة الراديو: إرشادات ممتازة تم اختبارها في المعركة بشأن الصياغة والأخطاء.
• مكونات شاملة (هايدون بيكرينغ): أنماط وانتقادات a11y العملية.

تحقق من مدونتنا الأخيرة علىكيفية البحث عن فرص مشاركة الضيف على Ahrefs (دليل خطوة بخطوة)

الاختبار والأدوات

• أدوات تطوير الفأس(امتداد المتصفح) – عمليات فحص a11y الآلية.
• رؤى إمكانية الوصول– اختبارات موجهة سريعة.
• منارة- الأداء + إشارات إمكانية الوصول.
• مدقق تباين WebAIM- التحقق من تباين الألوان.
• قارئات الشاشةللتحقق من السلوك الحقيقي:
  • نفدا(ويندوز)،فكي(ويندوز)،التعليق الصوتي(ماك أو إس)،نقاش(أندرويد).
• تمرير لوحة المفاتيح اليدوية: انتقل إلى المجموعة ← تحرك الأسهم ← تحديد المسافة ← تظل حلقة التركيز واضحة.

اطلع علىمراجعة مفهوم التسويق

الأسئلة الشائعة (قصيرة وعملية)