React/accessibility

الفائدة من سهولة الوصول

سهولة الوصول للويب (Web accessibility) والتي يشار إليها أيضًا بالرمز a11y، هي تصميم وإنشاء مواقع يُمكِن استخدامها من قبل أي شخص. يكون دعم سهولة الوصول ضروريًّا للسماح للتقنيات المساعدة بالتعامل مع صفحات الويب.

تدعم React بشكلٍ كامل بناء مواقع سهلة الوصول، وذلك عن طريق استخدام تقنيات HTML المعياريّة عادةً.

المعايير والتوجيهات

WCAG

تزوّدنا توجيهات سهولة الوصول لمحتوى الويب (Web Content Accessibility Guidelines) بتوجيهات لإنشاء مواقع سهلة الوصول.

تعطينا القوائم التالية فكرة عامة حول ذلك:

• قائمة التوجيهات المُقدَّمة من Wuhcag.
• قائمة التوجيهات المُقدَّمة من WebAIM.
• قائمة التوجيهات من مشروع A11Y.

WAI-ARIA

يحتوي مستند دليل سهولة الوصول - تطبيقات الإنترنت سهلة الوصول (Web Accessibility Initiative - Accessible Rich Internet Applications ) على تقنيات لبناء أدوات ذكية في JavaScript سهلة الوصول بشكلٍ كامل.

انتبه إلى أنّ خاصيّات aria-*‎ في HTML ليست كلّها مدعومة بشكلٍ كامل في JSX. وفي حين أنّ معظم خاصيّات DOM تُكتَب في React بشكل camelCase، ينبغي كتابة خاصيّات aria-*‎ بحالة hyphen-cased (والتي تُعرَف أيضًا بحالة kebab-case، أو lisp-case، إلخ..) كما هي حالتها في HTML:

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

HTML الخاصة بدلالات الألفاظ (Semantic HTML)

وهي تهتم بتقديم المعنى الدلالي لكل عنصر من عناصر HTML بدلًا من الاهتمام فقط بما يُمثِّله هذا العنصر. وهي أساس سهولة الوصول في تطبيقات الويب. حيث يُعطينا استخدام عناصر HTML المتنوعة لتعزيز المعنى الدلالي للمعلومات في مواقعنا سهولة للوصول بشكلٍ مجاني.

• مرجع عناصر HTML.

أحيانًا نخرق دلالات HTML عندما نُضيف عناصر ‎<div>‎ إلى JSX لجعل شيفرة React تعمل، خاصّة عند التعامل مع القوائم (‎<ol>‎، و ‎<ul>‎، و ‎<dl>‎) والجدول ‎<table>‎. في هذه الحالات يجب أن نستخدم الأجزاء (Fragments) في React لتجميع عناصر متعددة معًا.

على سبيل المثال:

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
		// يجب أن تمتلك الأجزاء أيضًا خاصية مفتاح عند تعيين المجموعات
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

عندما لا تحتاج أي خاصيّات ضمن الوسم Fragment تستطيع أيضًا استخدام الصياغة المختصرة إن كانت أدواتك تدعمها:

function ListItem({ item }) {
  return (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );
}

للمزيد من المعلومات انظر إلى توثيق الأجزاء في React.

الحقول (Forms) سهلة الوصول

التسمية (Labeling)

يجب تسمية كل حقل في HTML، مثل ‎<input>‎ و ‎<textarea>‎ بطريقة سهلة الوصول. يجب علينا تزويد تسميات وصفية تكون ظاهرة أيضًا للقارئين.

تُرينا المصادر التالية كيفية فعل ذلك:

• شرح كيفيّة تسمية العناصر المُقدَّم من قبل W3C.
• شرح كيفيّة تسمية العناصر المُقدَّم من قبل WebAIM.
• شرح الأسماء سهلة الوصول المُقدَّم من قبل مجموعة Paciello.

على الرغم من أنّه يُمكِن استخدام ممارسات HTML المعيارية هذه بشكلٍ مباشر في React، لاحظ أنّ الخاصيّة for تُكتَب بالشكل htmlFor في JSX:

<label htmlFor="namedInput">الاسم:</label>
<input id="namedInput" type="text" name="name"/>

إخبار المستخدمين عن الأخطاء

يجب أن تكون جميع حالات الأخطاء مفهومة من قبل جميع المستخدمين. يُرينا الرابط التالي كيفيّة إظهار نصوص الأخطاء إلى القارئين أيضًا:

• شرح إشعارات المستخدمين المُقدَّم من قبل W3C.
• شرح التحقّق من الحقول المُقدَّم من قبل WebAIM.

التحكم من خلال تركيز الحقول

احرص على أن يكون تطبيق الويب لديك سهل الوصول بشكلٍ كامل من خلال لوحة المفاتيح فقط:

• شرح سهولة الوصول من لوحة المفاتيح المُقدَّم من قبل WebAIM.

تركيز لوحة المفاتيح وحدود التركيز

يُشير تركيز لوحة المفاتيح إلى العنصر الحالي في DOM المُختار ليقبل الدّخل من لوحة المفاتيح. نشاهده كحد خارجي للتركيز مرسوم بشكل مشابه للحد في الصورة التالية:

لا تستخدم CSS لإزالة هذا الحد الخارجي (مثلًا عن طريق تعيين outline: 0) إلّا إن كنتَ تضع بدلًا منه طريقة أخرى لحدود التركيز.

آليات التخطي إلى المحتوى المطلوب

يجب تزويد آليات للسماح للمستخدمين بتخطي مقاطع التصفّح (navigation) في تطبيقك لأنّ هذا يُساعد ويُسرِّح التصفح من لوحة المفاتيح.

تكون روابط تخطي التصفّح أو روابط التخطي عبارة عن روابط تصفّح مخفيّة والتي تُصبِح ظاهرة فقط عندما يتفاعل مستخدمو لوحة المفاتيح مع الصفحة. من السهل تطبيقها باستخدام الروابط الداخلية للصفحة وبعض التنسيق:

• شرح روابط تخطي التصفّح من WebAIM.

استخدم أيضًا عناصر النقاط العلام والأدوار مثل العنصرين ‎<main>‎ و ‎<aside>‎ للإعلان عن مناطق من الصفحة كمناطق مفيدة مما يسمح للمستخدم بالانتقال بسرعة إلى هذه الأقسام.

اقرأ المزيد حول استخدام هذه العناصر لتعزيز سهولة الوصول من هنا:

• نقاط علام سهلة الوصول.

إدارة التركيز برمجيًّا

تُعدِّل تطبيقات React بشكلٍ مستمر HTML DOM خلال زمن التنفيذ، مما يؤدي أحيانًا إلى فقدان تركيز لوحة المفاتيح أو تعيينها إلى عنصر غير متوقّع. نحتاج لإصلاح هذا إلى توجيه تركيز لوحة المفاتيح برمجيًّا بالاتجاه الصحيح. مثلًا عن طريق إعادة تعيين تركيز لوحة المفايتح إلى الزر الذي فتح النافذة بعد إغلاق تلك النافذة.

تشرح توثيقات الويب الخاصّة بشبكة مطوري Mozilla هذا الأمر وتصف كيف يمكننا بناء أدوات مصغرة في JavaScript قابلة للتصفّح باستخدام لوحة المفاتيح.

لتعيين التركيز في React نستطيع استخدام مراجع إلى عناصر DOM.

نُنشِئ في البداية مرجعًا إلى عنصر في JSX الموجودة ضمن مكوّن React من نوع صنف: