📋 محتويات الصفحة
📖 الوصف
-storybook A11y هي إضافة رسمية لـ Storybook تتيح اختبار إمكانية الوصول للمكونات. تدمج Storybook A11y مع axe-core لتوفير تقارير إمكانية الوصول مباشرة في Storybook. تتميز Storybook A11y بتصور بصري لمشاكل إمكانية الوصول على كل Story. تعرض Storybook A11y أيضاً مستويات الانتهاك وتقدم اقتراحات للحل. Stor...
🎯 يستخدم في
مجالات استخدام هذه الأداة
اختبار إمكانية الوصول في Storybook
تطوير مكونات قابلة للوصول
ضمان الجودة
CI/CD
تطوير واجهات المستخدم
✨ المميزات
أبرز مميزات هذه الأداة
Easy Storybook integration
Easy axe-core
Easy تصورات بصرية
Easy تقارير
Easy تصدير
Easy بحث
Easy تكامل
⚠️ العيوب
نقاط يجب مراعاتها
يعتمد على Storybook
لا يكتشف جميع المشاكل
قد يكون بطيئاً
محدود في الاختبارات المتقدمة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .storybook/main.js
module.exports = {
addons: ['@storybook/addon-a11y']
}
// في Story
import { Button } from './Button'
export default {
title: 'Components/Button',
component: Button,
parameters: {
a11y: {
config: {
rules: [
{ id: 'color-contrast', enabled: false }
]
}
}
}
}
export const Primary = () => <Button>Click me</Button>📚 أدوات أخرى في Accessibility
قد يعجبك أيضاً
Accessibility Insights
⭐أداة اختبار إمكانية الوصول من Microsoft
ARIA Practices
⭐ممارسات ARIA الموصى بها
axe DevTools
⭐أداة اختبار إمكانية الوصول
Color Contrast Analyzer
⭐أداة فحص تباين الألوان
Focus Visible
⭐CSS Selector لإمكانية الوصول
Landmarks
⭐بنية HTML لـ ARIA