{"componentChunkName":"component---src-templates-docs-js","path":"/docs/accessibility.html","result":{"data":{"markdownRemark":{"html":"

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

\n

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

\n

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

\n

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

\n

WCAG

\n

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

\n

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

\n\n

WAI-ARIA

\n

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

\n

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

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

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

\n

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

\n\n

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

\n

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

\n
import React, { Fragment } from 'react';\nfunction ListItem({ item }) {\n  return (\n    <Fragment>      <dt>{item.term}</dt>\n      <dd>{item.description}</dd>\n    </Fragment>  );\n}\n\nfunction Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        <ListItem item={item} key={item.id} />\n      ))}\n    </dl>\n  );\n}
\n

تستطيع تعيين مجموعة من العناصر إلى مصفوفة من الأجزاء (fragments) كما ستفعل مع أي نوع آخر من العناصر:

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

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

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

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

\n

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

\n

التسمية (Labeling)

\n

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

\n

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

\n\n

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

\n
<label htmlFor=\"namedInput\">Name:</label><input id=\"namedInput\" type=\"text\" name=\"name\"/>
\n

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

\n

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

\n\n

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

\n

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

\n\n

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

\n

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

\n\n \n \n \n , this.onClickOutsideHandler); }\n componentWillUnmount() {\n window.removeEventListener('click', this.onClickOutsideHandler);\n }\n\n onClickHandler() {\n this.setState(currentState => ({\n isOpen: !currentState.isOpen\n }));\n }\n\n onClickOutsideHandler(event) { if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) { this.setState({ isOpen: false }); } }\n render() {\n return (\n <div ref={this.toggleContainer}>\n <button onClick={this.onClickHandler}>Select an option</button>\n {this.state.isOpen && (\n <ul>\n <li>Option 1</li>\n <li>Option 2</li>\n <li>Option 3</li>\n </ul>\n )}\n </div>\n );\n }\n}\n

يعمل هذا بشكل جيّد للمستخدمين الذي يمتلكون أجهزة تأشير كالفأرة مثلًا، ولكن تقود تجربة هذا المثال من لوحة المفاتيح وحدها إلى وظيفة معطوبة عند الانتقال للعنصر التالي بسبب عدم استقبال\nالكائن window للحدث click. قد يؤدي هذا إلى منع المستخدمين من استخدام تطبيقك:

\n\"A\n

يُمكِن تحقيق نفس الوظيفة عن طريق استخدام مُعالِجات الأحداث المناسبة، مثل onBlur و onFocus:

\n
class BlurExample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = { isOpen: false };\n    this.timeOutId = null;\n\n    this.onClickHandler = this.onClickHandler.bind(this);\n    this.onBlurHandler = this.onBlurHandler.bind(this);\n    this.onFocusHandler = this.onFocusHandler.bind(this);\n  }\n\n  onClickHandler() {\n    this.setState(currentState => ({\n      isOpen: !currentState.isOpen\n    }));\n  }\n\n  // نغلق النافذة المنبثقة بالنقرة التالية عن طريق استخدام التابع setTimeout  // هذا ضروري لأننا نحتاج أولا من التحقق  // ما إذا كان ابن آخر للعنصر قد استقبل التركيز  // بسبب إطلاق الحدث blur قبل حدث التركيز الجديد    onBlurHandler() {    this.timeOutId = setTimeout(() => {      this.setState({        isOpen: false      });    });  }\n  // إن استقبل أي عنصر ابن التركيز فلا تغلق النافذة المنبثقة  onFocusHandler() {    clearTimeout(this.timeOutId);  }\n\n  render() {\t// تساعدنا React عن طريق مضاعفة أحداث blur و focus للمكون الأب    return (\n      <div onBlur={this.onBlurHandler}           onFocus={this.onFocusHandler}>        <button onClick={this.onClickHandler}\n                aria-haspopup=\"true\"\n                aria-expanded={this.state.isOpen}>\n          Select an option\n        </button>\n        {this.state.isOpen && (\n          <ul>\n            <li>Option 1</li>\n            <li>Option 2</li>\n            <li>Option 3</li>\n          </ul>\n        )}\n      </div>\n    );\n  }\n}
\n

