📋 محتويات الصفحة
📖 الوصف
`:focus-visible` هو CSS pseudo-selector يحدد متى يجب عرض مؤشر التركيز على عنصر. يساعد في تحسين إمكانية الوصول للمستخدمين الذين يستخدمون لوحة المفاتيح فقط. يظهر `:focus-visible` مؤشر التركيز فقط عندما يستخدم المستخدم لوحة المفاتيح للتنقل، وليس عند النقر بالماوس. هذا يوفر تجربة أفضل للمستخدمين الذين ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
تحسين إمكانية الوصول
تنقل لوحة المفاتيح
واجهات المستخدم
تصميم الويب
✨ المميزات
أبرز مميزات هذه الأداة
Easy الاستخدام
Easy دعم المتصفحات
Easy الأداء
Easy التوافق
Easy التخصيص
Easy البحث
Easy التكامل
⚠️ العيوب
نقاط يجب مراعاتها
لا يدعم جميع المتصفحات القديمة
قد يحتاج polyfill
يحتاج فهم CSS
محدود في الاستخدام
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
/* Focus Visible في CSS */
button:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
/* أو مع focus-visible polyfill */
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}📚 أدوات أخرى في Accessibility
قد يعجبك أيضاً
Accessibility Insights
⭐أداة اختبار إمكانية الوصول من Microsoft
ARIA Practices
⭐ممارسات ARIA الموصى بها
axe DevTools
⭐أداة اختبار إمكانية الوصول
Color Contrast Analyzer
⭐أداة فحص تباين الألوان
Landmarks
⭐بنية HTML لـ ARIA
Lighthouse Accessibility
⭐أداة فحص شاملة من Google