From d183769fd1b4e1cfe6d086c8fe3ce14f62b6a583 Mon Sep 17 00:00:00 2001
From: Splimter <soheybemir@hotmail.fr>
Date: Fri, 29 Mar 2019 13:23:01 +0100
Subject: [PATCH 1/2] Done Translating-accessibility.md

---
 content/docs/accessibility.md | 337 +++++++++++++++++-----------------
 1 file changed, 164 insertions(+), 173 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index e6cacba3b..5c9205749 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -4,29 +4,29 @@ title: Accessibility
 permalink: docs/accessibility.html
 ---
 
-## Why Accessibility? {#why-accessibility}
+## الفائدة من سهولة الوصول؟ {#why-accessibility}
 
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
+سهولة الوصول للويب (Web accessibility) والتي يشار إليها أيضًا بالرمز [**a11y**](https://en.wiktionary.org/wiki/a11y)) هي تصميم وإنشاء مواقع يُمكِن استخدامها من قبل أي شخص. يكون دعم سهولة الوصول ضروريًّا للسماح للتقنيات المساعدة بالتعامل مع صفحات الويب.
 
-React fully supports building accessible websites, often by using standard HTML techniques.
+تدعم React بشكلٍ كامل بناء مواقع سهلة الوصول، وذلك عن طريق استخدام تقنيات HTML المعياريّة عادةً.
 
-## Standards and Guidelines {#standards-and-guidelines}
+## المعايير والتوجيهات {#standards-and-guidelines}
 
 ### WCAG {#wcag}
 
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
+تزوّدنا [توجيهات سهولة الوصول لمحتوى الويب (Web Content Accessibility Guidelines)](https://www.w3.org/WAI/intro/wcag) بتوجيهات لإنشاء مواقع سهلة الوصول.
 
-The following WCAG checklists provide an overview:
+تعطينا القوائم التالية فكرة عامة حول ذلك:
 
-- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
+- [قائمة التوجيهات المُقدَّمة من Wuhcag](https://www.wuhcag.com/wcag-checklist/)
+- [قائمة التوجيهات المُقدَّمة من WebAIM](https://webaim.org/standards/wcag/checklist)
+- [قائمة التوجيهات من مشروع A11Y](https://a11yproject.com/checklist.html)
 
 ### WAI-ARIA {#wai-aria}
 
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
+يحتوي مستند  [دليل سهولة الوصول - تطبيقات الإنترنت سهلة الوصول (Web Accessibility Initiative - Accessible Rich Internet Applications )](https://www.w3.org/WAI/intro/aria) على تقنيات لبناء أدوات ذكية في JavaScript سهلة الوصول بشكلٍ كامل.
 
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
+انتبه إلى أنّ خاصيّات  `aria-*` في HTML ليست كلّها مدعومة بشكلٍ كامل في JSX. وفي حين أنّ معظم خاصيّات DOM تُكتَب في React بشكل camelCase، ينبغي كتابة خاصيّات `aria-*`‎ بحالة hyphen-cased (والتي تُعرَف أيضًا بحالة kebab-case، أو lisp-case، إلخ..) كما هي حالتها في HTML:
 
 ```javascript{3,4}
 <input
@@ -39,16 +39,16 @@ Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most
 />
 ```
 
-## Semantic HTML {#semantic-html}
-Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information
-in our websites will often give us accessibility for free.
+## HTML الخاصة بدلالات الألفاظ (Semantic HTML) {#semantic-html}
+وهي تهتم بتقديم المعنى الدلالي لكل عنصر من عناصر HTML بدلًا من الاهتمام فقط بما يُمثِّله هذا العنصر. وهي أساس سهولة الوصول في تطبيقات الويب.
+حيث يُعطينا استخدام عناصر HTML المتنوعة لتعزيز المعنى الدلالي للمعلومات في مواقعنا سهولة للوصول بشكلٍ مجاني.
 
-- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [مرجع عناصر HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`.
-In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements.
+أحيانًا نخرق دلالات HTML عندما نُضيف عناصر `<div>` إلى JSX لجعل شيفرة React تعمل، خاصّة عند التعامل مع القوائم (`<ol>`, `<ul>` و `<dl>`)  والجدول `<table>`.
+ في هذه الحالات يجب أن نستخدم [الأجزاء (Fragments)](/docs/fragments.html) في React لتجميع عناصر متعددة معًا.
 
-For example,
+على سبيل المثال:
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
@@ -73,14 +73,14 @@ function Glossary(props) {
 }
 ```
 
-You can map a collection of items to an array of fragments as you would any other type of element as well:
+تستطيع تعيين مجموعة من العناصر إلى مصفوفة من الأجزاء (fragments) كما ستفعل مع أي نوع آخر من العناصر:
 
 ```javascript{6,9}
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Fragments should also have a `key` prop when mapping collections
+		// يجب أن تمتلك الأجزاء أيضًا خاصية مفتاح عند تعيين المجموعات
         <Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -91,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
+عندما لا تحتاج أي خاصيّات ضمن الوسم Fragment تستطيع أيضًا استخدام [الصياغة المختصرة](/docs/fragments.html#short-syntax), إن كانت أدواتك تدعمها:
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -104,83 +104,83 @@ function ListItem({ item }) {
 }
 ```
 
-For more info, see [the Fragments documentation](/docs/fragments.html).
+للمزيد من المعلومات انظر إلى [توثيق الأجزاء في React](/docs/fragments.html).
 
-## Accessible Forms {#accessible-forms}
+## الحقول (Forms) سهلة الوصول {#accessible-forms}
 
-### Labeling {#labeling}
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
+### التسمية (Labeling) {#labeling}
+يجب تسمية كل حقل في HTML، مثل `<input>` و `<textarea>`, بطريقة سهلة الوصول. يجب علينا تزويد تسميات وصفية تكون ظاهرة أيضًا للقارئين.
 
-The following resources show us how to do this:
+تُرينا المصادر التالية كيفية فعل ذلك:
 
-- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
-- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [شرح كيفيّة تسمية العناصر المُقدَّم من قبل W3C](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [شرح كيفيّة تسمية العناصر المُقدَّم من قبل WebAIM](https://webaim.org/techniques/forms/controls)
+- [شرح الأسماء سهلة الوصول المُقدَّم من قبل مجموعة Paciello](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+على الرغم من أنّه يُمكِن استخدام ممارسات HTML المعيارية هذه بشكلٍ مباشر في React، لاحظ أنّ الخاصيّة `for` attribute تُكتَب بالشكل `htmlFor` في JSX:
 
 ```javascript{1}
 <label htmlFor="namedInput">Name:</label>
 <input id="namedInput" type="text" name="name"/>
 ```
 
-### Notifying the user of errors {#notifying-the-user-of-errors}
+### إخبار المستخدمين عن الأخطاء {#notifying-the-user-of-errors}
 
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
+يجب أن تكون جميع حالات الأخطاء مفهومة من قبل جميع المستخدمين. يُرينا الرابط التالي كيفيّة إظهار نصوص الأخطاء إلى القارئين أيضًا:
 
-- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
+- [شرح إشعارات المستخدمين المُقدَّم من قبل W3C](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [شرح التحقّق من الحقول المُقدَّم من قبل WebAIM](https://webaim.org/techniques/formvalidation/)
 
-## Focus Control {#focus-control}
+## التحكم من خلال تركيز الحقول {#focus-control}
 
-Ensure that your web application can be fully operated with the keyboard only:
+احرص على أن يكون تطبيق الويب لديك سهل الوصول بشكلٍ كامل من خلال لوحة المفاتيح فقط:
 
-- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
+- [شرح سهولة الوصول من لوحة المفاتيح المُقدَّم من قبل WebAIM](https://webaim.org/techniques/keyboard/)
 
-### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
+### تركيز لوحة المفاتيح وحدود التركيز {#keyboard-focus-and-focus-outline}
 
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
+يُشير تركيز لوحة المفاتيح إلى العنصر الحالي في DOM المُختار ليقبل الدّخل من لوحة المفاتيح. نشاهده كحد خارجي للتركيز مرسوم بشكل مشابه للحد في الصورة التالية:
 
 <img src="../images/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
 
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
+لا تستخدم CSS لإزالة هذا الحد الخارجي (مثلًا عن طريق تعيين `outline: 0`) إلّا إن كنتَ تضع بدلًا منه طريقة أخرى لحدود التركيز.
 
-### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
+### آليات التخطي إلى المحتوى المطلوب {#mechanisms-to-skip-to-desired-content}
 
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
+يجب تزويد آليات للسماح للمستخدمين بتخطي مقاطع التصفّح (navigation) في تطبيقك لأنّ هذا يُساعد ويُسرِّح التصفح من لوحة المفاتيح.
 
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
-internal page anchors and some styling:
+تكون روابط تخطي التصفّح أو روابط التخطي عبارة عن روابط تصفّح مخفيّة والتي تُصبِح ظاهرة فقط عندما يتفاعل مستخدمو لوحة المفاتيح مع الصفحة
+من السهل تطبيقها باستخدام الروابط الداخلية للصفحة وبعض التنسيق:
 
-- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
+- [شرح روابط تخطي التصفّح من WebAIM](https://webaim.org/techniques/skipnav/)
 
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
+استخدم أيضًا عناصر النقاط العلام والأدوار مثل العنصرين `<main>` و `<aside>`, للإعلان عن مناطق من الصفحة كمناطق مفيدة مما يسمح للمستخدم بالانتقال بسرعة إلى هذه الأقسام.
 
-Read more about the use of these elements to enhance accessibility here:
+اقرأ المزيد حول استخدام هذه العناصر لتعزيز سهولة الوصول من هنا:
 
-- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [نقاط علام سهلة الوصول](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Programmatically managing focus {#programmatically-managing-focus}
+### إدارة التركيز برمجيًّا {#programmatically-managing-focus}
 
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
-we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
+تُعدِّل تطبيقات React بشكلٍ مستمر HTML DOM خلال زمن التنفيذ، مما يؤدي أحيانًا إلى فقدان تركيز لوحة المفاتيح أو تعيينها إلى عنصر غير متوقّع. 
+نحتاج لإصلاح هذا إلى توجيه تركيز لوحة المفاتيح برمجيًّا بالاتجاه الصحيح. مثلًا عن طريق إعادة تعيين تركيز لوحة المفايتح إلى الزر الذي فتح النافذة بعد إغلاق تلك النافذة.
 
-MDN Web Docs takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+تشرح توثيقات الويب الخاصّة بشبكة مطوري Mozilla هذا الأمر وتصف كيف يمكننا بناء [أدوات مصغرة في JavaScript قابلة للتصفّح باستخدام لوحة المفاتيح](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-To set focus in React, we can use [Refs to DOM elements](/docs/refs-and-the-dom.html).
+لتعيين التركيز في React نستطيع استخدام [Refs to DOM elements](/docs/refs-and-the-dom.html).
 
-Using this, we first create a ref to an element in the JSX of a component class:
+نُنشِئ في البداية مرجعًا إلى عنصر في JSX الموجودة ضمن مكوّن React من نوع صنف:
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Create a ref to store the textInput DOM element
+	// إنشاء مرجع لتخزين عنصر textInput
     this.textInput = React.createRef();
   }
   render() {
-  // Use the `ref` callback to store a reference to the text input DOM
-  // element in an instance field (for example, this.textInput).
+  // استخدم رد النداء ref لتخزين مرجع إلى عنصر إدخال النص ضمن نسخة الحقل
+  // مثلًا this.textInput
     return (
       <input
         type="text"
@@ -191,18 +191,18 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Then we can focus it elsewhere in our component when needed:
+نستطيع بعدها التركيز في مكان آخر في مكوّننا عند الحاجة لذلك:
 
  ```javascript
  focus() {
-   // Explicitly focus the text input using the raw DOM API
-   // Note: we're accessing "current" to get the DOM node
+  // التركيز على حقل الإدخال النصي باستخدام DOM API
+  // ملاحظة: نصل إلى current للحصول على عقدة DOM الحالية
    this.textInput.current.focus();
  }
  ```
 
-Sometimes a parent component needs to set focus to an element in a child component. We can do this by [exposing DOM refs to parent components](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
-through a special prop on the child component that forwards the parent's ref to the child's DOM node.
+يحتاج المكوّن الأب أحيانًا إلى تعيين التركيز إلى مكوّن ابن. نستطيع فعل ذلك عن طريق [تعريض مراجع DOM للمكوّن الأب](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
+عبر خاصية مميزة في المكوّن الابن والتي تُمرِّر مرجع الأب إلى عقدة DOM للمكوّن الابن:
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -225,32 +225,29 @@ class Parent extends React.Component {
   }
 }
 
-// Now you can set focus when required.
+// تستطيع الآن تعيين التركيز عند الحاجة إليه
 this.inputElement.current.focus();
 ```
 
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC
-does not implement ref forwarding, the above pattern can still be used as a fallback.
+عند استخدام المكوّنات ذات الترتيب الأعلى لتمديد المكوّنات، فمن المفضّل[تمرير المرجع](/docs/forwarding-refs.html)  إلى المكوّن المغلّف باستخدام الدالة `forwardRef` في React. إن كان لا يعتمد المكوّن ذو الترتيب الأعلى المُقدَّم من طرف ثالث تمرير المراجع، فيُمكِن استخدام الطريقة السابقة كطريقة احتياطية.
 
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
-initially triggered the modal.
+من الأمثلة الرائعة حول إدارة التركيز مثال [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). وهو مثال نادر نسبيًّا عن نافذة سهلة الوصول بشكل كامل، فهي لا تُعيِّن فقط التركيز المبدئي على
+زر الإلغاء  `cancel` (ممّا يمنع مستخدم لوحة المفاتيح من تفعيل الحدث `success` عن طريق الخطأ) وتحصر تركيز لوحة المفاتيح بداخل النافذة، بل تُعيد تعيين التركيز أيضًا إلى العنصر الذي أطلق هذه النافذة.
 
->Note:
+>ملاحظة:
 >
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
->users want to use applications.
+>على الرغم من أنّ ميزة تركيز لوحة المفاتيح هي ميزة هامة لسهولة الوصول ولكن في نفس الوقت هي تقنية يجب استخدامها بحذر. استخدمها لإصلاح تركيز لوحة المفاتيح عند حدوث خطأ ما، ولكن لا تستخدمها لتتوقع كيف يريد المستخدم أن يتعامل مع التطبيق.
 
-## Mouse and pointer events {#mouse-and-pointer-events}
 
-Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where
-keyboard users cannot use your application.
+## أحداث المؤشر والفأرة{#mouse-and-pointer-events}
 
-To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where a user can disable an opened popover by clicking outside the element.
+احرص على أن تكون جميع الوظائف المتوفرة عبر أحداث الفأرة أو المؤشر سهلة الوصول باستخدام لوحة المفاتيح لوحدها. يقود الاعتماد على المؤشر فقط إلى حالات لا يتمكّن فيها مستخدمو لوحة المفاتيح من استخدام تطبيقك.
+
+لتوضيح ذلك فلننظر إلى مثال حول حصول خلل في سهولة الوصول بسبب أحداث الضغط click. يحتوي هذا المثال على نمط الضغط خارج النافذة حيث يستطيع المستخدم تعطيل النافذة المنبثقة المفتوحة عن طريق الضغط خارج العنصر:
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with a mouse showing that the close action works." />
 
-This is typically implemented by attaching a `click` event to the `window` object that closes the popover:
+يُنفَّذ هذا عن طريق إرفاق الحدث `click` بكائن النافذة `window` الذي يُغلِق النافذة المنبثقة:
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -301,12 +298,12 @@ constructor(props) {
 }
 ```
 
-This may work fine for users with pointer devices, such as a mouse, but operating this with the keyboard alone leads to broken functionality when tabbing to the next element
-as the `window` object never receives a `click` event. This can lead to obscured functionality which blocks users from using your application.
+يعمل هذا بشكل جيّد للمستخدمين الذي يمتلكون أجهزة تأشير كالفأرة مثلًا، ولكن تقود تجربة هذا المثال من لوحة المفاتيح وحدها إلى وظيفة معطوبة عند الانتقال للعنصر التالي بسبب عدم استقبال 
+الكائن `window` للحدث `click`. قد يؤدي هذا إلى منع المستخدمين من استخدام تطبيقك:
 
 <img src="../images/docs/outerclick-with-keyboard.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with the keyboard showing the popover not being closed on blur and it obscuring other screen elements." />
 
-The same functionality can be achieved by using an appropriate event handlers instead, such as `onBlur` and `onFocus`:
+يُمكِن تحقيق نفس الوظيفة عن طريق استخدام مُعالِجات الأحداث المناسبة، مثل  `onBlur` و `onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {
@@ -327,10 +324,11 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // We close the popover on the next tick by using setTimeout.
-  // This is necessary because we need to first check if
-  // another child of the element has received focus as
-  // the blur event fires prior to the new focus event.
+  // نغلق النافذة المنبثقة بالنقرة التالية عن طريق استخدام التابع setTimeout
+  // هذا ضروري لأننا نحتاج أولا من التحقق
+  // ما إذا كان ابن آخر للعنصر قد استقبل التركيز
+  // بسبب إطلاق الحدث blur قبل حدث التركيز الجديد
+  
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -339,14 +337,13 @@ class BlurExample extends React.Component {
     });
   }
 
-  // If a child receives focus, do not close the popover.
+  // إن استقبل أي عنصر ابن التركيز فلا تغلق النافذة المنبثقة
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
-    // React assists us by bubbling the blur and
-    // focus events to the parent.
+	// تساعدنا React عن طريق مضاعفة أحداث blur و focus للمكون الأب
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -368,86 +365,81 @@ class BlurExample extends React.Component {
 }
 ```
 
-This code exposes the functionality to both pointer device and keyboard users. Also note the added `aria-*` props to support screen-reader users. For simplicity's sake
-the keyboard events to enable `arrow key` interaction of the popover options have not been implemented.
+تُوفِّر هذه الشيفرة الوظيفة المطلوبة إلى مستخدمي المؤشر ولوحة المفاتيح بنفس الوقت. لاحظ أيضًا أنّنا أضفنا خاصيّات `aria-*` دعم المستخدمين الذين يقرؤون الشاشة.
+ولغرض البساطة لم ننفذ أحداث لوحة المفاتيح لتمكين التفاعل بمفاتيح الأسهم `arrow key` مع خيارات النافذة المنبثقة:
 
 <img src="../images/docs/blur-popover-close.gif" alt="A popover list correctly closing for both mouse and keyboard users." />
 
-This is one example of many cases where depending on only pointer and mouse events will break functionality for keyboard users. Always testing with the keyboard will immediately
-highlight the problem areas which can then be fixed by using keyboard aware event handlers.
+هذا فقط مثال واحد من حالات متعدّدة التي يؤدي فيها الاعتماد فقط على أحداث المؤشر والفأرة إلى خلل بالوظيفة بالنسبة لمستخدمي لوحة المفاتيح. يكشف اختبار لوحة المفاتيح مباشرة المناطق التي فيها مشاكل والتي يمكن بعد ذلك إصلاحها باستخدام معالجات أحداث لوحة المفاتيح.
 
-## More Complex Widgets {#more-complex-widgets}
+## أدوات مصغرة أكثر تعقيدًا {#more-complex-widgets}
 
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
-even the most complex widget can be coded accessibly.
+لا يجب أن تعني تجربة المستخدم الأكثر تعقيدًا أن تصبح سهولة الوصول أقل. تُحقَّق سهولة الوصول ببساطة عن طريق كتابة شيفرة قريبة من HTML قدر الإمكان. يُمكِن كتابة أكثر الأدوات المُصغَّرة تعقيدًا بطريقة سهلة الوصول.
 
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+نحتاج هنا إلى معرفة [بأدوار ARIA](https://www.w3.org/TR/wai-aria/#roles) و [حالات وخاصيّات ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
+أيضًا. وهي عبارة عن جداول تحتوي على خاصيّات HTML مدعومة بشكل كامل في JSX وتُمكِّننا من بناء مكوّنات React سهلة الوصول وذات وظيفة عالية الكفاءة.
 
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+يمتلك كل نوع من الأدوات المصغرة نمط تصميم خاص ومن المتوقع أن يعمل بطريقة معينة من قبل المستخدمين والعملاء مثل:
 
-- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
-- [Inclusive Components](https://inclusive-components.design/)
+- [أساليب WAI-ARIA – أنماط التصميم والأدوات المصغرة](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
+- [أمثلة Heydon Pickering – ARIA](https://heydonworks.com/practical_aria_examples/)
+- [المكوّنات الداخلية](https://inclusive-components.design/)
 
-## Other Points for Consideration {#other-points-for-consideration}
+## نقاط أخرى يجب أخذها بعين الاعتبار {#other-points-for-consideration}
 
-### Setting the language {#setting-the-language}
+### تعيين اللغة{#setting-the-language}
 
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+يجب أن تشير إلى لغة نصوص الصفحة لأنّ برامج قراءة الشاشة تستخدم هذا لتحديد إعدادات الصوت الصحيحة:
 
-- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
+- [توثيقات اللغة – WebAIM](https://webaim.org/techniques/screenreader/#language)
 
-### Setting the document title {#setting-the-document-title}
+### تعيين عنوان المستند {#setting-the-document-title}
 
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+عيّن عنوان المستند عن طريق العنصر `<title>`  بشكل صحيح ليصف محتوى الصفحة الحالية حيث يضمن ذلك أن يبقى المستخدم على دراية بمحتوى الصفحة الحالي:
 
-- [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
+- [فهم متطلبات عنوان المستند – WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+نستطيع تعيين العنوان في React باستخدام[مكوّن عنوان المستند](https://github.com/gaearon/react-document-title).
 
-### Color contrast {#color-contrast}
+### تباين اللون {#color-contrast}
 
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+احرص على امتلاك النص القابل للقراءة تباين ألوان كافٍ ليبقى مقروءًا من قبل المستخدمين ضعيفي البصر:
 
-- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
+- [فهم متطلبات تباين اللون – WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [كل شيء حول تباين اللون ولماذا يجب أن تعيد النظر فيه](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
+- [ما هو التباين اللوني – مشروع A11y](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
+قد يكون من الممل حساب مجموعات الألوان المناسبة يدويًّا لجميع الحالات في موقعك، لذا تستطيع [حساب جميع الألوان باستخدام Colorable](https://jxnblk.com/colorable/).
 
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+تتضمّن أدوات aXe و WAVE التي سنشير إليها اختبارات لتباين الألوان وستُبلِّغ عن أخطاء التباين.
 
-If you want to extend your contrast testing abilities you can use these tools:
+إن أردت تمديد قدرات اختبار التباين فبإمكانك استخدام هذه الأدوات:
 
-- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
+- [التحقق من تباين الألوان – WebAIM](https://webaim.org/resources/contrastchecker/)
+- [محلل تباين الألوان – مجموعة Paciello](https://www.paciellogroup.com/resources/contrastanalyser/)
 
-## Development and Testing Tools {#development-and-testing-tools}
+## أدوات الاختبار والتطوير {#development-and-testing-tools}
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+هنالك عدد من الأدوات التي نستطيع استخدامها لمساعدتنا على إنشاء تطبيقات ويب سهلة الوصول.
 
-### The keyboard {#the-keyboard}
+### لوحة المفاتيح {#the-keyboard}
 
-By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
+من أسهل وأهم الاختبارات التي يجب عليك القيام بها هي التحقق ما إذا كان كامل موقعك قابلًا للوصول والاستخدام عن طريق لوحة المفاتيح لوحدها. افعل ذلك عن طريق:
 
-1. Plugging out your mouse.
-1. Using `Tab` and `Shift+Tab` to browse.
-1. Using `Enter` to activate elements.
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
+1. إزالة الفأرة لديك.
+1. استخدام زر `Tab` و `Shift+Tab`  للتصفح.
+1. استخدام زر `Enter` لتفعيل العناصر.
+1. استخدام الأسهم للتفاعل مع بعض العناصر، مثل القوائم والقوائم المنسدلة.
 
-### Development assistance {#development-assistance}
+### مساعد التطوير {#development-assistance}
 
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
-have access to the following tool:
+نستطيع التحقق من بعض ميزات سهولة الوصول بشكل مباشر في شيفرة JSX. عادة تكون هذه التحققات متوفرة مسبقًا في أي مُحرِّر يحتوي على إضافات JSX من أجل أدوار ARIA، والحالات والخاصيّات. لدينا أيضًا إمكانية الوصول للأدوات التالية:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
-IDE's allow you to integrate these findings directly into code analysis and source code windows.
+تزوّدنا [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) من أجل ESLint بالتحقق من الأخطاء خاص بمشاكل سهولة الوصول في JSX. تسمح لك العديد من المُحرِّرات بتضمين هذه الموجودات بشكل مباشر في تحليل الشيفرة ونوافذ الشيفرة المصدرية.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
-you can create an `.eslintrc` file in the root of your project with this content:
+يمتلك [Create React App](https://github.com/facebookincubator/create-react-app) هذه الإضافة مع مجموعة قواعد فرعية مُفعلة. إن أردت تمكين المزيد من قواعد سهولة الوصول فبإمكانك إنشاء الملف `.eslintrc` في المجلد الجذري للمشروع مع وضع هذا المحتوى بداخله:
 
   ```json
   {
@@ -456,77 +448,76 @@ you can create an `.eslintrc` file in the root of your project with this content
   }
   ```
 
-### Testing accessibility in the browser {#testing-accessibility-in-the-browser}
+### اختبار سهولة الوصول في المتصفح {#testing-accessibility-in-the-browser}
+
+العديد من الأدوات الموجودة تنفذ اختبارات أداء لسهولة الوصول في صفحات الويب ضمن متصفحك. استخدمها مع أدوات التحقق من سهولة الوصول التي سنشير إليها الآن لأنّها فقط تختبر سهولة الوصول من الناحية التقنية في HTML:
 
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
-test the technical accessibility of your HTML.
 
-#### aXe, aXe-core and react-axe {#axe-axe-core-and-react-axe}
+#### aXe, aXe-core و react-axe {#axe-axe-core-and-react-axe}
 
-Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+توفّر لنا شركة Deque تقنية تُدعى [aXe-core](https://github.com/dequelabs/axe-core) من أجل اختبارات سهولة الوصول التلقائيّة لتطبيقاتنا. تتضمّن هذه الوحدة تكاملًا من أجل Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+إنّ [ مُحرِّك سهولة الوصول](https://www.deque.com/products/axe/) أو aXe هو عبارة عن إضافة للمتصفح لكشف سهولة الوصول مبنية على تقنية `aXe-core`.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+بإمكانك أيضًا استخدام الوحدة [react-axe](https://github.com/dylanb/react-axe) للتبليغ عن موجودات سهولة الوصول بشكل مباشر إلى الكونسول أثناء التطوير وتنقيح الأخطاء.
 
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
+[أداة تقييم سهولة الوصول للويب](https://wave.webaim.org/extension/) ، وهي عبارة عن إضافة أخرى للمتصفح.
 
-#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
+#### مستكشفات سهولة الوصول وشجرة سهولة الوصول {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
-to assistive technology, such as screen readers.
+[شجرة سهولة الوصول](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) هي عبارة عن مجموعة فرعية من شجرة DOM والتي تحتوي على كائنات سهلة الوصول لكل عنصر DOM والتي ينبغي تعريضها إلى تقنية مُساعِدة مثل قارئات الشاشة.
 
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+نستطيع بسهولة في بعض المتصفحات مشاهدة معلومات سهولة الوصول لكل عنصر في شجرة سهولة الوصول:
 
-- [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
-- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
-- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
+- [استخدام مستكشف سهولة الوصول في متصفح Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
+- [تفعيل مستكشف سهولة الوصول في متصفح Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
+- [استخدام مستكشف سهولة الوصول في متصفح OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
 
-### Screen readers {#screen-readers}
+### قارئات الشاشة {#screen-readers}
 
-Testing with a screen reader should form part of your accessibility tests.
+يجب أن يكون اختبار قارئات الشاشة جزءًا من اختبارات سهولة الوصول لديك.
 
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
+يرجى الانتباه إلى وجود اختلافات عند الجمع بين قارئات شاشة مختلفة مع متصفحات مختلفة. لذا من الأفضل أن تختبر تطبيقك مع المتصفح الذي يُلائِم قارئات الشاشة التي تختارها.
 
-### Commonly Used Screen Readers {#commonly-used-screen-readers}
+### قارئات الشاشة الأشيع استخدامًا {#commonly-used-screen-readers}
 
-#### NVDA in Firefox {#nvda-in-firefox}
+#### NVDA في متصفح Firefox {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+[الوصول غير المرئي لسطح المكتب](https://www.nvaccess.org/) (NonVisual Desktop Access أو اختصارًا NVDA) هو عبارة عن قارئ شاشة مُستخدَم بشكلٍ كبير.
 
-Refer to the following guides on how to best use NVDA:
+ارجع إلى المقالات التالية لمعرفة أفضل طريقة لاستخدام NVDA:
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
-- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
+- [استخدام NVDA لتقييم سهولة الوصول للويب – شرح من موقع WebAIM](https://webaim.org/articles/nvda/)
+- [اختصارات لوحة المفاتيح في NVDA – شرح من موقع Deque](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
-#### VoiceOver in Safari {#voiceover-in-safari}
+#### VoiceOver في متصفح Safari {#voiceover-in-safari}
 
-VoiceOver is an integrated screen reader on Apple devices.
+وهو عبارة عن قارئ شاشة مُدمَج في أجهزة Apple.
 
-Refer to the following guides on how activate and use VoiceOver:
+ارجع إلى المقالات التالية لمعرفة كيفيّة تفعيل واستخدام VoiceOver:
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
-- [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
-- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
+- [استخدام VoiceOver لتقييم سهولة الوصول للويب – شرح من موقع WebAIM](https://webaim.org/articles/voiceover/)
+- [اختصارات لوحة مفاتيح نظام OS X في VoiceOver – شرح من موقع Deque](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
+- [اختصارات نظام iOS في VoiceOver – شرح من موقع Deque](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
-#### JAWS in Internet Explorer {#jaws-in-internet-explorer}
+#### JAWS في متصفح Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
+[الوصول للوظائف عن طريق الكلام](https://www.freedomscientific.com/Products/software/JAWS/) (Job Access With Speech أو اختصارًا JAWS)، وهو قارئ شاشة مُستخدَم على نظام ويندوز.
 
-Refer to the following guides on how to best use JAWS:
+رجع إلى هذه الإرشادات حول كيفيّة استخدام JAWS:
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
-- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
+- [استخدام JAWS لتقييم سهولة الوصول للويب – شرح من موقع WebAIM](https://webaim.org/articles/jaws/)
+- [اختصارات لوحة المفاتيح في JAWS – شرح من موقع Deque](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Other Screen Readers {#other-screen-readers}
+### قارئات شاشة أخرى {#other-screen-readers}
 
-#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
+#### ChromeVox في متصفح Chrome{#chromevox-in-google-chrome}
 
-[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](https://www.chromevox.com/) هو قارئ شاشة مُدمَج على أجهزة Chromebooks ومُتوفِّر [كإضافة](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) لمتصفّح Google Chrome.
 
-Refer to the following guides on how best to use ChromeVox:
+ارجع إلى الإرشادات التالية حول كيفيّة استخدام ChromeVox:
 
-- [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
+- [استخدام قارئ الشاشة المُدمَج – دليل Chromebook من Google](https://support.google.com/chromebook/answer/7031755?hl=en)
+- [مرجع اختصارات لوحة المفاتيح التقليدية في ChromeVox](https://www.chromevox.com/keyboard_shortcuts.html)

From 9a2397c546114c5ce8d8da6b8b9000edb60a3cd5 Mon Sep 17 00:00:00 2001
From: Splimter <soheybemir@hotmail.fr>
Date: Fri, 29 Mar 2019 13:25:47 +0100
Subject: [PATCH 2/2] Done Translating-accessibility.md

---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 5c9205749..0f304e228 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -1,6 +1,6 @@
 ---
 id: accessibility
-title: Accessibility
+title: سهولة الوصول في React
 permalink: docs/accessibility.html
 ---