HTML

Part 13 الوصول (Accessibility) FSWD – HTML

ahmedمنذ 5 أيام

0 19 3 دقائق

🔸 ما هو الوصول (Accessibility)؟

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

🔸 **1. استخدام السمات `aria-*`**:

السمات aria-* (Accessible Rich Internet Applications) هي مجموعة من السمات التي تُستخدم لتحسين الوصول للأشخاص ذوي الإعاقة. يتم استخدام هذه السمات لتوضيح دور العناصر في الصفحة بالنسبة لتقنيات المساعدة مثل قارئات الشاشة.

✅ **أهم السمات `aria-*`**:

aria-label: يتيح لك إضافة تسمية وصفية للعناصر التي قد لا تحتوي على نصوص مرئية.
aria-hidden: يُستخدم لإخفاء العناصر عن تقنيات المساعدة (مثل قارئات الشاشة).
aria-live: يُستخدم للإشارة إلى محتوى ديناميكي يتغير أثناء التفاعل مع الصفحة.
aria-role: يحدد دور العنصر في الصفحة (مثل زر، نافذة منبثقة، إلخ).

✅ **مثال على `aria-*`**:

<button aria-label="إغلاق" onclick="closeWindow()">X</button>

في المثال:
- تم استخدام aria-label لإعطاء وصف واضح لوظيفة الزر (إغلاق النافذة).
- حتى لو كان الزر يحتوي فقط على الحرف “X” كمحتوى مرئي، فإن قارئ الشاشة سيقرأ “إغلاق” للمستخدم.

🔸 2. النصوص البديلة للصور:

النصوص البديلة (Alt Text) تُعد من أساسيات الوصول. في حال عدم قدرة المستخدم على رؤية الصورة (على سبيل المثال، المكفوفين الذين يستخدمون قارئات الشاشة)، فإن النص البديل يُمكّنهم من فهم المحتوى الذي تعرضه الصورة.

✅ استخدام خاصية `alt`:

يجب إضافة alt لكل صورة <img>، ويجب أن يكون النص داخلها دقيقًا وواضحًا.

✅ مثال على النصوص البديلة:

<img src="logo.png" alt="شعار الموقع الرسمي">

في المثال:
- تم استخدام خاصية alt لتوفير وصف لصورة الشعار. إذا كان هناك شخص يستخدم قارئ الشاشة، سيسمع “شعار الموقع الرسمي” بدلاً من عدم وجود نص.

✅ النصوص البديلة في حالة صور زخرفية:

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

<img src="decorative-image.jpg" alt="">

3. التركيز والتنقل باستخدام الكيبورد:

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

✅ استخدام `tabindex`:

tabindex هو السمة التي تحدد الترتيب الذي يمكن للمستخدم التنقل من خلاله باستخدام مفتاح Tab على لوحة المفاتيح.
tabindex="0": يسمح بالانتقال إلى العنصر حسب الترتيب الطبيعي.
tabindex="-1": لا يمكن التفاعل مع العنصر باستخدام مفتاح Tab، ولكن يمكن الوصول إليه باستخدام JavaScript.
tabindex="1": يحدد العنصر الأول في الترتيب الذي يمكن التنقل عبره باستخدام Tab.

✅ مثال على `tabindex`

<a href="#section1" tabindex="1">الانتقال إلى القسم 1</a>
<a href="#section2" tabindex="2">الانتقال إلى القسم 2</a>
<a href="#section3" tabindex="3">الانتقال إلى القسم 3</a>

في المثال:
- تم استخدام tabindex لتحديد ترتيب التنقل بين الروابط باستخدام مفتاح Tab.

✅ إضافة السمة `accesskey`:

accesskey يُتيح للمستخدمين الانتقال بسرعة إلى العناصر عن طريق استخدام مفتاح مخصص على لوحة المفاتيح

<button accesskey="s">إرسال</button>

في المثال:
- باستخدام accesskey="s"، يمكن للمستخدمين الضغط على مفتاح “S” للوصول مباشرة إلى الزر.

✅ التفاعل مع العناصر باستخدام الكيبورد:

تأكد من أن جميع العناصر القابلة للتفاعل مثل الأزرار و الروابط يمكن التفاعل معها باستخدام لوحة المفاتيح

<button onclick="alert('تم النقر!')" tabindex="0">انقرني</button>

في المثال:
- يمكن التفاعل مع الزر باستخدام لوحة المفاتيح (عن طريق مفتاح Enter أو Space).

✅ **المثال الكامل لتحسين الوصول باستخدام `aria-*` والنصوص البديلة والكيبورد**

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تحسين الوصول (Accessibility)</title>
</head>
<body>

  <h1>موقع لتحسين الوصول</h1>

  <!-- صورة مع النص البديل -->
  <img src="logo.png" alt="شعار الموقع الرسمي">

  <!-- زر مع aria-label -->
  <button aria-label="إغلاق القائمة" onclick="closeMenu()">X</button>

  <!-- روابط قابلة للتنقل باستخدام الكيبورد -->
  <nav>
    <ul>
      <li><a href="#home" tabindex="1">الصفحة الرئيسية</a></li>
      <li><a href="#about" tabindex="2">من نحن</a></li>
      <li><a href="#contact" tabindex="3">اتصل بنا</a></li>
    </ul>
  </nav>

  <!-- زر مع accesskey -->
  <button accesskey="s" onclick="submitForm()">إرسال</button>

</body>
</html>

💡 ملخص الوصول (Accessibility):

السمة	الوصف
`aria-label`	توفير تسمية وصفية للعناصر غير النصية
`aria-hidden`	إخفاء العناصر عن تقنيات المساعدة مثل قارئات الشاشة
`aria-live`	إعلام تقنيات المساعدة بالتغيرات الديناميكية
`alt`	النص البديل للصور لتمكين القارئات من فهم الصورة
`tabindex`	تحديد ترتيب التنقل بين العناصر باستخدام الكيبورد
`accesskey`	تخصيص مفتاح للوصول السريع إلى العنصر