إمكانية الوصول Accessibility

إرشادات إمكانية الوصول إلى محتوى الويب (Web Content Accessibility Guidelines) : تُعدّ إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) مجموعة من الإرشادات لجعل محتوى الويب أكثر سهولة في الوصول إليه للأشخاص ذوي الإعاقة. وتتمثل المبادئ الأربعة لإرشادات WCAG في: POUR ، والتي ترمز إلى: "قابلية الإدراك" (Perceivable) ، و"قابلية التشغيل" (Operable) ، و"قابلية الفهم" (Understandable) ، و"المتانة" (Robust) .

برامج قراءة الشاشة (Screen readers) : "برمجيات" (Software programs) تقرأ "محتوى شاشة الحاسوب" (the content of a computer screen) بصوت مسموع، ويستخدمها المكفوفون أو ضعاف البصر للوصول إلى شبكة الويب.

لوحات المفاتيح ذات النصوص الكبيرة أو نظام "برايل" Large text or braille keyboards : يستخدمها الأشخاص ذوو الإعاقة البصرية للوصول إلى شبكة الويب.

برامج تكبير الشاشة Screen magnifiers : برمجيات تعمل على تكبير "محتوى شاشة الحاسوب" (the content of a computer screen) ، ويستخدمها الأشخاص ذوو الرؤية المحدودة للوصول إلى شبكة الويب.

أجهزة التأشير البديلة Alternative pointing devices : يستخدمها الأشخاص ذوو الإعاقات الحركية للوصول إلى الويب. وتشمل هذه الأجهزة "عصا التحكم" (joysticks) ، و"كرة التتبع" (trackballs) ، و"لوحة اللمس" (touchpads) .

التعرف على الصوت Voice recognition : يُستخدم من قِبَل الأشخاص ذوي الإعاقات الحركية للوصول إلى شبكة الويب، إذ يتيح للمستخدمين التحكم في الحاسوب باستخدام أصواتهم.

أدوات إتاحة الوصول الشائعة Common Accessibility Tools : تُعد كل من (Google Lighthouse) و (Wave) و (IBM Equal Accessibility Checker) و (axe DevTools) من الأدوات الشائعة المستخدمة لتدقيق مدى توفر إتاحة الوصول في المواقع الإلكترونية.

الهيكلية السليمة لمستويات العناوين Proper heading level structure : ينبغي استخدام مستويات العناوين بشكل صحيح لإنشاء هيكلية منطقية للمحتوى، إذ يساعد ذلك مستخدمي التقنيات المساعدة على فهم محتوى موقعك الإلكتروني.

إمكانية الوصول والجداول Accessibility and Tables : عند استخدام الجداول، ينبغي استخدام العنصر th لتحديد خلايا العنوان والعنصر td لتحديد خلايا البيانات، إذ يساعد ذلك مستخدمي التقنيات المساعدة على فهم بنية الجدول. كما يتيح لك العنصر caption كتابة تسمية توضيحية (أو عنوان) للجدول، مما يُمكّن المستخدمين ء ولا سيما مستخدمي التقنيات المساعدة — من استيعاب الغرض من الجدول ومحتواه بسرعة. ويُستحسن وضع العنصر caption مباشرةً بعد وسم البداية للعنصر table ، فبهذه الطريقة، تتمكن برامج قراءة الشاشة وغيرها من التقنيات المساعدة من توفير سياق أوضح من خلال الإعلان عن "التسمية التوضيحية" (the caption) قبل قراءة المحتوى.

أهمية ربط حقول الإدخال بتسميات Importance for inputs to have an associated label : ينبغي استخدام عنصر "التسمية" label لربط التسميات بحقول الإدخال في النماذج، إذ يساعد ذلك مستخدمي التقنيات المساعدة على فهم الغرض من حقل الإدخال.

عنصر span وإمكانية الوصول span element for accessibility : يُعد عنصر span حاويةً عامةً ومُضمّنة (inline) للمحتوى. ويُستخدم عادةً لتطبيق تنسيق مختلف على جزء من النص مقارنةً بالنص المحيط به، أو لتغليف النص ومنحه "مُعرِّفاً" id يمكن للعناصر الأخرى (مثل سمات ARIA) الرجوع إليه.

أهمية alt "النص البديل" الجيد Importance of good alt text : ينبغي عليك استخدام سمة "النص البديل" alt لتوفير بديل نصي للصور، إذ يساعد ذلك مستخدمي التقنيات المساعدة على فهم محتوى الصورة.

أهمية نص الرابط الجيد Importance of good link text : ينبغي استخدام "نص وصفي للرابط" (descriptive link text) لمساعدة المستخدمين على فهم الغرض منه، إذ يساعد ذلك الأشخاص الذين يستخدمون التقنيات المساعدة على فهم الغرض من "الرابط" (the link) .

أفضل الممارسات لجعل المحتوى الصوتي والمرئي متاحاً للجميع Best practices for making audio and video content accessible : ينبغي توفير نصوص مصاحبة "ترجمة نصية ونصوص مكتوبة" (captions and transcripts) للمحتوى الصوتي والمرئي لجعله متاحاً للأشخاص الذين يعانون من ضعف السمع. كما ينبغي توفير "وصف صوتي" (audio descriptions) للمحتوى المرئي لجعله متاحاً للأشخاص الذين يعانون من ضعف البصر.

