chore(i18n,learn): processed translations (#78)

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md

@@ -9,7 +9,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
 
 # --description--
 
-من المرجح أنك رأيت خاصية `alt` لوسم `img` في تحديات أخري. نص `alt` يصف محتوي الصورة ويوفر بديل نصي لها. هذا يساعد في حالة فشل الصورة في التحميل أو عدم قدرة المستخدم علي رؤيتها. تستخدم أيضا من قبل محركات البحث لفهم ما تحتوي عليه الصورة لتضمينها في نتائج البحث. إليك مثال:
+You've likely seen an `alt` attribute on an `img` tag in other challenges. `alt` text describes the image's content and provides a text-alternative for it. An `alt` attribute helps in cases where the image fails to load or can't be seen by a user. Search engines also use it to understand what an image contains to include it in search results. إليك مثال:
 
 ```html
 <img src="importantLogo.jpeg" alt="Company logo">

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md

@@ -11,7 +11,7 @@ dashedName: >-
 
 # --description--
 
-هناك أشكال مختلفة من عمى الألوان. يمكن أن تتراوح هذه من انخفاض الحساسية إلى طول موجي معين من الضوء إلى عدم القدرة على رؤية اللون على الإطلاق. أكثر الأشكال شيوعاً هو انخفاض الحساسية للكشف عن اللون الأخضر.
+There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.
 
 على سبيل المثال، إذا كان لون المحتوى لديك في الواجهة الأمامية والخلفية ذا لون أخضر من درجتين متفاوتتين، قد لا يكون المستخدم المصاب بعمى الألوان قادراً على تمييزهما. يمكن النظر إلى الألوان المتشابهة على أنها جيران على عجلة الألوان، وينبغي تجنب تلك التركيبات عند نقل المعلومات الهامة.
 

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md

@@ -9,7 +9,7 @@ dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
 
 # --description--
 
-يشكل اللون جزءا كبيرا من التصميم البصري، ولكن استخدامه يطرح مسألتين تتعلقان بإمكانية الوصول. أولا، لا ينبغي استخدام اللون وحده كوسيلة وحيدة لنقل معلومات هامة لأن مستخدمي قارئ الشاشة لن يروها. ثانيًا ، تحتاج ألوان المقدمة والخلفية إلى تباين كافٍ حتى يتمكن المستخدمون الذين يعانون من عمى الألوان من تمييزها.
+Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.
 
 شملت التحديات السابقة إيجاد بدائل نصية لمعالجة المسألة الأولى. أدخل التحدي الأخير أدوات للتحقق من التباين للمساعدة مع التحدي الثاني. نسبة التباين 4.5:1 الموصى بها من WCAG تنطبق على استخدام الألوان بالإضافة إلى تركيبات التدرج الرمادي.
 

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md

@@ -1,6 +1,6 @@
 ---
 id: 587d778f367417b2b2512aae
-title: Give Links Meaning by Using Descriptive Link Text
+title: إعطاء الروابط معنى باستخدام النص الوصفي الخاص بالرابط
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/c437DcV'
 forumTopicId: 301013
@@ -11,27 +11,27 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
 
 Screen reader users have various options for what type of content their device reads. These options include skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.
 
-قارئ الشاشة يفعل ذلك بقراءة نص الرابط، أو ما بين علامات الرابط (`a`). Having a list of "click here" or "read more" links isn't helpful. Instead, use brief but descriptive text within the `a` tags to provide more meaning for these users.
+قارئ الشاشة يفعل ذلك بقراءة نص الرابط، أو ما بين علامات الرابط (`a`). وجود قائمة من روابط "click here" أو "read more" ليس مفيداً . بدلاً من ذلك، استخدم نصًا موجزًا ولكن وصفيًا داخل العلامات ` a ` لتوفير المزيد من المعنى لهؤلاء المستخدمين.
 
 # --instructions--
 
 نص الرابط الذي يستخدمه Camper Cat ليس وصفياً جداً بدون السياق المحيط. انقل علامات الرابط (`a`) بحيث تلتف حول النص `information about batteries` بدلاً من `Click here`.
 
 # --hints--
 
-Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
+يجب أن تحرك علامات الرابط `a` من حول `Click here` لتلتف حول الكلمات `information about batteries` .
 
 ```js
 assert.match(document.querySelector('a')?.textContent, /^(information about batteries)$/g);
 ```
 
-The `a` element should have an `href` attribute with a value of an empty string `""`.
+يجب أن يحتوي عنصر `a` على سمة `href` بقيمة سلسلة فارغة `""`.
 
 ```js
 assert.isEmpty(document.querySelector('a')?.getAttribute('href'));
 ```
 
-The `a` element should have a closing tag.
+يجب أن يحتوي عنصر `a` الخاص بك على علامة إغلاق.
 
 ```js
 assert.isTrue(code.match(/<\/a>/g)?.length === code.match(/<a href=(''|"")>/g)?.length);

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md

@@ -1,6 +1,6 @@
 ---
 id: 587d7789367417b2b2512aa4
-title: Improve Accessibility of Audio Content with the audio Element
+title: تحسين إمكانية الوصول إلى محتوى الصوت باستخدام عنصر الصوت
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cVJVkcZ'
 forumTopicId: 301014
@@ -11,9 +11,9 @@ dashedName: improve-accessibility-of-audio-content-with-the-audio-element
 
 HTML5's `audio` element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
 
-The `audio` tag supports the `controls` attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
+تدعم علامة `audio` سمة `controls`  . و هذا يظهر عناصر التحكم الافتراضية لدي المتصفحك كزر التشغيل و الإيقاف و غيرها, و يدعم وظائف لوحة المفاتيح. هذه سمة منطقية , يعنى أنها لا تحتج إلى قيمة , فوجودها داخل العلامة كفيل لتهيئتها .
 
-Here's an example:
+إليك مثال:
 
 ```html
 <audio id="meowClip" controls>
@@ -22,50 +22,50 @@ Here's an example:
 </audio>
 ```
 
-**Note:** Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.
+**ملاحظة:** المحتوى متعدد الوسائط Multimedia يحتوي عادة على مكونات بصرية وسمعية على حد سواء. تحتاج إلى ترجمات متزامنة و ملف نصي حتى يتمكن المستخدمون الذين يعانون من مشاكل بصرية و/أو سمعية من الوصول إليها. وعموما، فإن مطور الويب ليس مسؤولا عن إنشاء التسميات التوضيحية أو ملف نصي، ولكنه يحتاج إلى معرفة كيفية إدراجها.
 
 # --instructions--
 
-حان الوقت لأخذ استراحة من Camper Cat و مقابلة الزميل camper Zersiax (@zersiax), بطل ال accessibility و مستخدم لتقنية قارئ الشاشة (screen reader). To hear a clip of his screen reader in action, add an `audio` element after the `p` element. Include the `controls` attribute. Then place a `source` element inside the `audio` tags with the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
+حان الوقت لأخذ استراحة من Camper Cat و مقابلة الزميل camper Zersiax (@zersiax), بطل ال accessibility و مستخدم لتقنية قارئ الشاشة (screen reader). لسماع مقطعاً من قارئه للشاشة فى أثناء العمل , أضف عنصر `audio` بعد عنصر `p` . ضَمّن سمة `controls` . Then place a `source` element inside the `audio` tags with the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
 
-**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
+**ملاحظة:** قد يبدو مقطع الصوت سريعا ويصعب فهمه، ولكن هذه سرعة عادية لمستخدمي قارئ الشاشة (screen reader).
 
 # --hints--
 
-Your code should have one `audio` tag.
+يجب أن يحتوي الكود الخاص بك على tag واحد فقط من نوع `audio`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('audio'),1);
 ```
 
-Your `audio` element should have a closing tag.
+لا بد ان يحتوي عنصر ال `audio` علي وسم إغلاق (closing tag).
 
 ```js
 assert.match(code,/<audio.*>[\s\S]*<\/audio>/g);
 assert.lengthOf(code.match(/<\/audio>/g),1);
 ```
 
-The `audio` tag should have the `controls` attribute.
+وسم ال `audio` يجب ان يحتوي علي ال attribute من نوع `controls`.
 
 ```js
 assert.exists(document.querySelector('audio')?.getAttribute('controls'));
 ```
 
-Your code should have one `source` tag.
+يجب أن يحتوي الكود الخاص بك على وسم (tag) واحد فقط من نوع `source`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('source'), 1);
 ```
 
