جاري التحميل...

إمكانية الوصول بـ CSS

لقد أنشأت تخطيطات وحركة وأدوات حديثة. إمكانية الوصول في CSS هي الطبقة التي يشعر بها الناس: أين يقع تركيز لوحة المفاتيح؟ هل النص مقروء؟ هل تدوير الرسوم يُزعج أحداً؟ هذه الجلسة ليست مستودع HTML (المعالم، alt، ARIA). إنها عادات التنسيق التي تُبقي التركيز والتباين والحركة قابلة للاستخدام.

التركيز يجب أن يبقى مرئياً

مستخدمو لوحة المفاتيح ينتقلون بـ Tab بين الروابط وعناصر التحكم. إن اختفت حلقة التركيز، يضيعون الطريق. فضّل :focus-visible حتى تبقى نقرات الفأرة هادئة ويبقى تركيز لوحة المفاتيح واضحاً:

Visible keyboard focus with :focus-visible

css

:root {
--focus-ring: #2563eb;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}

.text-link:focus:not(:focus-visible) {
outline: none;
}

:focus-visible يستهدف الحالات التي تفيد فيها الحلقة (غالباً لوحة المفاتيح). اربطها بحلقة عالية التباين وقليل من outline-offset حتى لا تتصادم مع الحدود.

لا تكتب `outline: none` بلا بديل

حذف الـ outline الافتراضي مقبول فقط عندما توفّر نمط تركيز مخصّصاً أوضح. قاعدة عارية مثل *:focus { outline: none; } فخ كلاسيكي:

Replace outline — do not erase focus

css

/* Bad: keyboard users lose the only cue */
.bad-button:focus {
outline: none;
}

/* Good: custom ring that still shows focus */
.good-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f766e;
}

إن أخمدت outline المتصفّح، يجب أن يُعلّم شيء آخر عنصر التحكم المركّز — box-shadow، لون الحدود، أو تغيّر في الخلفية يبقى واضحاً على كل سمة.

التباين قرار CSS

ألوان العلامة تبدو حادّة على لوحة التصميم وتبهت على هاتف تحت الشمس. عامل أزواج المقدمة / الخلفية كقرارات وصول، لا كزخرفة فقط:

Contrast-safe text and surface tokens

css

:root {
--surface: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-text: #0c4a6e;
}

.hero {
background: var(--surface);
color: var(--text);
}

.hero .lede {
color: var(--muted);
}

.hero .cta {
background: var(--accent);
color: var(--accent-text);
font-weight: 700;
}

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

احترم تقليل الحركة

الرسوم المتحركة والتحويلات الكبيرة قد تسبب إزعاجاً. لفّ الحركة غير الضرورية داخل prefers-reduced-motion:

Gate motion with prefers-reduced-motion

css

.banner {
transition: transform 0.4s ease, opacity 0.4s ease;
}

.banner.is-shown {
transform: translateY(0);
opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
.banner,
.banner.is-shown {
transition: none;
transform: none;
}

.spinner {
animation: none;
}
}

من يطلب من نظام التشغيل تقليل الحركة يجب أن يصل إلى حالة الواجهة النهائية — دون رحلة الحركة. أبقِ تغيّرات الشفافية أو التخطيط الضرورية؛ أوقف الدوران اللانهائي والانزلاقات الكبيرة.

التباين العالي وforced-colors

بعض البيئات تستبدل لوحتك (High Contrast في ويندوز / forced-colors). خفّف الزخارف الهشّة وأبقِ الحدود حقيقية:

Stay usable under forced-colors

css

.card {
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

@media (forced-colors: active) {
.card {
border: 1px solid CanvasText;
background: Canvas;
box-shadow: none;
color: CanvasText;
}

.card a {
color: LinkText;
}
}

كلمات ألوان النظام مثل Canvas وCanvasText وLinkText تساعد الضوابط على البقاء مرئية عندما يمتلك المستخدم — لا دليل علامتك — الألوان.

قائمة تحقق من جانب CSS

📊 CSS accessibility habits

Practice	CSS habit	Avoid
Keep focus findable	`:focus-visible` + strong ring / shadow	`outline: none` with no replacement
Readable type	High-contrast text/background tokens	Light grey on white for body copy
Kind motion	`@media (prefers-reduced-motion: reduce)`	Endless spins for everyone
Survive high contrast	Real borders; `forced-colors` tweaks	Shadow-only “edges”
Reachable controls	Comfortable padding / hit area	Tiny icon-only targets with no focus style

HTML ما زال يملك المعالم والتسميات ونص alt. CSS يملك ما إذا بقيت تلك الضوابط مدرَكة بعد تنسيق الصفحة.

روابط التجاوز وfocus-within

رابط التجاوز (skip link) يقفز فوق الشريط المتكرر. نسّقه ليظهر عند التركيز. :focus-within يمكنه أيضاً إبراز مجموعة كاملة عندما يكون أحد الأبناء مركّزاً:

Skip link + focus-within group

css

.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
padding: 0.5rem 0.75rem;
background: #111827;
color: #fff;
border-radius: 0.375rem;
z-index: 20;
}

.skip-link:focus-visible {
top: 1rem;
outline: 3px solid #fbbf24;
outline-offset: 2px;
}

.nav:focus-within {
box-shadow: inset 0 0 0 2px #2563eb;
}

يبقى رابط التجاوز خارج الشاشة حتى يُركَّز، ثم يصبح واضحاً. حلقة التنقّل تساعد عندما يهبط Tab على رابط فرعي داخل الشريط.

جرّب بنفسك

أضف حلقة :focus-visible للروابط والأزرار؛ تنقّل بـ Tab وتأكد أنك ترى التركيز دائماً.
اختر زوجاً ضعيف التباين وأصلحه بنص أغمق أو سطح أعمق.
لفّ transition أو animation داخل prefers-reduced-motion: reduce وبدّل إعداد النظام (أو محاكاة DevTools).
تحت محاكاة forced-colors تأكد أن البطاقات ما زالت تظهر حداً حقيقياً.
نسّق رابط تجاوز يظهر فقط عند تركيز لوحة المفاتيح.

أخطاء شائعة

outline: none (أو outline: 0) عام بلا نمط تركيز مخصّص
ألوان علامة جميلة تفشل في التباين على نص الجسم والأزرار الرئيسية
رسوم كبيرة للجميع بلا بوابة prefers-reduced-motion
إخفاء عنصر قابل للتركيز بـ opacity: 0 وحده بينما ما زال يستقبل Tab
اعتبار درس CSS هذا بديلاً كاملاً عن HTML الدلالي وARIA

ملخّص

أبقِ تركيز لوحة المفاتيح مرئياً — فضّل :focus-visible ولا تمحُ outline بلا إشارة أقوى
عامل تباين الألوان كمتطلب للنص والضوابط
احترم prefers-reduced-motion وثبّت الأنماط لـ forced-colors
نسّق روابط التجاوز واستخدم :focus-within حيث تحتاج المجموعة إشارة مشتركة
التالي: ملخص CSS والخطوات التالية (summary) — اختتام الدورة قبل المشروع المصغّر

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة