0:05
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد اليوم سنكمل مع بعض الـ Accessibility سنتحدث عن الـ ARIA الـ ARIA اختصار لـ Accessible Reach Internet Application أو إمكانية الوصول لتطبيق إنترنت غني أو دسم بالمحتوى
0:23
الكلام الذي قلناه قبل ذلك الخاص بالسكرين ريدر سترونه عملياً الآن لدينا برنامج يسمى جاوس وهو عبارة عن برنامج سكرين ريدر دعونا نقوم بعمل تصميمه ونريك فكرة عمل السكرين ريدر لكي ترى بنفسك كيف يقرأ لك المحتوى وكيف تقوم بالتحديد المهم لتنقل بين العناصر وتفهم ما الذي يحدث جاوس استلقاء الديايلوج مرحباً بكم في جاوس استلقاء اضغط على زر الهواء لتقديم التفصيل التفصيلاً بعد ذلك تدخل الهواء لتبدأ اقرأ التفصيل التفصيلاً تفصيلاً
0:51
كما ترون يقرأ كل شيء وإذا ضغطت على المكان يقول لي أنه قرأت وطبعا يقرأ التاب بين الأفضل والمقارنة كما ترون طبعا يا شباب قمت بعمل تصميم للبرنامج وقمت بعمل مشكلة لكي يقرأ الأفضل لكي أريكم حتى الأفضل سيقرأه شاهدوا يا شباب
1:20
حتى يستطيع الإقراء من الأرواح ويقول لك أنك لديك مشكلة ستقوم بعمل رستارت وستصليها وكذا يعني سكرين ريدر يساعد الشخص الذي لا يرى المحتوى أنه يستطيع إقراء كل شيء لو أنك قمت به بشكل سليم حسناً في صفحةنا قمت بعمل H1 وهو عنوان الكتاب وعملت H3 عنوان الشبتر وH2 بعده
1:39
بالغلط. زي ما انت شايفين المفروض الـ H2 يكون هو اللي هنا والـ H3 هو اللي هنا زي ما اتفقنا. طيب تعالوا مع بعض كده نعمل في الصفحة بتاعتنا على الـ Accessibility ونشوف يا ترى هيقول لنا ايه. اول حاجة هيقول لك طبعا طبعا ترتيب الـ Heading. ترتيب الـ Heading مهم زي ما انت شايف كده. المفروض ترتبهم. في شوية حاجات في عالم الـ Accessibility مش مجرد الـ Rules او الـ Attributes اللي انت بتضيفها على العناصر. لا. في
2:03
هناك أشياء تخص الألوان والتصميم وكل هذا. تعالي أريك التصميم على سبيل المثال. هنا قمت بعمل فرن تشتري شيء معين وتضع أردر وكتب بي ويز كذا والشيب 2 كذا. وقال لك هنا هناك مشكلة أولا في الألوان أن اللون ليس واضح في الخلفية الخلفية وثانيا أن العناصر هذه بعيدة عن بعض وممكن لا تكون مرتبطة ببعض ومحددة.
2:25
من الناس الذين لديهم مشكلة في النظر لا يستطيعون الربط معاهم فهو يريك أنه لو كانوا هنا تحت بعض سيكون الموضوع أسهل وأزرف كثيراً طبعاً لا يحتاج أقول لك أن الشكلين شكلهم وحش لكن سأريك الفكرة أن الموضوع أيضاً يوجد تدخل في التصميم وأماكن العناصر والألوان سأعطيك مثال حالاً لو ذهبت إلى براغراف مثل هذا وذهبت وضعت له مثلاً بالـ CSS يا شباب لكي أعرف الناس CSS يعني بلاش CSS أنت قلت لا يوجد
2:54
و سوف نتدوخ لكي تفهم الكثير من الأمور عملت خلفية للبراجراف لونها اسود والكلام لونها أبيض هنا يوجد مقارنة تسمى contrast ratio 12:63 و كتب لك علامة صحيحة معناها أن اللون الأبيض يظهر جدا في اللون الآخر لكن لو جئت حضرتك عند اللون الأبيض و قربت و تنظر إلى ما سيحدث من اللون الاسود اللون بدأ لا يصبح واضحا فسوف تجد أن الـ ratio بدأ يضع لك علامة مثل هذه لأنه يقول لك أن هناك مشكلة
3:21
سيجلب لك معلومات عن الألوان وخلفية اللون ومعالجة الخلفية وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض وما هو المفروض و
3:43
الان الموضوع بسيط فالنقطة التي تحدثنا عنها ان هناك مشكلة في الالوان ممكن ان يكون اللون الذي تعملوه ليس واضح في الابيض الاخر لذلك اردت ان افهمك ان الموضوع ليس مجرد رول او اتريبيوتس تتكتب هذا كلام جميل وعظيم هناك اشياء كثيرة تجدها في
4:01
وهو الـ Report لـ Lighthouse. حاجات كثيرة جداً ممكن تعلّمك العالم ده أو تدخلك في العالم ده يعني بقلب جامد جداً. طيب خلينا ناخد مثال كده على حاجة من الحاجات الموجودة في الموقع زي الـ Checkbox. أنت عامل مثلاً دلوقتي Form فيها شوية مهارات والشخص بيختار منها وفيه واحدة Checked by Default أهي وبتروح تدوس على التانية عشان تختار مثلاً المهارات اللي عندك.
4:23
هذا كلام عظيم جميل جداً. العنصر هذا هو الـ behavior الطبيعي لأنه checkbox يعني عادي جداً للسكرين ريدر لكي تفهم أنه checkbox لا يوجد فيه أي مشكلة. لو في وقت ما أردت أن تقوم بـ plans مثلاً في موقع استضافة 3 خطط مثلاً كل خطة بالشكل هذا plan 1 و plan 2 و plan 3 الخطط هذه
4:43
عندما ترى هذه المواقع في المواقع تجد أن هناك 3 دفات جنب بعض المواقع الكبيرة والشخص يختار واحدة منها فتجد أنه يقوم بعمل عليها مثل border لأنه يقول لك أنه يختارها الآن هذه الحركة تتعامل بالجافي سكريبت وليس بعملها بشكل كبير مثل checkbox في بعض الحالات تحتاج أن تقوم بعمل عنصر آخر يقوم بعمل behavior عنصر أولاني أو يقوم بنفس سلوك العنصر الأولاني يعني يمكن أن نقوم بعمل دفات مثل هذا لتقدي نفس عمل لcheckbox
5:10
لكي تفهم هذا الأمر يجب أن تضع بعض الأتريبيوت على هذه العناصر من أجل هذه الأتريبيوت، أريد أن أقول لك أن هذا عبارة عن نفس فكرة الـ CheckBox فهي عبارة عن CheckBox، أي أستطيع أن أختار بينهم لدي هنا رول بيساوي CheckBox
5:32
كده انا قلت لكم ان ده نفس فكرة عمل الـ Checkbox ده عظيم طيب انت عندك هنا في Checkbox معموله Checked by default وده مش معموله يعني اول ما افتح الصفحة هلاقي ده مختاره Checked لو عايز اعمل ده هنا بعمل ايه هاجي بعد الـ Rule دي اقول له Area Checked
5:48
يمكنك إختيار الخطة الأولى لتقوم بإختيارها إذا لم تريد إختيارها ستقول لك: "فالس" حسناً، لدينا شيء يسمى "تاب إندكس" يمكننا إختياره من بينهما ومن بينهما وسترى هذا المثال عندما نقوم بهذا الشكل يوجد كلهم
6:07
و بعد ذلك نكمل معلوماتنا الأول سأذهب إلى تاب و أريك شيئا لا يتوجه إليهم سنضغط على Save و بعد ذلك ستجد أنه بدأ يتوجه إليهم بهذا الشكل لأنك قمت بوضع Tab Index Attribute حسناً، عندنا الآن في CheckBox هناك Label معبر عن CheckBox مظبوط؟ مظبوط هنا أيضاً سنضغط على Label سأقول له Area Label
6:31
و تبدأ تقول له labeled by ال ID بتاع اللابل اللي انت تعمله له هسميه مثلا plan1 و نفس الكلام ده بقى تروح حضرتك حطه هنا مثلا في label أو في answer مثلا وتقول له ID بيساوي بالشكل ده وتروح كتب له plan1 label كده عملنا بالضبط نفس ال behavior بتاع ال checkbox بس باستخدام ال area attributes اللي هي بتخلينا عندنا سهولة في الوصول للمحتوى
6:59
إذا استخدم الشخص screen reader سيستطيع تقليل المشاركة بينهم و يستطيع تحقيق أي شيء منهم و إذا أردت أن تضيف معلومات أكثر من المشاركة من خلال الـArea Attributes ستكون شيء جميل جدا الـArea Attributes أو الـAttributes الخاصة بعالم Accessible Reach Internet Application تقدم للمعلومات النقصة التي تجعل screen reader يستطيع فهمها
7:25
ما هي المعلومات المقصرة؟ إنه لو أتركه في الصفحة و أختار بين الثلاثة لا مشكلة لكن لو أحد يستخدم screen reader لن يستطيع أن يفهم أن هذه الأشياء مقصرة فالمعلومات المزيدة التي تضيفها لك تجعله يستطيع أن يرى الكلام
7:41
لو ذهبت الى فريمورك مثل Bootstrap ستجدون انهم يستخدمون هذه الأشياء لتعرفوا لماذا افعل ذلك لسكرين ريدر لا يجب ان اقول لك ان عالم الـ Accessibility عالم كبير والفيديوهات التي رأيناها هي عبارة عن مسحة زور او مدخل للعالم العظيم فلو انت واحد من الناس الذين طلبوا منك مشروع لتطرق ان تكون الـ Accessibility مميزة ستغوص في عالم عظيم جدا جدا جدا
8:09
و جميل جدا جدا جدا و مش عايز اقولك من الجانب الديني هتاخد عليه ثواب عظيم جدا لان انت هتخلي الناس كلها واحد الناس كلها بتتعامل مع الموقع واحد مفيش فرق بين شخص عادي و شخص يعني فوق راسنا و ربنا يعني عافية رب كفيف فطبعا دي حاجة من حاجات العظيمة و الانسانية اللي تخليك فعلا تهتم بالقصة دي علشان محدش يبقى احسن من حد من حد يا رب يا جماعة الدرس يكون بسيط و سهل و عجبكو و اشوفكو ان شاء الله في درس جديد و السلام عليكم