تُوفِّر هذه الشيفرة الوظيفة المطلوبة إلى مستخدمي المؤشر ولوحة المفاتيح بنفس الوقت. لاحظ أيضًا أنّنا أضفنا خاصيّات aria-* دعم المستخدمين الذين يقرؤون الشاشة.\nولغرض البساطة لم ننفذ أحداث لوحة المفاتيح لتمكين التفاعل بمفاتيح الأسهم arrow key مع خيارات النافذة المنبثقة:

\n\"A\n

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

\n

أدوات مصغرة أكثر تعقيدًا

\n

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

\n

نحتاج هنا إلى معرفة بأدوار ARIA و حالات وخاصيّات ARIA.\nأيضًا. وهي عبارة عن جداول تحتوي على خاصيّات HTML مدعومة بشكل كامل في JSX وتُمكِّننا من بناء مكوّنات React سهلة الوصول وذات وظيفة عالية الكفاءة.

\n

يمتلك كل نوع من الأدوات المصغرة نمط تصميم خاص ومن المتوقع أن يعمل بطريقة معينة من قبل المستخدمين والعملاء مثل:

\n\n

نقاط أخرى يجب أخذها بعين الاعتبار

\n

تعيين اللغة

\n

يجب أن تشير إلى لغة نصوص الصفحة لأنّ برامج قراءة الشاشة تستخدم هذا لتحديد إعدادات الصوت الصحيحة:

\n\n

تعيين عنوان المستند

\n

عيّن عنوان المستند عن طريق العنصر <title> بشكل صحيح ليصف محتوى الصفحة الحالية حيث يضمن ذلك أن يبقى المستخدم على دراية بمحتوى الصفحة الحالي:

\n\n

نستطيع تعيين العنوان في React باستخداممكوّن عنوان المستند.

\n

تباين اللون

\n

احرص على امتلاك النص القابل للقراءة تباين ألوان كافٍ ليبقى مقروءًا من قبل المستخدمين ضعيفي البصر:

\n\n

قد يكون من الممل حساب مجموعات الألوان المناسبة يدويًّا لجميع الحالات في موقعك، لذا تستطيع حساب جميع الألوان باستخدام Colorable.

\n

تتضمّن أدوات aXe و WAVE التي سنشير إليها اختبارات لتباين الألوان وستُبلِّغ عن أخطاء التباين.

\n

إن أردت تمديد قدرات اختبار التباين فبإمكانك استخدام هذه الأدوات:

\n\n

أدوات الاختبار والتطوير

\n

هنالك عدد من الأدوات التي نستطيع استخدامها لمساعدتنا على إنشاء تطبيقات ويب سهلة الوصول.

\n

لوحة المفاتيح

\n

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

\n
    \n
  1. إزالة الفأرة لديك.
    2. \n
  2. استخدام زر Tab و Shift+Tab للتصفح.
    3. \n
  3. استخدام زر Enter لتفعيل العناصر.
    4. \n
  4. استخدام الأسهم للتفاعل مع بعض العناصر، مثل القوائم والقوائم المنسدلة.
    5. \n
\n

مساعد التطوير

\n

نستطيع التحقق من بعض ميزات سهولة الوصول بشكل مباشر في شيفرة JSX. عادة تكون هذه التحققات متوفرة مسبقًا في أي مُحرِّر يحتوي على إضافات JSX من أجل أدوار ARIA، والحالات والخاصيّات. لدينا أيضًا إمكانية الوصول للأدوات التالية:

\n

eslint-plugin-jsx-a11y

\n

تزوّدنا eslint-plugin-jsx-a11y من أجل ESLint بالتحقق من الأخطاء خاص بمشاكل سهولة الوصول في JSX. تسمح لك العديد من المُحرِّرات بتضمين هذه الموجودات بشكل مباشر في تحليل الشيفرة ونوافذ الشيفرة المصدرية.

\n

يمتلك Create React App هذه الإضافة مع مجموعة قواعد فرعية مُفعلة. إن أردت تمكين المزيد من قواعد سهولة الوصول فبإمكانك إنشاء الملف .eslintrc في المجلد الجذري للمشروع مع وضع هذا المحتوى بداخله:

\n
{\n  "extends": ["react-app", "plugin:jsx-a11y/recommended"],\n  "plugins": ["jsx-a11y"]\n}
\n

اختبار سهولة الوصول في المتصفح

\n

العديد من الأدوات الموجودة تنفذ اختبارات أداء لسهولة الوصول في صفحات الويب ضمن متصفحك. استخدمها مع أدوات التحقق من سهولة الوصول التي سنشير إليها الآن لأنّها فقط تختبر سهولة الوصول من الناحية التقنية في HTML:

\n

aXe, aXe-core و react-axe

\n

توفّر لنا شركة Deque تقنية تُدعى aXe-core من أجل اختبارات سهولة الوصول التلقائيّة لتطبيقاتنا. تتضمّن هذه الوحدة تكاملًا من أجل Selenium.

\n

إنّ مُحرِّك سهولة الوصول أو aXe هو عبارة عن إضافة للمتصفح لكشف سهولة الوصول مبنية على تقنية aXe-core.

\n

بإمكانك أيضًا استخدام الوحدة @axe-core/react للتبليغ عن موجودات سهولة الوصول بشكل مباشر إلى الكونسول أثناء التطوير وتنقيح الأخطاء.

\n

WebAIM WAVE

\n

أداة تقييم سهولة الوصول للويب ، وهي عبارة عن إضافة أخرى للمتصفح.

\n

مستكشفات سهولة الوصول وشجرة سهولة الوصول

\n

شجرة سهولة الوصول هي عبارة عن مجموعة فرعية من شجرة DOM والتي تحتوي على كائنات سهلة الوصول لكل عنصر DOM والتي ينبغي تعريضها إلى تقنية مُساعِدة مثل قارئات الشاشة.

\n

نستطيع بسهولة في بعض المتصفحات مشاهدة معلومات سهولة الوصول لكل عنصر في شجرة سهولة الوصول:

\n\n

قارئات الشاشة

\n

يجب أن يكون اختبار قارئات الشاشة جزءًا من اختبارات سهولة الوصول لديك.

\n

يرجى الانتباه إلى وجود اختلافات عند الجمع بين قارئات شاشة مختلفة مع متصفحات مختلفة. لذا من الأفضل أن تختبر تطبيقك مع المتصفح الذي يُلائِم قارئات الشاشة التي تختارها.

\n

قارئات الشاشة الأشيع استخدامًا

\n

NVDA في متصفح Firefox

\n

الوصول غير المرئي لسطح المكتب (NonVisual Desktop Access أو اختصارًا NVDA) هو عبارة عن قارئ شاشة مُستخدَم بشكلٍ كبير.

\n

ارجع إلى المقالات التالية لمعرفة أفضل طريقة لاستخدام NVDA:

\n\n

VoiceOver في متصفح Safari

\n

وهو عبارة عن قارئ شاشة مُدمَج في أجهزة Apple.

\n

ارجع إلى المقالات التالية لمعرفة كيفيّة تفعيل واستخدام VoiceOver:

\n\n

JAWS في متصفح Internet Explorer

\n

الوصول للوظائف عن طريق الكلام (Job Access With Speech أو اختصارًا JAWS)، وهو قارئ شاشة مُستخدَم على نظام ويندوز.

\n

رجع إلى هذه الإرشادات حول كيفيّة استخدام JAWS:

\n\n

قارئات شاشة أخرى

\n

ChromeVox في متصفح Chrome

\n

ChromeVox هو قارئ شاشة مُدمَج على أجهزة Chromebooks ومُتوفِّر كإضافة لمتصفّح Google Chrome.

\n

ارجع إلى الإرشادات التالية حول كيفيّة استخدام ChromeVox:

\n","frontmatter":{"title":"سهولة الوصول","next":null,"prev":null},"fields":{"path":"content/docs/accessibility.md","slug":"docs/accessibility.html"}}},"pageContext":{"slug":"docs/accessibility.html"}},"staticQueryHashes":[]}