freeCodeCamp/guide/arabic/accessibility/accessibility-basics/index.md

title	localeTitle
Accessibility Basics	أساسيات الوصول

"الفنون المظلمة كثيرة ومتنوعة ومتغيرة باستمرار وأبدي. إن محاربتهم تشبه محاربة وحش كثير الرأس ، وفي كل مرة ينقطع عنق ، ينبت رأسه أكثر شراسة وأذكى من ذي قبل. وهو غير مثبت ، متحور ، غير قابل للتدمير ".

- الأستاذ سيفيروس سناب ، سلسلة هاري بوتر

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

في هذا اليوم وهذا العصر تم اختراع المزيد والمزيد من التقنيات الجديدة لجعل حياة المطورين وكذلك المستخدمين أسهل. إلى أي درجة يعتبر هذا شيئًا جيدًا هو النقاش لفترة أخرى في الوقت الحالي ، يكفي أن نقول أن صندوق أدوات المطور ، وخاصة مطور الويب ، يتغير باستمرار مثلما تسمى "الفنون السوداء" وفقًا لصديقنا سناب.

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

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

إذا كنت تقرأ هذا المقال ، فأنا أظن أنك في واحدة من الفئات التالية:

• أنت مطور ويب مبتدئ وترغب في معرفة المزيد حول إمكانية الوصول
• أنت مطور ويب محنك وفقدت طريقك (المزيد عن ذلك لاحقًا)
• تشعر أن هناك التزامًا قانونيًا من العمل ، وتحتاج إلى معرفة المزيد عنه.

إذا كنت خارج هذه الفئات العريضة ، فيرجى إبلاغي بذلك. أنا دائما أحب أن أسمع من الناس الذين يقرؤون ما أكتب عنه, يؤثر تنفيذ الوصول على الفريق بأكمله، من الألوان التي اختارها المصمم والنسخة التي يكتبها مؤلف الإعلانات وعليك المطور.

إذن ، ما هي إمكانية الوصول على أي حال؟

تعتبر إمكانية الوصول في حد ذاتها عبارة عن مصطلح مضلل في بعض الأحيان ، خاصة إذا كانت اللغة الإنجليزية هي لغتك الثانية. يشار إليها أحيانا على أنها تصميم شامل.

إذا كان موقعك على الإنترنت ، يمكن الوصول إليه من قبل أي شخص لديه متصفح ويب، بمعنى أن موقع الويب متاح للجميع من خلال متصفح الويب.

ولكن هل كل المحتوى على موقع الويب الخاص بك مقروء بالفعل وقابل للاستخدام ومفهوم للجميع؟ أليست هناك عتبات تمنع بعض الأشخاص من "الوصول" إلى جميع المعلومات التي تعرضونها؟

يمكنك أن تسأل نفسك أسئلة مثل الأسئلة التالية:

• إذا قمت بإضافة معلومات موجودة فقط في ملف صوتي ، فهل يستطيع الشخص الأصم الحصول على هذه المعلومات؟
• إذا كنت تدل على جزء مهم من موقعك على الويب بلون معين ، فهل سيعرف شخص عملاق الألوان ذلك؟
• إذا أضفت صورًا على موقعك على الويب تنقل معلومات مهمة ، فكيف سيعرف الشخص المكفوف أو ضعيف الرؤية ذلك؟
• إذا كنت تريد التنقل في التطبيق باستخدام لوحة المفاتيح أو عصا الفم ، هل سيكون ذلك ممكنًا أم متوقعًا؟
• هل يفترض التطبيق الخاص بك اتجاه الجهاز وماذا لو لم يتمكن المستخدم من تغييره فعليًا؟
• هل هناك مظاهر متسامحة من التطبيق الخاص بك لشخص قد يحتاج إلى مزيد من الوقت لملء نموذج؟
• هل لا يزال تطبيقك يعمل (التحسين التدريجي) على افتراض أن JavaScript لا يتم تحميله في الوقت المناسب؟
• يمكنك حتى الذهاب إلى حد القول ، إذا كان موقع الويب الخاص بك ثقيلًا في الموارد ، فهل يتمكن شخص ما على اتصال بطيء أو متقطع من قراءة المحتوى الخاص بك؟

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

لماذا تنفيذ الوصول؟

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

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

ومع ذلك ، فإن إجراء هذا البحث أمر أساسي في الدفاع عن مثل هذا البيان. هل تعلم أن هناك لاعبين أعمى؟ وحتى المصورين المكفوفين؟ . ربما كنت تعرف أن الموسيقيين أصمّاء ؟