-Your `source` tag should be inside the `audio` tags.
+يجب أن يكون الوسم (tag) `source` داخل وسم (tag) ال`audio`.
 
 ```js
 const audio = document.querySelector('audio');
 const children = audio.querySelectorAll(`:scope ${'source'}`);
 assert.lengthOf(children,1);
 ```
 
-The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.
+قيمة ال `src` للوسم `source` يجب أن تتطابق مع الرابط الموجود في التعليمات بالضبط.
 
 ```js
 assert.equal(
@@ -74,7 +74,7 @@ assert.equal(
 );
 ```
 
-Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.
+يجب أن يحتوي الكود الخاص بك علي attribute من نوع `type` في وسم ال `source` و تعين قيمته ل audio/mpeg.
 
 ```js
 assert.equal(document.querySelector('source')?.getAttribute('type'), 'audio/mpeg');

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md

@@ -1,6 +1,6 @@
 ---
 id: 587d778a367417b2b2512aa5
-title: Improve Chart Accessibility with the figure Element
+title: تحسين إمكانية الوصول إلى الرسم البياني مع العنصر figure
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cGJMqtE'
 forumTopicId: 301015
@@ -11,9 +11,9 @@ dashedName: improve-chart-accessibility-with-the-figure-element
 
 HTML5 introduced the `figure` element and the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the `figure`.
 
-For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
+وبالنسبة لأشكال تمثيل البيانات مثل الرسوم البيانية، يمكن استخدام عنوان للشرح بإيجاز عن الاتجاهات أو الاستنتاجات بالنسبة للمستخدمين ذوي العاهات البصرية. وهناك تحد آخر يغطي كيفية نقل نسخة الجدول من بيانات المخطط خارج الشاشة (باستخدام CSS) لمستخدمي قارئ الشاشة.
 
-Here's an example - note that the `figcaption` goes inside the `figure` tags and can be combined with other elements:
+مثال - لاحظ أن `figcaption` يدخل في `figure` ويمكن الجمع بينه وبين عناصر أخرى:
 
 ```html
 <figure>
