إتاحة الوصول
تسعى lh-ui-plus لتقديم تجربة UI يسيرة الوصول لجميع المستخدمين حول العالم.
التنقّل بلوحة المفاتيح
يدعم كل المكوّنات التفاعلية العمل عبر لوحة المفاتيح:
| المفتاح | الإجراء |
|---|---|
Tab | التنقّل بين العناصر القابلة للتركيز |
Enter / Space | تنشيط زر/مفتاح |
Escape | إغلاق الطبقة المنبثقة لـ Dialog/Select |
Arrow Up/Down | تحريك الخيارات في Select/Cascader صعودًا ونزولًا |
خصائص ARIA
يُخرج كل مكوّن خصائص ARIA حسب الحاجة (فيما يلي نتيجة الإ render الفعلية):
<!-- زر Button معطّل: disabled أصلي، يمكن تخطّيه باستخدام Tab -->
<button disabled>...</button>
<!-- مفتاح Switch: عنصر button مع role/aria-checked -->
<button role="switch" aria-checked="false">...</button>
<!-- Checkbox: عنصر input أصلي، والمعنى الدلالي يأتي من التسمية -->
<input type="checkbox" />
<!-- مربع الحوار Dialog: aria-modal + aria-label يشير إلى العنوان -->
<div role="dialog" aria-modal="true" aria-label="عنوان مربع الحوار">
...
</div>الأسبقية للدلالات الأصلية: يستخدم Button خاصية
disabledالأصلية، ويستخدم Checkbox العنصر<input type="checkbox">الأصلي، دون إضافةaria-disabled/role="checkbox"مكررة — فإضافة ARIA زائدة فوق العناصر الأصلية تخالف المعيار نفسه.
قارئ الشاشة
- الأزرار التي تحوي أيقونات فقط تتطلب تمرير
aria-labelيدويًا (انظر توصيات التطوير أدناه) - يأتي زر إغلاق Dialog مزوّدًا بـ
aria-label="close"مسبقًا - تمرّر المكوّنات الخصائص الأصلية: أي خاصية لا تُعالَج صراحةً تنتقل إلى العنصر الجذري، ويمكن إضافة
aria-*حسب الحاجة
تباين الألوان
اختير نصّ اللون الأساسي استنادًا إلى هدف WCAG 2.1 AA (النص العادي ≥ 4.5:1، والنص الكبير والعناصر غير النصية ≥ 3:1)؛ ومع لوحة الألوان الصينية منخفضة التشبّع يُنصح باستخدام تسلسل --lh-text-color-* من تخصيص السمات بدل اختيار ألوان مخصّصة، لضمان التباين.
إدارة التركيز
- يوفَّر حلقة تركيز
:focus-visibleموحّدة على العنصر الجذري: تظهر عند التنقّل بلوحة المفاتيح ولا تظهر عند النقر بالفأرة - تدعم الطبقات المنبثقة لـ Dialog/Select الإغلاق بزر
Escape - قابلية التشغيل بلوحة المفاتيح: جميع العناصر القابلة للتركيز هي عناصر
<button>/<input>أصلية وتدعم التنقّل بـTabبطبيعتها
لم تُنفَّذ بعدُ كلٌّ من فخ التركيز وإعادة التركيز (تركيز أول عنصر عند فتح Dialog والعودة إلى الزر المُشغِّل بعد الإغلاق)، ويمكن متابعة ذلك في Issue.
توصيات التطوير
إضافة aria-label إلى المكوّن
<LhButton aria-label="إغلاق مربع الحوار" @click="close">
<LhIcon name="close" />
</LhButton>استخدام المنطقة الحيّة للإعلانات
<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>
<template>
<div aria-live="polite">{{ message }}</div>
</template>تخطّي التنقّل (Skip Navigation)
<a href="#main" class="skip-link">تخطّي إلى المحتوى الرئيسي</a>أدوات الاختبار
يُوصى باستخدام الأدوات التالية لكشف مشاكل إتاحة الوصول:
- axe DevTools — إضافة للمتصفح
- WAVE — Web Accessibility Evaluation Tool
- lighthouse — تدقيق إتاحة وصول مدمج
إتاحة الوصول ليست ميزة اختيارية، بل حق أساسي من حقوق الإنسان. — Web Accessibility Initiative (WAI)