إذا فعلت ذلك ، خير لك. إذا لم يكن كذلك ، أعتقد أن هذا يدفع وجهة نظري أكثر إلى المنزل.

تصبح الصورة أكثر تعقيدًا عندما ننظر إلى تشريع يفرض عليك فعليًا إمكانية الوصول إلى بعض مواقع الويب وتطبيقات الويب. المثال الرئيسي هو القسم 508 من الولايات المتحدة. في الوقت الحالي ، يشير هذا القانون بشكل أساسي إلى المنظمات الحكومية ومواقع القطاع العام ، إلخ. ومع ذلك ، فإن القوانين تتغير.

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

هناك اختلافات في هذا التشريع في جميع أنحاء العالم ، بعضها أشد وشمولًا من غيرها. عدم معرفة هذه الحقيقة لا يجعل الدعوى تختفي للأسف.

حسنًا ، إمكانية الوصول هي مشكلة كبيرة. الآن كيف ننفذه؟

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

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

لإضفاء القليل من طريقة على الجنون ، تم إنشاء إرشادات إمكانية الوصول إلى محتوى الويب أو WCAG . يحتوي هذا المستند على عدد من المعايير التي يمكنك استخدامها للتحقق من موقع الويب الخاص بك. في الوقت الحالي ، سأغطي بعض أهم الأساسيات هنا. سأوجهك إلى الثمار المعلقة ، إذا جاز التعبير. في المقالات التالية ، سأناقش المزيد من التقنيات المتقدمة مثل [WAI-ARIA] وهو أمر مهم للتطبيقات التي تعتمد على JavaScript.

تحدث مثل السكان الأصليين

مواصفات HTML عبارة عن مستند يصف كيفية استخدام اللغة لإنشاء مواقع ويب. إن التقنيات المساعدة ، مثل برامج قراءة الشاشة وبرامج التعرف على الكلام إلخ ، على دراية بهذا المستند. على الرغم من ذلك ، غالبًا ما لا يكون مطورو الويب ، أو على الأقل غير كافٍ ، ويعتقدون أن شيئًا كهذا على ما يرام:

    <div class="awesome-button"></div>

    <span><strong>Huge heading I will style with CSS later</strong></span>

    <span class="clickable-with-JavaScript">English</span>

خمين ما؟ كل ثلاثة من هذه العناصر كسر عدة معايير WCAG ، وبالتالي لا يمكن الوصول إليها على الإطلاق.

يكسر العنصر الأول ما يسمى "الاسم ، الدور ، القيمة ، المعيار" ، والذي ينص على أن جميع العناصر على صفحة الويب يجب أن تعرض اسمها ، ودورها (مثل الزر) وقيمتها (مثل محتويات حقل تحرير). للتقنيات المساعدة. لا يوفر هذا div أيًا من الثلاثة ، مما يجعله غير مرئي لقراء الشاشة.

يشبه العنصر الثاني شكلًا مرئيًا بعد تصميمه باستخدام CSS ، لكن معناه امتداد. لذلك ، لن تعرف التقنيات المساعدة عنوانها. سيقرأ قارئ الشاشة هذا كنص عادي ، بدلاً من العنوان. غالبًا ما يكون لدى قارئ الشاشة مفتاح تشغيل سريع للانتقال سريعًا إلى أقرب عنوان ، ولن يتم تضمين هذا العنوان في هذا النطاق.

يمكن أن يكون العنصر الثالث على سبيل المثال عنصرًا يمكن للمستخدم النقر عليه لتغيير لغة موقع الويب. ربما ستتوسع قائمة رسوم متحركة من اللغات عند النقر عليها. ومع ذلك ، فهذه أيضًا فترة ولا تعرض دورها (الرابط ، أو الزر) ، مما يجعل التقنيات المساعدة تعتقد أن هذه هي الكلمة الإنجليزية فقط مع بعض التصميم.

Spans و divs غير عناصر. أنها تهدف إلى احتواء عناصر أخرى ، وليس لتكون العناصر نفسها. يمكنك إصلاحها بطريقتين:

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

    <button>This is a button</button>

    <h2>Here's a heading level two</h2>

    <a href="JavascriptThing">English</a>

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

لا يمكن لأي مؤسسة الوقوف بدون هيكل

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