@@ -27,43 +27,43 @@ Here's an example - note that the `figcaption` goes inside the `figure` tags and
 
 # --instructions--
 
-Camper Cat شاق في العمل لإنشاء مخطط أعمدة مكدسة يبين مقدار الوقت في الأسبوع لقضاء التدريب على السرقة، القتال والأسلحة. Help him structure his page better by changing the `div` tag he used to a `figure` tag, and the `p` tag that surrounds the caption to a `figcaption` tag.
+Camper Cat شاق في العمل لإنشاء مخطط أعمدة مكدسة يبين مقدار الوقت في الأسبوع لقضاء التدريب على السرقة، القتال والأسلحة. ساعده على هيكلة صفحته بشكل أفضل عن طريق تغيير علامة `div` التي اعتدها إلى `figure` العلامة، و العلامة `p` التي تحيط بالعبارة التوضيحية لـ `figcaption`.
 
 # --hints--
 
-Your code should have one `figure` tag.
+يجب أن يحتوي الكود الخاص بك على وسم (tag) واحد فقط من نوع `figure`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('figure') , 1);
 ```
 
-Your code should have one `figcaption` tag.
+يجب أن يحتوي الكود الخاص بك على tag واحد فقط من نوع `figcaption`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('figcaption') , 1);
 ```
 
