0:05
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد اليوم سنتحدث معا عن الـ Accessibility كلمة Accessibility يعني إمكانية الوصول الـ Accessibility عبارة عن مجموعة من الـ Rules تعملها في الصفحة لإمكانية الوصول للمحتوى لمن إمكانية الوصول؟ الشخص العادي يفتح الموقع ويتصفحه وليس هناك أي مشكلة
0:29
هناك بعض الناس رزقهم أن الشخص أصبح كفيف أو لديه مشكلة في الألوان في عينه أو لديه ضعف في السمع أو أي شيء من هذه الأشياء ربنا يا رب يعافي الجميع يا رب ونرى أي شيء من هذه الأشياء في حياتنا بإذن الله
0:44
لكي يرى الموقع مثلك و لكي تقوم بصفحة و قراءة كل شيء يجب عليك تطبق قوانين الـ accessibility لكي تسهل عليه هذا الكلام. إذن كيف يرى هذا المحتوى؟ دعونا نقول على سبيل المثال الشخص الكفيف يستخدم شيء يدعى screen reader
1:02
يعني عندك إمكانية أن تقرأ المحتوى الجهاز عايب يقرأ المحتوى عشان يقرأ المحتوى ده بشكل سليم أنت محتاج تطبق الروز اللي احنا اتفقنا عليها عشان هو ما يواجهش مشاكل في الكلام ده هل الـ accessibility كل الناس بتطبقها؟ لا مواقع كتير جداً مش بتطبق الموضوع ده لكن احنا لازم النهاردة نتعرف عليه عشان لما ييجي الوقت اللي أنت تحتاج فيه تطبق الكلام ده تكون جاهز بإذن الله
1:27
سوف نقول لك أنه في هاتفك إذا فتحت الأعدادات سوف تجد أعداد أسمه Accessibility سوف نريك مثلاً أنه في هاتفك الأعدادات توجد أعداد أسمه VoiceOver يمكن أن يقرأ لك كل شيء في الشاشة يوجد أيضاً أعداد أسمه Magnifier عدسة أنت لا ترى الكلام الصغير فهو يجعلك تزوين كذلك لكي ترى
1:49
وخط حجمه ايه مثلا في ناس عندها مشاكل في الالوان ففي حاجات بتبقى مثلا ابيض واسود حاجات كتير هتلاقي دايما اعدادات الـAccessibility بتهتم بالنوع ده من الناس عشان طبعا تساعدهم وربنا يكرمهم ويشوفوا الحاجة بدون اي مشكلة باذن الله
2:05
في العالم الـ accessibility قلنا قليل من الكلام النظري دعونا نقوم بعمل فرم في صفحة ونضع في هذه الفرم أي إدارة ونضع مثلا div ونكتب فيه مثلا cent و div تاني يسمى reset و هكذا عندنا في العالم العام فيه شيء يسمى semantic elements اللي احنا تكلمنا عليها أن العنصر يكون يعني منطقي ويعبر عن الحاجة اللي جواهي فيه شيء كمان أعلى من كده أن أنت تستخدم العنصر
2:32
يجب أن نستخدم العنصر المناسب للمحتوى المناسب ستقول لي أنه يمكنني أن أجعل هذا الزرار بالجافسكريبت عندما يضغط علىه يقوم بالتصميم للفورم طبعاً يمكن، لا مشكلة لكنك بعدت عن عالم الـ accessibility و بعدت عن إمكانية الوصول السهل للشيء أريد أن أقول لك أننا قمنا بإضافة هذا الكلام و قمنا برؤه هتجد أنك تكتب هنا قليلاً و تضغط على Tab و ترى أنه يقدم لي فين
2:58
أول شيء يوديني إلى الـfile ثم الـURL ثم يرجعني ثاني من ضمن الحاجات التي في الزرار أن تستطيع التنقل بين الأزرار بالـtab مثلاً هذه شيء من الحاجات الموجودة في الأزرار بالشكل هذا، دعونا نرى
3:11
لا تقلق على الزرار فقط يمكنك تحكم في العناصر بسهولة كما ترون فكل عنصر لو تجعله في مكانه الصالح بالمحتوى الصالح ستخرج من المشاكل التي رأيتها قليلا ستخرج من تغيير سلوك العنصر في جاف اسكريبت أو تغيير شيء لا يمكنه أن يفعله العنصر
3:35
هذا كلام جميل. دعونا نرى مثال كيفية تشكيل الـ accessibility لكي نعرف العيوب التي توجد في الموقع. مثلاً قمت بعمل موقع كامل و أريد أن أعرف العيوب التي توجد في الـ accessibility. أول شيء أرى أيضاً هو أن هناك شخص يتفرج على فرمة معينة. هذه الفرمة لو لم تكن لها لابل مثلاً للإنبوت لجوهها سيحدث مشكلة في الـ accessibility.
3:55
إمكانية الوصول للعنصر لكي يكتب فيه شيء ستواجه مشكلة لنرى معا في جوجل كروم أولا نحتاج إضافة لكي تفتح الصفحة بدلا من فتحها ببروتوكول الفايل سوف نفتحها ببروتوكول HTTP كيف؟ لديك إضافة في إضافات Visual Studio Code اسمها Live Server
4:22
نزل هذه الإضافة ثم تقوم بإنستالها ثم تقوم بإنشاء صفحة Open with Live Server
4:32
هذه هي صورتنا سوف أقوم بإنسبيكت لكي أريك في القوايم سوف تجد هناك شيء يسمى Lighthouse Lighthouse يعمل لك كتابة عن كل الأشياء التي تحتوي على مشاكل في الصفحة كتابة عن البرفورمنس والأداء والأحسن الممارسات وكتابة خاصة بالSEO وهو صدقة محركات البحث والدفايس يمكن أن تكون موبايل أو ديسك توب ونحن فقط لا نحتاج إلى غير هذه الأداءات الآن
4:59
نقوم بعمل جينريت للريبورت وننظر لما يتم تخلصه ستجد انه يملك بعض المعايير التي يجب أن تقوم بها لكي يتحسن الـ accessibility في الموقع من ضمن هذه الأشياء أن يكون لـ HTML الـ lang attribute هذا شيء جيد جداً للمتصفحات
5:20
محركات البحث وكما للسكرين ريدر لكي تتعرفوا لغة الـ content لدينا هنا attribute اسمه lang و سأكتب له en هذه هي لغة الـ content لدينا كما لدينا label كما اتفقنا كتب لك أن الـ form لديك لا يوجد label بالشكل هذا هنا سأقول له قبل الـ input أن هذا عبارة عن الـ user name
5:42
الشخص سيكتب هنا الـ username مثلاً هناك بعض الأشياء التي ستقابلها كثيراً مثل الـ Arial سنتحدث عنها إن شاء الله في الدرس التالي على طول و بعض الأشياء التي لم تكتبها هو سيعملها لك أيضاً ستجد بقى الكثير في عالم الـ accessibility كما اتفقنا لكن إن شاء الله في الدرس القادم سنوضح بعض الأشياء بإذن الله بعد أن ننتهي من هذا نذهب إلى نعمل الـ reporting
6:08
وكما تلاحظ انه كتب لك هنا لينك كده بتعمل لك امبروف للأكسسابيليتي في الصفحة عندك شوية بقى معلومات كده ظريفة وحاجات جميلة لو طبقتها الموضوع هيفرق معاك طبعا كتير طيب مجرد بس تقفل الانسبكت وتفتحه تاني وتعمل جينريت ريبورت تاني عشان نشوف الحاجات اللي هو طلبها مننا تصلحت فطبعا النسبة زادت زي ما انتم شايفين وهنا بيتكلم عن لابل هندوس عليها عشان نشوف بيقول ان فيه انبوت هنا
6:36
المفروض ان هو بص كتبلك ايه؟ screen reader انو لازم يكون فيه لابل للإنبوت بتاعنا اللي هو ده المفروض ان احنا بس نربطهم ببعض مش اكتر فانا هاجي هنا اقول له input type text خلينا نقول له name بيساوي مسلا user
6:51
و هنا نربطهم بال ID ID = user و label for user زي ما تعلمنا في الدرس بتاع الفورم و خلينا نعمل كده inspect تاني و نقوله تفضل lighthouse و بعدين accessibility و بعدين generate و بعدين نشوف
7:09
كما ترون الهدف 100% لكن هذا ليس صحيحا لاننا لا نمتلك غير فرم في الصفحة فهي فضية عندما تقوم بتصميم كبير ومحتوى وقسم وهدف ومقاطع سترى العجب هنا وسترى الكثير من الأشياء التي ستستطيع تصليحها
7:27
طبعا يا شباب انا حابب بس اقولكو حاجة ان انت دلوقتي هو شايف المحتوى بتاعك 100% لكن فيه حاجات انت مش عاملها الحاجات دي اللي هي مفروضة نتكلم عنها ان شاء الله في الفيديو الجاي فحابب بس اقولك ان العالم ده موجود عشان يوم تحتاج ان انت تدخل فيه تكون جاهز وتدور فيه علشان ده ليه قصة تانية هل دايما لازم نراعي الـ accessibility مش كل الناس بتعمل ده لكن لما تحتاج ان انت تعمل ده لازم تدور فيه كويس عشان تعمله
7:54
يا رب جماعة الدرس يكون بسيط وسهل وعجبكم أشوفكم إن شاء الله في درس جديد والسلام عليكم