تذكر أيضًا أن العناوين هرمية. إذا كنت تستخدم h2 ، فتأكد من أن h3's التي تتبعها بالفعل لها علاقة بهذا h2. لا تضع h3 للحصول على تفاصيل الاتصال أسفل h2 الخاص بك لمشاركات المدونة الأخيرة. تشبيه جيد هنا هو كتاب به فصول ، يحتوي على أقسام فرعية. أنت لن تضع قسماً على خبز البسكويت في منتصف فصل حول تحضير الخضار ... أو ... أنت لا… صحيح؟

ما هو البديل؟

الصور الموجودة على موقع الويب رائعة. إنهم يضيفون طبقة جديدة إلى المحتوى الخاص بك ، يمكن أن يجعلوا تجربة زوار موقعك أكثر غامرة وبصفة عامة تبدو فقط جيدة بين كل هذا النص. يمكن أن تقول الصورة أكثر من ألف كلمة ، أليس كذلك؟

من المؤكد. هذا هو ، إذا كنت تستطيع رؤيتها. في مواصفات HTML5 ، يجب أن تحتوي سمة img- دائمًا على سمة alt. هذه السمة تعني كبديل للصورة في حالة عدم رؤيتها. سيكون هذا صحيحًا بالنسبة للزوار المكفوفين لموقعك الإلكتروني ، ولكن أيضًا عندما لا يمكن تحميل صورتك لسبب ما. لا يؤدي عدم إضافة علامة alt إلى سمة img إلى كسر إمكانية الوصول فقط ، بل يتعارض مع مواصفات HTML5.

إنني أتوسل إلى أي مطور ويب يدرك أنه يقوم بذلك لأكل قبعة المبرمج الخاصة به والعمل على Windows 95 بشكل خاص لمدة أسبوع. بعد انتهاء الوقت ، اكتب مقالاً عن ما تعلمته من هذه المحنة حتى أتمكن من الضحك أثناء تناول القهوة بعد الظهر.

الآن ، هناك واحد التحذير هنا. تُعد سمات Alt إلزامية وفقًا لمواصفات HTML5 ، ولكنها ليست إلزامية لملئها فعليًا. <img src="awesome-image.jpg", alt=""> رمز HTML5 قانونيًا.

هل يجب عليك ملء علامات alt-alt لجميع الصور؟ ذلك يعتمد على الصورة ، حقا. بالنسبة إلى صور الخلفية ، لا تكون الإجابة عادةً ، ولكن يجب عليك استخدام CSS لتلك الرسائل على أي حال.

بالنسبة إلى الصور الزخرفية البحتة التي لا تحتوي على معلومات فيها على الإطلاق ، يمكنك مجانًا الاختيار مجانًا. إما وضعها في شيء مفيد وصفي أو لا شيء على الإطلاق.

بالنسبة للصور التي تحتوي على معلومات ، مثل كتيب ، وخريطة ، ومخطط ، وما إلى ذلك ، لا تقوم بإضافة نص بديل فواصل WCAG ما لم تقدم بديلًا نصيًا. عادة ما تكون هذه سمة alt ، ولكن يمكن أيضًا أن تكون كتلة نص أسفل أو بجوار الصورة.

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

يجب أن يوفر النص السياق والمعلومات التي تعتبر بديلاً لرؤية الصورة. لا يكفي ببساطة أن تكتب "صورة لبالونات الهواء الساخن" - لماذا توجد صور البالون هناك؟ إذا كانت الصورة منمنمة أو تحمل معنى عاطفيًا ، فيمكن تضمين ذلك.

لا أستطيع قراءة الشخبطة يا بني

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

يحتوي WCAG على نسب تباين للحروف الصغيرة والكبيرة ، وهناك الكثير من الأدوات لمعرفة ما إذا كانت نسب التباين قوية بما فيه الكفاية. المعلومات والأدوات موجودة ، استخدمها.

يعد استخدام مدقق تباين لون WebAIM مكانًا جيدًا لبدء التحقق من تباين الألوان.

ماذا يفعل هذا الزر؟

بينما نحن في موضوع النماذج ، دعونا نلقي نظرة سريعة على علامة input . هذا الرجل الصغير مهم جدا.

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

أعتقد أن أفضل طريقة لتوضيح ذلك هي إعطاء مثال على ذلك:

    <label for='username'>

    <input type='text' id='username'>

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

هذا أمر طويل

لنأخذ استراحة صغيرة أريدك أن تذهب إلى صفحة ويب مصممة تصميماً جيداً. يمكن أن يكون أي صفحة. هيا ، سأنتظر