-Your code should not have any `div` tags.
+يجب ألا يحتوي الكود الخاص بك على أي وسم `div`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('div'), 0);
 ```
 
-Your code should not have any `p` tags.
+يجب ألا يحتوي الكود الخاص بك علي اي وسوم `p`.
 
 ```js
 assert.lengthOf(document.querySelectorAll('p') , 0);
 ```
 
-The `figcaption` should be a child of the `figure` tag.
+وسم `figcaption` يجب ان child لوسم `figure`.
 
 ```js
 const figure = document.querySelector('figure');
 const children = figure?.querySelectorAll(`:scope ${'figcaption'}`);
 assert.lengthOf(children, 1);
 ```
 
-Your `figure` element should have a closing tag.
+يجب أن يحتوي العنصر `figure` على وسم إغلاق.
 
 ```js
 assert.isTrue(

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md

@@ -1,6 +1,6 @@
 ---
 id: 587d778a367417b2b2512aa6
-title: Improve Form Field Accessibility with the label Element
+title: تحسين إمكانية الوصول إلى حقل النموذج مع عنصر label
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cGJMMAN'
 forumTopicId: 301016
@@ -11,11 +11,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
 
 Improving accessibility with semantic HTML markup applies to using both appropriate tag names and attributes. The next several challenges cover some important scenarios using attributes in forms.
 
-The `label` tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The `for` attribute on a `label` tag explicitly associates that `label` with the form control and is used by screen readers.
+وسم `label` تغلف النص لعنصر تحكم استمارة محددة، عادة الاسم أو التسمية لاختيار. هذه الروابط تعني العنصر وتجعل الشكل أكثر قابلية للقراءة. السمة `for` على علامة `label` تربط بشكل صريح أن `label` مع عنصر التحكم في الاستمارة ويستخدمها قارئ الشاشة.
 
-You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a `label` element along with the label text in order to make the text clickable. Another way to achieve this is by using the `for` attribute, as explained in this lesson.
+لقد تعلمت عن radio buttons وتسميتها في درس في قسم HTML Basic. في ذلك الدرس، قمنا بتغليف عنصر radio button داخل عنصر `label` جنبا إلى جنب مع نص label لجعل النص قابل للنقر. طريقة أخرى لتحقيق هذا هو استخدام السمة `for` كما هو موضح في هذا الدرس.
 
-The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Here's an example:
+قيمة `for` السمة يجب أن تكون نفس قيمة `id` سمة التحكم في الشكل. على سبيل المثال:
 
 ```html
 <form>
@@ -26,21 +26,20 @@ The value of the `for` attribute must be the same as the value of the `id` attri
 
 # --instructions--
 
-تنتظر Camper Cat الكثير من الاهتمام في مشاركاته المدونة المدروسة وترغب في تضمين نموذج تسجيل البريد الإلكتروني. Add a `for` attribute on the email `label` that matches the `id` on its `input` field.
+تنتظر Camper Cat الكثير من الاهتمام في مشاركاته المدونة المدروسة وترغب في تضمين نموذج تسجيل البريد الإلكتروني. أضف `for` سمة على البريد الإلكتروني `label` التي تطابق `id` على `input`.
 
 # --hints--
 
-Your code should have a `for` attribute on the `label` tag that is not empty.
+يجب أن يحتوي الكود الخاص بك علي attribute من نوع `for` في وسم ال `label` و تعين قيمه فارغه.
 
 ```js
 assert.isNotEmpty(document.querySelector('label')?.getAttribute('for'));
 ```
 
-Your `for` attribute value should match the `id` value on the email `input`.
+يجب أن تتطابق قيمة الرمز ` for ` مع قيمة ` id ` في ` إدخال البريد الإلكتروني </ code>.</p>
 
-```js
-assert.equal(document.querySelector('label')?.getAttribute('for'), 'email');
-```
+<pre><code class="js">assert.equal(document.querySelector('label')?.getAttribute('for'), 'email');
+`</pre>
 
 # --seed--