السمة tabindex tabindex attribute : تُستخدم لجعل العناصر "قابلة لتلقي التركيز" (focusable) وتحديد الترتيب النسبي للتنقل بينها باستخدام "لوحة المفاتيح" (the keyboard) . من المهم عدم استخدام قيمة للسمة tabindex تزيد عن (0) ، وبدلاً من ذلك، ينبغي استخدام القيمة (0 أو 1-).

<p tabindex="-1">عذراً، حدث خطأ أثناء إرسال طلبك.</p>
                    

السمة accesskey accesskey attribute : تُستخدم لتحديد "اختصار لوحة مفاتيح" (a keyboard shortcut) لعنصر ما، مما يساعد المستخدمين الذين يعانون من إعاقات حركية على تصفح الموقع الإلكتروني بسهولة أكبر.

<button accesskey="s">حفظ</button>
<button accesskey="c">إلغاء</button>
<a href="index.html" accesskey="h">الصفحة الرئيسية</a>
                    

WAI-ARIA : هو اختصار لـ "مبادرة إتاحة الويب - تطبيقات الإنترنت الغنية القابلة للإتاحة" (Web Accessibility Initiative - Accessible Rich Internet Applications) . وهي مجموعة من السمات التي يمكن إضافتها إلى عناصر HTML لتحسين الإتاحة، حيث توفر معلومات إضافية للتقنيات المساعدة حول الغرض من المحتوى وبنيته.

أدوار ARIA ARIA roles : مجموعة من الأدوار المحددة مسبقاً التي يمكن إضافتها إلى عناصر HTML لتحديد الغرض منها، مما يساعد مستخدمي التقنيات المساعدة على فهم محتوى الموقع الإلكتروني. ومن الأمثلة على ذلك: role="tab" و role="menu" و role="alert" .

هناك ست فئات رئيسية لأدوار ARIA:

• أدوار هيكلية المستند Document structure roles : تُحدد هذه الأدوار البنية العامة لصفحة الويب، فبفضلها، تتمكن التقنيات المساعدة من فهم العلاقات بين الأقسام المختلفة ومساعدة المستخدمين على تصفح المحتوى.

• أدوار عناصر الواجهة Widget roles : تُحدِّد هذه الأدوار الغرض من العناصر التفاعلية ووظيفتها، مثل "أشرطة التمرير" (scrollbars) .

• أدوار المعالم Landmark roles : تُصنِّف هذه الأدوار الأقسام الرئيسية لصفحة الويب وتُحدِّدها، حيث تستخدمها برمجيات قراءة الشاشة لتوفير إمكانية التنقل المريح إلى الأقسام المهمة في الصفحة.

• أدوار المناطق الحية Live region roles : تُحدِّد هذه الأدوار العناصر التي تحتوي على محتوى سيتغير ديناميكياً، وبذلك، تتمكن قارئات الشاشة وغيرها من التقنيات المساعدة من الإعلان عن هذه التغييرات للمستخدمين ذوي الإعاقة البصرية.

• أدوار النافذة Window roles : تُحدِّد هذه الأدوار "النوافذ الفرعية" (sub-windows) ، مثل "مربعات الحوار المشروطة المنبثقة" (pop up modal dialogues) . وتشمل هذه الأدوار alertdialog و dialog .

• الأدوار التجريدية Abstract roles : تساعد هذه الأدوار في تنظيم المستند. وهي مخصصة للاستخدام الداخلي من قِبَل المتصفح فقط وليس من قِبَل المطورين، لذا ينبغي عليك معرفة وجودها، ولكن لا يجب عليك استخدامها في مواقعك أو تطبيقاتك الويب.

• السمتان aria-label و aria-labelledby : تُستخدم هاتان السمتان لمنح العنصر اسماً برمجياً (أو اسماً متاحاً لتقنيات الوصول)، مما يساعد مستخدمي التقنيات المساعدة (مثل قارئات الشاشة) على فهم الغرض من العنصر. وغالباً ما يُلجأ إليهما عندما تكون التسمية المرئية للعنصر عبارة عن صورة أو رمز بدلاً من نص، حيث تتيح السمة aria-label تحديد الاسم مباشرةً داخل السمة نفسها، بينما تتيح السمة aria-labelledby الإشارة إلى نص موجود بالفعل في الصفحة.

  
  <button aria-label="بحث">
   <i class="fas fa-search"></i>
  </button>
                              

  
  

  
  <input type="text" aria-labelledby="search-btn">
  <button type="button" id="search-btn">بحث</button>
                              

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

  
  <button>
   <i class="fa-solid fa-gear" aria-hidden="true"></i>
   <span class="label">الإعدادات</span>
  </button>
                              

• السمة aria-describedby : تُستخدم لتوفير معلومات إضافية حول عنصر ما من خلال ربطه بعنصر آخر يحتوي على تلك المعلومات. يتيح ذلك لمستخدمي قارئات الشاشة الوصول الفوري إلى المعلومات الإضافية عند الانتقال إلى العنصر المعني. وتشمل حالات الاستخدام الشائعة ربط تعليمات التنسيق بحقل إدخال نصي، أو ربط رسالة خطأ بحقل إدخال معين بعد إرسال نموذج ببيانات غير صالحة.

  
  <form>
   <label for="password">كلمة المرور:</label>
   <input type="password" id="password" aria-describedby="password-help">
   <p id="password-help">يجب أن تتكون كلمة المرور من 8 أحرف على الأقل.</p>
  </form>