الى الخلف؟ حسنا عظيم. الآن ، انظر إلى الصفحة مرة أخرى ولكن قم بتعطيل كل CSS. هل ما زالت تبدو جيدة؟ هل لا يزال المحتوى الموجود على الصفحة بترتيب منطقي؟ إذا كان الأمر كذلك ، عظيم. لقد عثرت على صفحة بهيكل HTML لائق. (إحدى الطرق لعرض صفحة بدون CSS بسهولة هي تحميل الموقع في أداة تقييم إمكانية الوصول إلى الويب WAVE لـ WebAIM ، ثم النقر فوق علامة التبويب "بدون أنماط" لمشاهدتها بدون الأنماط.)

إن لم يكن ، عظيم. الآن لديك انطباع عن ما يجب علي التعامل معه بشكل يومي عندما أواجه موقعًا منظمًا بشكل سيء.

الإفصاح الكامل: أميل إلى اللعنة عندما يحدث هذا. بصوت عالي. مع النشاط.

لماذا الامر مهم لهذه الدرجة؟ سأشرح.

تنبيه المفسد! بالنسبة لأولئك الذين غطوا فقط المناهج HTML / CSS حتى الآن ، ونحن في طريقنا إلى القفز قليلا.

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

يرمز DOM إلى نموذج كائن المستند وهو بنية تشبه الشجرة لعناصر HTML لموقعك على الويب. جميع عناصر HTML الخاصة بك هي عبارة عن نقاط مرتبطة ارتباطًا هرميًا استنادًا إلى علامات HTML التي تستخدمها وجافا سكريبت. يستخدم قارئات الشاشة شجرة DOM هذه للعمل باستخدام شفرة HTML الخاصة بك.

إذا وضعت العنصر في أعلى عنصرك ، فسيظهر في أعلى شجرة DOM أيضًا. لذلك ، فإن قارئ الشاشة يضعها في الأعلى أيضًا ، حتى إذا قمت بنقلها إلى أسفل الصفحة باستخدام CSS.

لذا ، فإن النصيحة الأخيرة التي أريد أن أقدمها لك هي أن تولي اهتماما لترتيب HTML الخاص بك ، وليس فقط موقع الويب الخاص بك النهائي مع CSS المضافة. هل لا يزال من المنطقي دون CSS؟ عظيم!

أوه ... لا؟ في هذه الحالة .. قد تسمع في يوم من الأيام لعنة مكتومة تنقلكم على نسيم بارد أثناء المشي في الخارج. سيكون ذلك على الأرجح أنا ، زيارة موقع الويب الخاص بك.

في هذه الحالة ، ليس لدي سوى كلمتين لك. غالباً ما سمعت نفس هاتين الكلمتين الموجهتين إليّ عندما كتبت بعض الكود الشريرة ومن دواعي سروري أن أخبرك: "اذهب إلى الإصلاح!"

لون التباين

يجب أن يكون التباين بالألوان أقل من 4.5: 1 للنص العادي و 3: 1 للنص الكبير. يتم تعريف "نص كبير" على أنه نص لا يقل عن 18 نقطة (24 بكسل) أو 14 نقطة (18.66 بكسل) وبخط عريض. مدقق التباين

استنتاج

لقد أخبرتك عن إمكانية الوصول ، وما هي ، وما هو غير ذلك ، ولماذا هو مهم.

لقد أعطيتك أيضًا الأساسيات ، أساسيات الحصول على حق الوصول. ومع ذلك ، فهذه الأساسيات قوية جدًا ويمكن أن تجعل حياتك أسهل كثيرًا عند الترميز للوصول.

إذا تحدثنا في شروط لجنة الاتصالات الفيدرالية FCC ، يجب أن تضعها في اعتبارك أثناء تنفيذ منهج HTML / CSS وكذلك منهج جافا سكريبت JavaScript.
في مقالات لاحقة ، سوف أتطرق إلى عدد من المواضيع الإضافية. عدد من الأسئلة سأجيب عليها هي:

• يبدو أن إضافة عناوين منظمة تبدو فكرة جيدة ، ولكنها لا تتناسب مع تصميمي. ماذا أفعل؟
• هل هناك طريقة بالنسبة لي لكتابة المحتوى فقط قارئات الشاشة والتقنيات المساعدة الأخرى؟
• كيف يمكنني جعل مكونات JavaScript مخصصة قابلة للوصول؟
• ما الأدوات الموجودة ، بالإضافة إلى اختبار المستخدم الشامل ، التي يمكن استخدامها لتطوير التجربة الأكثر قوة وسهولة الوصول إلى أكبر مجموعة من المستخدمين؟