SlideShare ist ein Scribd-Unternehmen logo

Accessbility Workshop V1

•Als DOC, PDF herunterladen•
•
Amal Abduallah
Amal Abduallah
1 von 44
‫ورشة تدريبية‬ ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫الحتياجات الخاصة‬ ‫إعداد وتنفيذ‬ ‫منال بنت خالد الخنين – أمل بنت عبدال القحطاني‬ ‫د. هند بنت سليمان الخليفة‬ ‫قسم تقنية المعلومات‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫كلية علوم الحاسب والمعلومات‬ ‫2‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المقدمة‬ ‫بسصم ال الرحمصن الرحيصم والحمصد ل رب العالميصن وصصلى ال‬ ‫على نبينا محمد وعلى آله وصحبه أجمعين .‬ ‫يعتصبر مفهوم قابليصة الوصصول )‪ (Accessibility‬مصن المفاهيصم‬ ‫التصي لم تنصل حظهصا مصن الهتمام عنصد تصصميم المواقصع العربيصة،‬ ‫و ُعرف هذا المفهوم على أنصصصه quot; القيام بإعداد مواقصصصع ويصصصب‬ ‫ي‬ ‫تناسصب اسصتخدام ذوي الحتياجات الخاصصةquot;. ويتصم ذلك بإتباع‬ ‫وتطصصبيق المعاييصصر القياسصصية والتصصي تجعصصل عمليصصة الوصصصول‬ ‫للمواقع أكثر سهولة، وأيضً جعل صفحات الموقع ذا ترتيب‬ ‫ا‬ ‫منطقي ومفهوم.‬ ‫ومصصن خلل هذه الورشصصة سصصنهتم بزيادة الوعصصي بمفهوم قابليصصة‬ ‫الوصصول وذلك عصن طريصق جعصل المتدربيصن يقومون بتصصميم‬ ‫3‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صصفحات ويصب تأخصذ فصي عيصن العتبار المعاييصر القياسصية. كمصا‬ ‫سصنعمل مصن خلل هذه الورشصة إلى جعصل المشاركيصن يقومون‬ ‫بعمليصة تقييصم واختبار قابليصة الوصصول لبعصض المواقصع العربيصة‬ ‫مصع بيان تبعات عدم اللتزام بالمعاييصر القياسصية عنصد تصصميم‬ ‫ص‬ ‫صصصفحات الويصصب وتأثيرهصصا على متصصصفحي الويصصب مصصن ذوي‬ ‫الحتياجات الخاصة.‬ ‫وتقبلوا تحياتنا‬ ‫منال – أمل - هند‬ ‫4‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الفهرس‬ ‫3 ....................................................................................................................................................المقدمة‬ ‫6 .............................................................................................................................................دليل البرنامج‬ ‫8 ....................................................................................................................................................المنهاج‬ ‫9 ................................................................................................................................................الرشادات‬ ‫01 ........................................................................................................................... مقدمة في قابلية الوصول‬ ‫١( قابلية الوصول للمواقع...........................................................................................................11‬ ‫٢( لماذا الهتمام بقابلية الوصول؟..................................................................................................21‬ ‫٣( أدوات مساعدة لختبار قابلية الوصول.........................................................................................31‬ ‫51 ..........................................................................................................................مقدمة في المعايير القياسية‬ ‫١( ما المقصود بالمعايير القياسية ؟................................................................................................51‬ ‫81 ................................................................................................................مبادئ تصميم مواقع قابلة للوصول‬ ‫22 .................................................................................‪ ((Dreamweaver‬قابلية الوصول في برنامج الدريم ويفر‬ ‫03 ......................................................................................................................................... تطبيق عملي‬ ‫24 .........................................................................................................................................تدريب تطبيقي‬ ‫44 ...................................................................................................................................المراجع والمصادر‬ ‫5‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫دليل البرنامج‬ ‫اسيم الورشية التدريبيية: نحصو مواقصع ويصب عربيصة قابلة للوصصول لذوي‬ ‫الحتياجات الخاصة‬ ‫الهدف العام من الورشة التدريبية:‬ ‫زيادة الوعصي بمفهوم قابليصة الوصصول وأهميصة إتباع المعاييصر القياسصية عنصد‬ ‫تصميم مواقع الويب.‬ ‫الهداف التفصيلية:‬ ‫في نهاية الورشة التدريبية يتوقع من المتدربة:‬ ‫1.‬ ‫التعرف على المعايير القياسية لقابلية الوصول.‬ ‫2.‬ ‫إمكانية تقييم واختبار قابلية الوصول للمواقع.‬ ‫3.‬ ‫تصميم موقع قابل للوصول باستخدام برنامج الدريم ويفر.‬ ‫الفئة المستهدفة من الورشة التدريبية:‬ ‫سصصتكون الورشصصة موجهصصة للمهتميصصن بتطويصصر مواقصصع ويصصب قابلة للوصصصول أو لمصصن لديهصصم‬ ‫الرغبصة فصي اكتشاف مشاكصل قابليصة الوصصول فصي مواقعهصم وحلهصا، كمصا تتطلب الورشصة أن‬ ‫6‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫يكون المتدرب على معرفصصة باسصصتخدام النترنصصت ومهارات الحاسصصب السصصاسية ويفضصصل‬ ‫معرفة بأساسيات التصميم باستخدام لغات ‪ HTML‬و ‪.CSS‬‬ ‫أساليب التدريب:‬ ‫مجاميع تعاونية – تعلم ذاتي.‬ ‫مدة البرنامج:‬ ‫١-٢ ساعة نظرية و ٥.١-٢ ساعة تدريبية.‬ ‫7‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المنهاج‬ ‫الزمن بالدقيقة‬ ‫الموضوع‬ ‫الجلسة‬ ‫العنوان‬ ‫نحو مواقع ويب عربية قابلة للوصول لذوي الحتياجات الخاصة‬ ‫٠٢‬ ‫مفاهيم عامة في قابلية الوصول‬ ‫للمواقع‬ ‫الولى‬ ‫٠٢‬ ‫أدوات مساعدة لختبار قابلية الوصول‬ ‫٥١‬ ‫تجربة عملية للتمييز بين مواقع قابلة‬ ‫الثانية‬ ‫الوصول وأخرى غير قابلة للوصول‬ ‫٠٦‬ ‫مبادئ تصميم مواقع قابلة للوصول +‬ ‫استخدام برنامج الدريم ويفر‬ ‫استراحة )٠٢ دقيقة(‬ ‫تدريب عملي‬ ‫٥٤‬ ‫الثالثة‬ ‫٥١‬ ‫حلقة نقاش‬ ‫خاتمة‬ ‫٥‬ ‫8‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الرشادات‬ ‫لتحققصصصي أهداف الورشصصصة التدريبيصصصة بنجاح نأمصصصل مراعاة الرشادات‬ ‫التالية:‬ ‫١- اللتزام بوقت الورشة التدريبية.‬ ‫٢- اللتزام بوجود الحقيبة التدريبية معك طوال البرنامج التدريبي.‬ ‫٣- المشاركة الف ّالة في تنفيذ النشطة التدريبية.‬ ‫ع‬ ‫٤- المشاركة في عرض إجابات المجموعات للنشطة التدريبية.‬ ‫٥- ل تتردي في الستعانة بالمدربة في حالة واجهتك عقبة أثناء‬ ‫التطبيق.‬ ‫٦- رأيك يهمنا ل تتردي في تقديم ملحظاتك واقتراحاتك للمدربة.‬ ‫٧- نرجو منك إغلق أجهزة الجوال داخل القاعة التدريبية.‬ ‫9‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مقدمة في قابلية الوصول‬ ‫توفصر الويصب فرصصة عظيمصة للشخاص مصن ذوي الحتياجات الخاصصة‬ ‫للحصول على المعلومات وأيضاً التواصل مع الخرين وذلك بالتحرر‬ ‫من قيود العاقة.‬ ‫وحتى تصبح المعلومات والخدمات المتاحة على الويب متوفرة للجميع‬ ‫بصصصصرف النظصصصر عصصصن نوع إعاقتهصصصم، برز مفهوم قابليصصصة الوصصصصول )‬ ‫‪ (Accessibility‬لتمنح الحق لفئة ذوي الحتياجات الخاصة النتفاع‬ ‫من الويب أسوة بأقرانهم من الناس السوياء.‬ ‫غيصصر أن ّ مصصصممي مواقصصع الويصصب ل يهتمون فصصي الغالب بهذا المفهوم‬ ‫ص‬ ‫وهذا مصصا أشارت إليصصه الكثيصصر مصصن الدراسصصات ومنهصصا دراسصصة بريطانيصصة‬ ‫خلصت إلى أن ٧٩% من مواقع الويب ل توفر الحد الدنى من قابلية‬ ‫الوصول.‬ ‫فصصي هذا الجزء مصصن ال ُتيصصب سصصنهتم بتعريصصف قابليصصة الوصصصول للمواقصصع‬ ‫ك‬ ‫وأهميتهصا وأيضاً اسصتعراض بعصض مصن الدوات المسصاعدة فصي اختبار‬ ‫قابلية الوصول.‬ ‫01‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫١( قابلية الوصول للمواقع‬ ‫تعرف قابليصة الوصصول للمواقصع على أنهصا quot; جععل موقعع معا قابعل‬ ‫للوص ععول س ععواءً للشخاص العاديي ععن أو ذوي الحتياجات‬ ‫ع‬ ‫ع‬ ‫ع‬ ‫الخاصععة، وأيضا لجهزة الحاسععب الشخصععية أو الهواتععف‬ ‫النقالة أو الحاس ععبات الكفي ععة أو قارئات الشاش ععة) ‪screen‬‬ ‫ع‬ ‫ع‬ ‫ع‬ ‫‪ (reader‬وغيرها من الجهزة المساندةquot;.‬ ‫وعند ذكر مصطلح قابلية الوصول )‪ (Accessibility‬لمواقع الويب‬ ‫أول مصصا يتبادر للذهصصن هصصو اتحاد الشبكصصة العنكبوتيصصة )‪ (W3C‬والذي‬ ‫أنشأها السيد تيم برنرز لي )‪ (Tim Berners-Lee‬مخترع الويب.‬ ‫هذا التحاد ُنشئ ليكون المرجع في وضع قواعد ومواصفات ومعايير‬ ‫أ‬ ‫الويب الساسية وتطوير التقنيات المستخدمة حالياً.‬ ‫كما أن لمختر ِ الويب عبارة شهيرة في قابلية الوصول نصها:‬ ‫ع‬ ‫.‪The power of the web is in its universality‬‬ ‫‪Access by everyone, regardless of disability is‬‬ ‫.‪an essential aspect‬‬ ‫وترجمتها:‬ ‫11‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫قوة الويب في عالميتها. ووصول الجميع، بغض النظر عن عجزهم.‬ ‫ولدى اتحاد الشبكصصصصة العنكبوتيصصصصة )‪ (W3C‬العديصصصصد مصصصصن المبادرات‬ ‫المخصصصصة لذوي الحتياجات الخاصصصة منهصصا مبادرة قابليصصة الوصصصول‬ ‫للويصب )‪ ،( Web Accessibility Initiative‬والذي يمثصل تجمصع‬ ‫لمنظمات العاقصة والباحثيصن فصي مجال قابليصة الوصصول بالضافصة إلى‬ ‫الحكومات والجهات المهتمصصصصصة. وتقدم هذه المبادرة إرشادات قابليصصصصصة‬ ‫الوصول لمحتوى الويب ويطلق عليها أيضاً إرشادات سهولة استخدام‬ ‫المحتويات اللكترونية )‪ (WCAG‬ودليل قابلية الوصول للمتصفحات‬ ‫وكيفية بناء مواقع قابلة للوصول و مجموعة من الدوات لتقييم قابلية‬ ‫الوصول للمواقع ومواد تدريبية.‬ ‫٢( لماذا الهتمام بقابلية الوصول؟‬ ‫هناك العديد من السباب التي تجعل من المهم الهتمام بقابلية الوصول‬ ‫إلى مواقع الويب نذكر منها:‬ ‫1.انتشار استخدام النترنت في جميع مجالت الحياة.‬ ‫2.تحقيصصصصصق مبدأ تسصصصصصاوي الفرص فصصصصصي الوصصصصصصول للمعلومات‬ ‫والخدمات.‬ ‫3.زيادة في عدد الزوار لموقعك.‬ ‫4.دوافع مادية.‬ ‫21‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫٣( أدوات مساعدة لختبار قابلية الوصول‬ ‫هناك العديصصد مصصن الدوات التصصي تسصصاعد فصصي اختبار موقصصع مصصا لقابليصصة‬ ‫وصوله. هذه الدوات تتراوح بين مواقع خدمية مثل موقع )‪Cynthia‬‬ ‫‪1(Says‬وموقع )‪ 2(HERA‬وبرمجيات وإضافات للمتصفح.‬ ‫كمصصا أن موقصصع اتحاد الشبكصصة العنكبوتيصصة )‪ (W3C‬قصصد خصصصص صصصفحة‬ ‫كاملة3 لدوات الختبار وكيفية اختيار المناسب منها.‬ ‫فيمصا يلي ذكصر لبرز الدوات البرمجيصة التصي يمكصن تثبيتهصا فصي متصصفح‬ ‫الفايرفوكس )‪ (Firefox‬لختبار قابلية الوصول للمواقع:‬ ‫4‬ ‫‪Firefox Accessibility Extension‬‬ ‫صُممت هذه الضافصة فصي السصاس لمطوري مواقصع الويصب حتصى يتمكنوا‬‫ص‬ ‫مصن تعديصل مواقعهصم بمصا يتناسصب واحتياجات ذوي الحتياجات الخاصصة.‬ ‫1‬ ‫/‪http://www.contentquality.com‬‬ ‫2‬ ‫/‪http://www.sidar.org/hera‬‬ ‫3‬ ‫/‪http://www.w3.org/WAI/ER/tools‬‬ ‫4‬ ‫/‪http://firefox.cita.uiuc.edu‬‬ ‫31‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫و ُوفصصصر هذه الضافصصصة عدد مصصصن الدوات المسصصصاعدة فصصصي قياس قابليصصصة‬ ‫ت‬ ‫الوصول للمواقع.‬ ‫5‬ ‫كمصصصا يمكصصصن اسصصصتخدام إضافصصصة )‪(Web Developer toolbar‬‬ ‫والمخصصصص لمطوري المواقصصع أيضاً فصصي اختبار المواقصصع )كمصصا فصصي‬ ‫الصورة التالية(.‬ ‫6‬ ‫‪Fangs‬‬ ‫ُتيصح هذه الضافصة مصن تحويصل أي صصفحة ويصب إلى صصفحة نصصية فقصط،‬ ‫ت‬ ‫ليوضصح كيصف يتصم قراءتهصا مصن قبصل قارئاتِص الشاشات والتصي يسصتخدمها‬ ‫المكفوفين وضعاف البصر.‬ ‫5‬ ‫06/‪https://addons.mozilla.org/en-US/firefox/addon‬‬ ‫6‬ ‫/‪http://www.standards-schmandards.com/projects/fangs‬‬ ‫41‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مقدمة في المعايير القياسية‬ ‫ازداد الهتمام بمعاييصر الويصب القياسصية خاصصة فصي ظ ِ التطور الكصبير‬ ‫ل‬ ‫فصي أدوات تصصفح النترنصت. وهذه المعاييصر ُضعصت مصن قبصل منظمات‬ ‫و‬ ‫عديدة وعلى رأسصها ‪ W3C‬ومصن المهام الرئيسصية لهذه المنظمصة هصي:‬ ‫قيادة الويصصب إلى إمكانيتصصه الكاملة بتطويصصر البروتوكولت و التوجيهات‬ ‫التي تضمن للويب النمو على المدى طويل.‬ ‫١( ما المقصود بالمعايير القياسية ؟‬ ‫quot;هصي مجموعصة مصن المعاييصر تصم إنشائهصا مصن قبصل اتحاد شبكية الوييب‬ ‫العالمييييية )منظمصصصصة ‪ ( W3C‬بهدف تسصصصصهيل قابليصصصصة الوصصصصصول إلى‬ ‫المعلومات، و لتسصهيل التعامصل معهصا باسصتخدام المنتجات المتخصصصة‬ ‫فصصي شبكصصة الويصصب، كالمتصصصفحات و برامصصج تحريصصر المواقصصع و برامصصج‬ ‫الدارة quot; ]1[.‬ ‫٢( فوائد المعايير القياسية؟‬ ‫51‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫يمكصن إجمال الفوائد مصن اسصتخدام المعاييصر القياسصية عنصد تصصميم مواقصع‬ ‫الويب في التالي ]1[:‬ ‫1.تسييييهيل الوصييييول للمحتوى و تمكييييين quot;ذوي الحتياجات‬ ‫الخاصييةquot; ميين اسييتخدام شبكيية المعلومات بسييهولة: تسصصاعد‬ ‫معاييصصصر ‪ W3C‬الناس إلى الوصصصصول إلى المحتوى بطريقصصصة‬ ‫أسهل، فهي تسهل الوصول إلى المعلومات لذوي الحتياجات‬ ‫الخاصصة كالمكفوفيصن، و المصصابين بضعصف البصصر، بالضافصة‬ ‫إلى الصصصص ّاء حيصصصث تسصصصهل عليهصصصم الوصصصصول للمعلومات‬ ‫ح‬ ‫ومحتوى الموقع .‬ ‫2.تصغير حجم الموقع وزيادة سرعة التحميل: فالمواقع التي‬ ‫يتصم كتابتهصا بمعاييصر ‪ W3C‬القياسصية تكون عادة أصصغر حجمصا‬ ‫بمقدار 02% إلى 06% من المواقع التي ل يتم كتابتها بهذه‬ ‫المعاييصصر، و اسصصتخدام المعاييصصر بالشكصصل الصصصحيح يؤدي إلى‬ ‫تقليصل تكلفصة الصصفحات كصبيرة الحجصم ،إضاف ً إلى أنصه سصيكون‬ ‫ة‬ ‫تحمليها سريع جداً .‬ ‫3.التوافييق والنسييجام: ويقصصصد بالتوافصصق هصصو إمكانيصصة عرض‬ ‫الصصصصفحات بشكصصصل سصصصليم على الجهزة القديمصصصة والحديثصصصة‬ ‫)المسصصصصصاعد الشخصصصصصصي الرقمصصصصصي، الهواتصصصصصف النقالة...(،‬ ‫والمتصصصفحات المختلفصصة )فايروفوكصصس، إنترنصصت إكسصصبلورر،‬ ‫نتسكيب، سفاري ...، بالضافة إلى ذلك عرض مواقع الويب‬ ‫على نحصصو سصصليم فصصي جميصصع المنصصصات: آي بصصي إم ، لينكصصس ،‬ ‫أبل ..‬ ‫61‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫4.الثبات: تسصاعد معاييصر ‪ W3C‬على الثبات فصي المسصتقبل )أي‬ ‫لن يكون هناك حاجة لعادة التصميم مرة أخرى لكل برنامج‬ ‫تصفح(.‬ ‫5.تسيهيل عمليية الوصيول مين قبيل البراميج و محركات البحيث:‬ ‫تجعصل المعاييصر القياسصية الوصصول إلى محتويات الموقصع أسصهل‬ ‫بالنسصبة للبرامصج و محركات البحصث فتزيصد مصن الرشفصة، لن‬ ‫المواقصصع المكتوبصصة بالمعاييصصر القياسصصية تكون مبنيصصة على هيكصصل‬ ‫واضح.‬ ‫71‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مبادئ تصميم مواقع قابلة للوصول‬ ‫مصن الممكصن تقسصيم مبادئ وأسصاسيات تصصميم مواقصع قابلة للوصصول‬ ‫إلى قسمين ]3[:‬ ‫•مبادئ عامة.‬ ‫•مبادئ خاصة ) قابلية الوصول لصفحات الويب(.‬ ‫١( مبادئ عامية: هصي تلك المبادئ المسصتخدمة فصي تصصميم البرامصج‬ ‫وصفحات الويب على حدٍ سواء، و تشمل:‬ ‫•الهتمام بوضصع خيارات مختلفصة فصي خصصائص وطرق إنجاز‬ ‫المهام المختلفة لتلءم جميع الشخاص بمختلف العاقات.‬ ‫•هناك مصن يسصتخدم تقنيات مسصاعدة ولكصل تقنيصة حاجات خاصصة‬ ‫فل بد من مراعاتها وتذكرها.‬ ‫•تجنصصصب التصصصصميم البعيصصصد عصصصن توقعات المسصصصتخدم بغرض‬ ‫الختلف فقط.‬ ‫•تزويد المستخدم بتعليقات توضيحية ورسائل تحذيرية.‬ ‫•إزالة أي تعقيدات غير ضرورية.‬ ‫•تزويصد الوامصر باختصصارات لوحصة المفاتيصح بد ً مصن اسصتخدام‬ ‫ل‬ ‫الفأرة.‬ ‫81‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫٢( مبادئ خاصييية: وهصصي تلك المبادئ المتعلقصصة بتصصصميم صصصفحات‬ ‫الويب ، والتي ُنفت من قبل منظمة ‪ W3C‬إلى ثلث أولويات ]4[:‬ ‫ص‬ ‫1.الولوييية الولى )1 ‪ :(Priority‬النقاط السصصاسية لتحقيصصق‬ ‫قابليصة الوصصول وبفقدهصا يفقصد الموقصع قابليتصه للوصصول مثصل:‬ ‫وضع وبدائل مكافئة للصور.‬ ‫2.الولويية الثانيية )2 ‪ :(Priority‬المبادئ التصي تضمصن إزالة‬ ‫أهصم الموانصع وبفقدهصا تتوفصر بيئة صصعبة الوصصول مثصل:وضصع‬ ‫معاني كاملة للرتباطات .‬ ‫3.الولويية الثالثية )3 ‪:(Priority‬المبادئ التصي ُحسصن كثيراً‬ ‫ت‬ ‫من قابلية الوصول وفقدها قد يكسب الموقع صعوبة للوصول‬ ‫أحيانً مثل:كتابة المعنى الكامل للختصارات.‬ ‫ا‬ ‫أميا فيميا يخيص أهيم المبادئ التيي وضعتهيا منظمية ‪ W3C‬لتحقييق‬ ‫مواقع قابلة للوصول فيمكن تلخيصها على النحو التالي ]4[:‬ ‫1.توفير بدائل مكافئة للمحتوى السمعي والبصري: حيث‬ ‫نضمن تمكين الشخاص المعاقون بصريً أو سمعيً من‬ ‫ا‬ ‫ا‬ ‫ُ‬ ‫الوصصصصول إلى المحتوى الذي ل يمكنهصصصم إدراكصصصه كأن‬ ‫يكون هناك وصصف للصصورة يعصبر عنهصا و أن يتضمصن‬ ‫ص‬ ‫ص‬ ‫الفيديو وصفً صوتيً.‬ ‫ا‬ ‫ا‬ ‫91‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫2.تجنيييييب العتماد على اللون وحده: لن هناك تقييصصصصصد‬ ‫للفائدة مصصصن تلك المعلومات وتوفيرهصصصا لفئة دون أخرى‬ ‫فبد ً مصصصن اسصصصتخدام اللون وحده للدللة يمكصصصن الشارة‬ ‫ل‬ ‫والسصصتدلل بالقواس أو بوضصصع النجمصصة أو أي علمصصة‬ ‫تضمن وصولها للجميع.‬ ‫3.استخدم التوصيف )‪ (markup‬و أوراق النمط‬ ‫) )‪ sheets style‬بالشكيل المناسيب: وذلك يضمصن التأكصد‬ ‫من صحة كتابة شفرة ‪ HTML‬واستخدامها للمحتوى فقط و‬ ‫‪ CSS‬للعرض فقط.‬ ‫4.اسيييتخدام لغييية واضحييية: أن يشمصصصل تعريصصصف اللغصصصة‬ ‫واختصصارات لوائل الكلمات، حيثُص يسصهل على قارئات‬ ‫الشاشة وغيرها من التقنيات المساعدة تفسير المحتوى،‬ ‫والتأكصصد مصصن سصصلمة النصصصوص مصصن الخطاء الملئيصصة‬ ‫والنحوية.‬ ‫5.تجنييب اسييتخدام الجداول كوسيييلة للعرض: حيصصث كان‬ ‫من الشائع استخدام الجداول لتخطيط وعرض الصفحة،‬ ‫وذلك لقلة دعصصصم المتصصصصفحات للتخطيصصصط المبنصصصي على‬ ‫‪ CSS‬و انحصصصصصصصار اسصصصصصصتخدام الجداول على عرض‬ ‫البيانات المجدولة.‬ ‫6.تأكيد مين توافيق صيفحات الوييب ميع التقنيات الجديدة‬ ‫والقديمية: وذلك بتوقصع كصل الحتمالت وأسصوأها بمعنصى‬ ‫ضمان اسصصتمرارية العمصصل بالموقصصع حيصصن يتصصم تعطيصصل‬ ‫‪ CSS‬أو ‪. JavaScript‬‬ ‫7.التأكييد ميين قدرة المسييتخدم بالتحكييم بالتغييرات التييي‬ ‫تتأثيير بالتوقيييت: حيصصث يتصصم تزويصصد كافصصة المسصصتخدمين‬ ‫02‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫بالتحكصصصصصم الذي يحتاجونصصصصصه للحصصصصصصول على المحتوى‬ ‫بالسرعة والشكل الذي يناسبهم )كتوفير خاصية اليقاف‬ ‫والتشغيل(، حيث ُعد تجاهل هذه النقطة مركز للمشاكل‬ ‫ي‬ ‫وخاص ً لمن يعاني من عسر في القراءة أو ضعف في‬ ‫ة‬ ‫البصر .‬ ‫8.تعدد طرق الوصيييول لعناصييير الصيييفحة: حيثصُ يكون‬ ‫ص‬ ‫الوصصول لي عنصصر فصي الصصفحة بواسصطة الفأرة قابصل‬ ‫للوصول كذلك باستخدام لوحة المفاتيح، والهتمام أيضً‬ ‫ا‬ ‫بضمان الوصصول للعناصصر بواسصطة التقنيات المسصاعدة‬ ‫المختلفصة كصبرمجيات تمييصز الصصوت و وسصائل الدخال‬ ‫المختلفة.‬ ‫9.توفيير آليات تصيفح واضحية: وذلك باسصتخدام خريطصة‬ ‫الموقع و وضوح معنى النص للرتباطات.‬ ‫01.تجنب استخدام الفلشات بقدر المكان :وذلك لما تسببه‬ ‫مصصن مشاكصصل لقارئات الشاشصصة ، و للشخاص المصصصابين‬ ‫بالصرع.‬ ‫11.إمكانيصة البحصث وتحديصد موقصع المسصتخدم فصي صصفحات‬ ‫الموقع .‬ ‫12‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫قابلية الوصول في برنامج الدريم ويفر ))‬ ‫‪Dreamweaver‬‬ ‫لماذا الدريم ويفر ) ‪(Dreamweaver‬؟‬ ‫منصذ الصصدار الول لبرنامصج الدريصم ويفصر وهصو‬ ‫يحمصصصل رؤيصصصة منفردة وتصصصصميم رائع فصصصي إنشاء‬ ‫مواقصع النترنصت وإدارتهصا وأهصم مصا ُميصز برنامصج‬ ‫ي‬ ‫الدريصم ويفصر هصو القياسصية بمعنصى أن الكود الناتصج‬ ‫باسصتخدام الدريصصم ويفصصر يخضصع للمعاييصصر القياسصصية ، كمصصا يتميصز بإنتاج‬ ‫ص‬ ‫ص‬ ‫ص‬ ‫شيفرة مصدرية ويطلق عليه أحيانا quot;كودquot; )‪ (Source Code‬محدد‬ ‫وواضصح ومفهوم إلى حصد كصبير دون الحاجصة إلى كتابصة الكود وذلك مصن‬ ‫خلل أدوات وخيارات البرنامج ]2[.‬ ‫22‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 1 : واجهة برنامج الدريم ويفر.‬ ‫١( إنشاء موقع بالدريم ويفر:‬ ‫عند إنشاء موقع قابل للوصول باستخدام برنامج الدريم ويفر لبد أولً‬ ‫من التعرف على الخصائص المتاحة في هذا البرنامج.‬ ‫١.١( خصائص قابلية الوصول لدريم ويفر:‬ ‫32‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫عنصد بدء العمصل مصع برنامصج الدريصم ويفصر لبصد بدايصة التأكصد مصن تفعيصل‬ ‫خاصية قابلية الوصول، وذلك عن طريق اختيار من القائمة الرئيسية:‬ ‫‪Edit‬‬ ‫‪Preferences‬‬ ‫‪Accessibility‬‬ ‫ومصن ثصم الشارة على صصناديق الختيار المتعلقصة بالصصور والطارات‬ ‫والنماذج والوسائط.‬ ‫صورة 2: النموذج الخاص بإعدادات قابلية الوصول في برنامج‬ ‫الدريم ويفر.‬ ‫٢.١( إنشاء محتوى قابل للوصول باستخدام الدريم ويفر ]5[:‬ ‫فيمصا يلي سصنسلط الضوء على كصل عنصصر يمكصن إضافتصه فصي أي موقصع‬ ‫على الويصب )مثصل الصصور والجداول واللوان غيرهصا( وسصنذكر كيصف‬ ‫نحقق قابلية الوصول فيها.‬ ‫42‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫‪‬الصور )‪:(Images‬‬ ‫يجصب الهتمام عنصد إدراج الصصور بتوفيصر بديصل نصصي للصصورة كمصا تصم‬ ‫ذكره مسصصصبقً، وذلك لتوفيصصصر بديصصصل نصصصصي عنصصصد عدم عرض الصصصصور‬ ‫ا‬ ‫وللسماح للمكفوفين بالتعرف على محتوى الصورة.‬ ‫و يتصم إضافصة بديصل نصصي للصصورة بواسصطة برنامصج الدريصم ويفرعصن‬ ‫طريق اختيار:‬ ‫‪Insert‬‬ ‫‪Image‬‬ ‫وبعد اختيار الصورة ستظهر النافذة التالية:‬ ‫صورة ٣: خصائص قابلية الوصول المتعلقة بالصور.‬ ‫52‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الخيارات الموجودة في صورة ٣ تعني التالي:‬ ‫• : ‪ Alternative Text‬لوضصصع النصصص البديصصل والمكافصصئ‬ ‫للصورة.‬ ‫•‪ :Long description‬إذا كانت الصورة المستخدمة معقدة‬ ‫وتحتاج لوصصف طويصل كالصصور البيانيصة مثل فيمكصن وصصفها‬ ‫فصصي صصصفحة مسصصتقلة وإضافصصة رابصصط تلك الصصصفحة فصصي المكان‬ ‫المحدد.‬ ‫•أمصا إنْص كانصت الصصورة ل تحمصل أي معلومات مفيدة ول معنصى‬ ‫لها فيمكن وضع البديل النصي لها فارغاً )‪.(quot;quot;=Alt‬‬ ‫‪‬الجداول )‪:(Tables‬‬ ‫تظهر نافذة خصائص قابلية الوصول للجدول )كما في صورة 5( بعد‬ ‫إدراج الجدول كما يلي :‬ ‫‪Insert‬‬ ‫‪table‬‬ ‫و يمكن تصنيف الجداول إلى فئتين رئيسيتين:‬ ‫•جداول التصيميم: للحصصول على مواقصع قابلة للوصصول يجصب‬ ‫البتعاد عصصن هذا النوع مصصن الجداول التصصي ُسصصتخدم للتحكصصم‬ ‫ت‬ ‫بتصصصميم الصصصفحة ول بصصد مصصن اسصصتبدالها باسصصتخدام خصصصائص‬ ‫‪.CSS‬‬ ‫•جداول البيانات: قبصل إنشاء جداول البيانات لبصد مصن التفكيصر‬ ‫أو ً فصي كيفيصة تعامصل قارئات الشاشصة معهصا، و أيضاً لبصد مصن‬ ‫ل‬ ‫62‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تحديد عناوين للعمدة والصفوف )تسمى بالمجال ‪(scope‬‬ ‫لتمكيصن قراءتهصا بصصورة صصحيحة ومفهومصة مصن ِبصل قارئات‬ ‫ق‬ ‫الشاشصصصة وينصصصصح كذلك بإضافصصصة عنوان للجدول وملخصصصص‬ ‫قصير لمحتواه.‬ ‫صورة 5 : أهم خصائص قابلية الوصول الخاصة بالجداول.‬ ‫‪‬الرتباطات التشعبية )‪:(Hyperlinks‬‬ ‫72‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫عنصد إدراج الرتباطات لبصد مصن التأكصد مصن كمال معنصى الرابصط وتجنصب‬ ‫الكلمات المبهمصة مثصل quot;أنقصر هنصاquot;، كمصا يجصب توفيصر اختصصارات لوحصة‬ ‫المفاتيصح للروابصط المهمصة، ويمكصن الوصصول للرتباطات وإدراجهصا كمصا‬ ‫يلي:‬ ‫‪Insert‬‬ ‫‪Hyperlink‬‬ ‫صورة 6: أهم خصائص الرتباطات التشعبية.‬ ‫‪‬الطارات ‪:((Frames‬‬ ‫عنصصد إدراج الطارات لبصصد مصصن تحديصصد اسصصمً ملئمً لكصصل إطار ليتصصم‬ ‫ا‬ ‫ا‬ ‫قراءتها بواسطة قارئات الشاشة.‬ ‫82‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 7 : أهم خصائص قابلية الوصول المتعلقة بالطارات.‬ ‫92‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تطبيق عملي‬ ‫إنشاء صفحة بالدريم ويفر قابلة للوصول‬ ‫لبصصد مصصن الشارة قبصصل البدء فصصي تصصصميم صصصفحات قابلة للوصصصول‬ ‫ص‬ ‫ص‬ ‫بضرورة الهتمام بفصل التنسيق البصري عن بناء محتوى ‪HTML‬‬ ‫، كمصصا يجصصب التأكصصد أيضاً مصصن إدراج العناصصصر بالترتيصصب الصصصحيح أو‬ ‫المطلوب للقراءة.‬ ‫•خطوات إنشاء صفحة قابلة للوصول بالدريم ويفر‬ ‫1.عنصد البدء بالعمصل مصع برنامصج الدريصم ويفصر ل بصد مصن تحديصد اللغصة‬ ‫المراد عمصل الصصفحة مصن خللهصا، وهنصا تصم اختيار ‪ HTML‬كمصا‬ ‫هو موضح في الصورة رقم 8. أما في الصورة رقم 9 فتظهر‬ ‫لنا واجهة الكود التي ستظهر بعد تحديد اللغة المختارة كما يمكنك‬ ‫ايضً رؤية التصميم الخارجي للصفحة أو الكود والتصميم معً.‬ ‫ا‬ ‫ا‬ ‫03‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 8 : واجهة تحديد اللغة المستخدمة لبرمج الموقع ، تظهر‬ ‫عند فتح برنامج الدريم ويفر.‬ ‫13‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫خيارات عرض الكود والتصميم‬ ‫صورة 9 : الواجهة الخاصة بكتابة الكود في الدريم ويفر .‬ ‫23‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫1.إضافة روابط تشعبية‬ ‫كمصصا أشيصصر مسصصبقً ، ينبغصصي مراعاة الترتيصصب الصصصحيح للقراءة،‬ ‫ا‬ ‫ولنفرض أن المثال الحالي سصيتوجب قراءة قائمصة خيارات الصصفحة‬ ‫أو ً ولذلك سيتم إدراجه أولً من خلل:‬ ‫ل‬ ‫‪Insert‬‬ ‫‪hyperlink‬‬ ‫ومصصن ثصصم تعبئة النموذج الخاص بهصصا كمصصا فصصي الصصصورة رقصصم ٠١‬ ‫وإدراجها كما يظهر ذلك في الصورة رقم 11.‬ ‫33‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة ٠١: النموذج الخاص بإدراج ارتباط تشعبي، و خصائص‬ ‫قابلية الوصول لهذا الرتباط.‬ ‫ا‬ ‫صورة 11 : صفحة الويب تظهر على متصفح الفايرفوكس مضافً‬ ‫إليها الروابط التشعبية.‬ ‫43‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫2. إضافة حقل نصي‬ ‫يتم إدراج حقل نصي من القائمة الرئيسية باختيار التالي:‬ ‫‪Insert‬‬ ‫‪Form‬‬ ‫‪Text box‬‬ ‫ثصصم نمل النموذج الخاص بقابليصصة الوصصصول له وإدراجصصه كمصصا فصصي‬ ‫الشكلين التاليين:‬ ‫صورة 21:النموذج الخاص بإضافة حقل نصي، وخصائص قابلية‬ ‫الوصول له.‬ ‫53‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 31 : صفحة الويب تظهر على متصفح الفايرفوكس بعد‬ ‫إضافة الحقول النصية.‬ ‫63‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫3.إضافة صورة‬ ‫يتم إدراج صورة كما يلي:‬ ‫‪Insert‬‬ ‫‪image‬‬ ‫ثصم نمل النموذج الخاص بقابليصة الوصصول لهصا وإدراجهصا كمصا فصي‬ ‫الشكلين التاليين:‬ ‫صورة 41: النص البديل للصور من خصائص قابلية الوصول.‬ ‫73‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫ا‬ ‫صورة 51 : صفحة الويب على المتصفح، الصورة ومضافً‬ ‫إليها النص البديل.‬ ‫4.إضافة نص‬ ‫يتم إضافة النص كما يلي:‬ ‫‪insert‬‬ ‫‪html‬‬ ‫‪text objects‬‬ ‫‪paragraph‬‬ ‫83‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫أ ّا تنسيق النص فسوف يكون عن طريق ‪.CSS‬‬ ‫م‬ ‫صصصورة 61: صصصفحة الويصصب على المتصصصفح ، مضافً إليهصصا‬ ‫ا‬ ‫نص.‬ ‫93‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫•نظرة سريعة على تنسيق محتوى الصفحة‬ ‫عنصصد البدء بتنسصصيق الصصصفحة لبصصد مصصن البتعاد عصصن تصصصميم وترتيصصب‬ ‫المحتوى بواسصصطة الجداول ، كمصصا ُنصصصح باسصصتخدام النسصصب المئويصصة‬ ‫ي‬ ‫لتحديصصصد عرض وارتفاع محتويات الصصصصفحة، وذلك لعرض الصصصصفحة‬ ‫بالشكصل المطلوب مهمصا اختلفصت المتصصفحات أو الجهزة المسصتخدمة أو‬ ‫حتى حجم نافذة العرض.‬ ‫ينبغصي بداي ً تخطيصط الصصفحة بالنسصب المئويصة بمعنصى تحديصد أبعاد كصل‬ ‫ة‬ ‫جزء من الصفحة كما في الشكل التالي:‬ ‫%001‬ ‫%03‬ ‫%06‬ ‫%03‬ ‫%001‬ ‫04‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 71 : تخطيط وتحديد أبعاد صفحة ويب.‬ ‫وبعصد ذلك نبدأ بتحريصك محتويات الصصفحة وتنسصيق اللوان والخلفيات‬ ‫مصصصصصن خلل خصصصصصصائص ‪ css‬منهصصصصصا على سصصصصصبيل المثال ‪ float‬و‬ ‫‪.margin‬‬ ‫صورة 81: صورة توضح الشكل النهائي للصفحة.‬ ‫14‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تدريب تطبيقي‬ ‫الهدف:‬ ‫•تطبيق فعلي للقواعد الساسية لتحقيق قابلية الوصول.‬ ‫•التعرف على أهمية وسهولة تطبيق قابلية الوصول للمواقع.‬ ‫المطلوب:‬ ‫تصصميم صصفحة تحوي نصص بسصيط يذكصر مصن خلله مدى اسصتفادتك مصن‬ ‫الورشصصة، أيضً التدرب على تصصصميم صصصفحة قابلة للوصصصول تحوي‬ ‫ا‬ ‫عناصر أخرى. ومن ثم اختبار الموقع النهائي لقابليته للوصول.‬ ‫الخطوات المطلوبة:‬ ‫1.أضيفي ٣ ارتباطات تشعبية مناسبة لصفحتك .‬ ‫2.حددي نموذج توديصصن إرفاقصصه فصصي صصصفحتك وقومصصي بإدراجصصه‬ ‫مراعيةً خصائص قابلية الوصول.‬ ‫3.ادرجي صورة ثم حددي الوصف النصي الملئم لها.‬ ‫4.أضيفصي نصص يحوي أهصم فائدتيصن جنيتيهصا مصن حضورك اليوم،‬ ‫ونقطتين تمنيتي وجودها اليوم .‬ ‫24‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫5.ادرجصصصي جدول يحوي ثلثصصصة مصصصن مبادئ قابليصصصة الوصصصصول‬ ‫المذكورة سصصابقً ومدى تطبيقهصصا فصصي هذه الصصصفحة، كمصصا فصصي‬ ‫ا‬ ‫الجدول التالي:‬ ‫مدى تطبيقه )نعم /ل)‬ ‫المبدأ‬ ‫6. اختصصبري قابليصصة الوصصصول لموقعصصك باسصصتخدام أحصصد الدوات‬ ‫المشار إليها في صفحة 31.‬ ‫34‬
‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المراجع والمصادر‬ :‫المراجع العربية‬ ‫]1[المعايير القياسية )٩ 002(. موسوعة ويكبيديا العربية. متوفرة على شبكة‬ .‫النترنت‬ ‫/المعايير_القياسية‬http://ar.wikipedia.org/wiki ‫]2[ الشافعي محمود صالح ,تصميم مواقع النترنت التفاعلية دريم‬ . ١٤٢٧ ‫ويفر٨ ، الدار السعودية‬ :‫المراجع الجنبية‬ Usability first website Located on the Internet at [3] http://www.usabilityfirst.com/accessibility/principles.txl . Last visited 1 March, 2009. W3C website Located on the Internet at [4] http://www.w3.org/TR/WCAG10/ . Last visited 1 March, 2009. WebAIM Located on the Internet at http://www.webaim.org/ [5] techniques/dreamweaver . Last visited: 4 March, 2009. 44

Empfohlen

التربية من اجل الابداع
التربية من اجل الابداعالتربية من اجل الابداع
التربية من اجل الابداعguestd5165
 
تخلص من المماطلة
تخلص من المماطلةتخلص من المماطلة
تخلص من المماطلةNaif Z
 
قواعد اللغه العربيه
قواعد اللغه العربيهقواعد اللغه العربيه
قواعد اللغه العربيهcollege
 
اصلی
اصلیاصلی
اصلیguest1ed91a
 
Bloging
BlogingBloging
Bloginglo2lo2
 
هر چ
هر چهر چ
هر چashkan1971
 
Parcham
ParchamParcham
Parchamguestdd73b8
 
الحكمة من كثرة زواج الرسول
الحكمة من كثرة زواج الرسولالحكمة من كثرة زواج الرسول
الحكمة من كثرة زواج الرسولhayss
 

Empfohlen

التربية من اجل الابداع
التربية من اجل الابداعالتربية من اجل الابداع
التربية من اجل الابداعguestd5165
 
تخلص من المماطلة
تخلص من المماطلةتخلص من المماطلة
تخلص من المماطلةNaif Z
 
قواعد اللغه العربيه
قواعد اللغه العربيهقواعد اللغه العربيه
قواعد اللغه العربيهcollege
 
اصلی
اصلیاصلی
اصلیguest1ed91a
 
Bloging
BlogingBloging
Bloginglo2lo2
 
هر چ
هر چهر چ
هر چashkan1971
 
Parcham
ParchamParcham
Parchamguestdd73b8
 
الحكمة من كثرة زواج الرسول
الحكمة من كثرة زواج الرسولالحكمة من كثرة زواج الرسول
الحكمة من كثرة زواج الرسولhayss
 
How To Deal With People As Their Personality
How To Deal With People As Their PersonalityHow To Deal With People As Their Personality
How To Deal With People As Their Personalitymabdelgadir
 
صلاة النوم
صلاة النومصلاة النوم
صلاة النومadelsaad
 
نظم الاختبارات
نظم الاختباراتنظم الاختبارات
نظم الاختباراتد. احمد السحيمي
 
Adt Introduction
Adt IntroductionAdt Introduction
Adt Introductionmahnazz
 
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...wikitehouna
 
خصوبة
خصوبة خصوبة
خصوبة مدوّنة مبادرتنا
 
العيون و أسرارها
العيون و أسرارهاالعيون و أسرارها
العيون و أسرارهاmemo2008
 
Sahih bukhari vol2
Sahih bukhari vol2Sahih bukhari vol2
Sahih bukhari vol2sweetdunya
 
التربية الابداعية للاطفال
التربية الابداعية للاطفالالتربية الابداعية للاطفال
التربية الابداعية للاطفالمدوّنة مبادرتنا
 
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title Zana Azeez
 
جد حياتك بالصيام
جد حياتك بالصيامجد حياتك بالصيام
جد حياتك بالصيامislamtics default
 
لائحة تقويم الطالب
لائحة تقويم الطالبلائحة تقويم الطالب
لائحة تقويم الطالبد. احمد السحيمي
 
Egypit 150
Egypit 150Egypit 150
Egypit 150ALRoA
 
Jado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak MainJado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak Mainguest6da7d3
 
Science and Technology for Global Warming
Science and Technology for Global WarmingScience and Technology for Global Warming
Science and Technology for Global WarmingNational Science and Technology Development Agency (NSTDA) - Thailand
 
๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑Kruthai Kidsdee
 
Firefox Add-Ons
Firefox Add-OnsFirefox Add-Ons
Firefox Add-Onsemad Saleh
 
مجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفومجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفوhusseinw
 
Zh 01 Monotheism
Zh 01 MonotheismZh 01 Monotheism
Zh 01 Monotheismsameh sameh
 
Benchmark 1 reading 2
Benchmark 1 reading 2Benchmark 1 reading 2
Benchmark 1 reading 2Maria BREEN
 

Weitere ähnliche Inhalte

Was ist angesagt?

How To Deal With People As Their Personality
How To Deal With People As Their PersonalityHow To Deal With People As Their Personality
How To Deal With People As Their Personalitymabdelgadir
 
صلاة النوم
صلاة النومصلاة النوم
صلاة النومadelsaad
 
Adt Introduction
Adt IntroductionAdt Introduction
Adt Introductionmahnazz
 
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...wikitehouna
 
العيون و أسرارها
العيون و أسرارهاالعيون و أسرارها
العيون و أسرارهاmemo2008
 
Sahih bukhari vol2
Sahih bukhari vol2Sahih bukhari vol2
Sahih bukhari vol2sweetdunya
 
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title Zana Azeez
 
جد حياتك بالصيام
جد حياتك بالصيامجد حياتك بالصيام
جد حياتك بالصيامislamtics default
 
Egypit 150
Egypit 150Egypit 150
Egypit 150ALRoA
 
Jado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak MainJado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak Mainguest6da7d3
 
๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑Kruthai Kidsdee
 
Firefox Add-Ons
Firefox Add-OnsFirefox Add-Ons
Firefox Add-Onsemad Saleh
 
مجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفومجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفوhusseinw
 
Zh 01 Monotheism
Zh 01 MonotheismZh 01 Monotheism
Zh 01 Monotheismsameh sameh
 
Benchmark 1 reading 2
Benchmark 1 reading 2Benchmark 1 reading 2
Benchmark 1 reading 2Maria BREEN
 

Was ist angesagt? (20)

How To Deal With People As Their Personality
How To Deal With People As Their PersonalityHow To Deal With People As Their Personality
How To Deal With People As Their Personality
 
صلاة النوم
صلاة النومصلاة النوم
صلاة النوم
 
نظم الاختبارات
نظم الاختباراتنظم الاختبارات
نظم الاختبارات
 
Adt Introduction
Adt IntroductionAdt Introduction
Adt Introduction
 
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
اللائحة النهائية للمستفيدين من تغيير الإطار بالمادة 109 من النظام الأساسي بعد...
 
خصوبة
خصوبة خصوبة
خصوبة
 
العيون و أسرارها
العيون و أسرارهاالعيون و أسرارها
العيون و أسرارها
 
Sahih bukhari vol2
Sahih bukhari vol2Sahih bukhari vol2
Sahih bukhari vol2
 
التربية الابداعية للاطفال
التربية الابداعية للاطفالالتربية الابداعية للاطفال
التربية الابداعية للاطفال
 
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
چۆنیەتی بەرزکردنەوەی پلەی زانستی - How to Promote the Scientific Title
 
جد حياتك بالصيام
جد حياتك بالصيامجد حياتك بالصيام
جد حياتك بالصيام
 
لائحة تقويم الطالب
لائحة تقويم الطالبلائحة تقويم الطالب
لائحة تقويم الطالب
 
Egypit 150
Egypit 150Egypit 150
Egypit 150
 
Jado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak MainJado Ka Zikar Quran Pak Main
Jado Ka Zikar Quran Pak Main
 
Science and Technology for Global Warming
Science and Technology for Global WarmingScience and Technology for Global Warming
Science and Technology for Global Warming
 
๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑๑๐๐ พรรณพฤกษา เล่ม ๑
๑๐๐ พรรณพฤกษา เล่ม ๑
 
Firefox Add-Ons
Firefox Add-OnsFirefox Add-Ons
Firefox Add-Ons
 
مجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفومجد السماعيل . هرم خوفو
مجد السماعيل . هرم خوفو
 
Zh 01 Monotheism
Zh 01 MonotheismZh 01 Monotheism
Zh 01 Monotheism
 
Benchmark 1 reading 2
Benchmark 1 reading 2Benchmark 1 reading 2
Benchmark 1 reading 2
 

Accessbility Workshop V1

  • 1. ‫ورشة تدريبية‬ ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫الحتياجات الخاصة‬ ‫إعداد وتنفيذ‬ ‫منال بنت خالد الخنين – أمل بنت عبدال القحطاني‬ ‫د. هند بنت سليمان الخليفة‬ ‫قسم تقنية المعلومات‬
  • 2. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫كلية علوم الحاسب والمعلومات‬ ‫2‬
  • 3. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المقدمة‬ ‫بسصم ال الرحمصن الرحيصم والحمصد ل رب العالميصن وصصلى ال‬ ‫على نبينا محمد وعلى آله وصحبه أجمعين .‬ ‫يعتصبر مفهوم قابليصة الوصصول )‪ (Accessibility‬مصن المفاهيصم‬ ‫التصي لم تنصل حظهصا مصن الهتمام عنصد تصصميم المواقصع العربيصة،‬ ‫و ُعرف هذا المفهوم على أنصصصه quot; القيام بإعداد مواقصصصع ويصصصب‬ ‫ي‬ ‫تناسصب اسصتخدام ذوي الحتياجات الخاصصةquot;. ويتصم ذلك بإتباع‬ ‫وتطصصبيق المعاييصصر القياسصصية والتصصي تجعصصل عمليصصة الوصصصول‬ ‫للمواقع أكثر سهولة، وأيضً جعل صفحات الموقع ذا ترتيب‬ ‫ا‬ ‫منطقي ومفهوم.‬ ‫ومصصن خلل هذه الورشصصة سصصنهتم بزيادة الوعصصي بمفهوم قابليصصة‬ ‫الوصصول وذلك عصن طريصق جعصل المتدربيصن يقومون بتصصميم‬ ‫3‬
  • 4. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صصفحات ويصب تأخصذ فصي عيصن العتبار المعاييصر القياسصية. كمصا‬ ‫سصنعمل مصن خلل هذه الورشصة إلى جعصل المشاركيصن يقومون‬ ‫بعمليصة تقييصم واختبار قابليصة الوصصول لبعصض المواقصع العربيصة‬ ‫مصع بيان تبعات عدم اللتزام بالمعاييصر القياسصية عنصد تصصميم‬ ‫ص‬ ‫صصصفحات الويصصب وتأثيرهصصا على متصصصفحي الويصصب مصصن ذوي‬ ‫الحتياجات الخاصة.‬ ‫وتقبلوا تحياتنا‬ ‫منال – أمل - هند‬ ‫4‬
  • 5. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الفهرس‬ ‫3 ....................................................................................................................................................المقدمة‬ ‫6 .............................................................................................................................................دليل البرنامج‬ ‫8 ....................................................................................................................................................المنهاج‬ ‫9 ................................................................................................................................................الرشادات‬ ‫01 ........................................................................................................................... مقدمة في قابلية الوصول‬ ‫١( قابلية الوصول للمواقع...........................................................................................................11‬ ‫٢( لماذا الهتمام بقابلية الوصول؟..................................................................................................21‬ ‫٣( أدوات مساعدة لختبار قابلية الوصول.........................................................................................31‬ ‫51 ..........................................................................................................................مقدمة في المعايير القياسية‬ ‫١( ما المقصود بالمعايير القياسية ؟................................................................................................51‬ ‫81 ................................................................................................................مبادئ تصميم مواقع قابلة للوصول‬ ‫22 .................................................................................‪ ((Dreamweaver‬قابلية الوصول في برنامج الدريم ويفر‬ ‫03 ......................................................................................................................................... تطبيق عملي‬ ‫24 .........................................................................................................................................تدريب تطبيقي‬ ‫44 ...................................................................................................................................المراجع والمصادر‬ ‫5‬
  • 6. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫دليل البرنامج‬ ‫اسيم الورشية التدريبيية: نحصو مواقصع ويصب عربيصة قابلة للوصصول لذوي‬ ‫الحتياجات الخاصة‬ ‫الهدف العام من الورشة التدريبية:‬ ‫زيادة الوعصي بمفهوم قابليصة الوصصول وأهميصة إتباع المعاييصر القياسصية عنصد‬ ‫تصميم مواقع الويب.‬ ‫الهداف التفصيلية:‬ ‫في نهاية الورشة التدريبية يتوقع من المتدربة:‬ ‫1.‬ ‫التعرف على المعايير القياسية لقابلية الوصول.‬ ‫2.‬ ‫إمكانية تقييم واختبار قابلية الوصول للمواقع.‬ ‫3.‬ ‫تصميم موقع قابل للوصول باستخدام برنامج الدريم ويفر.‬ ‫الفئة المستهدفة من الورشة التدريبية:‬ ‫سصصتكون الورشصصة موجهصصة للمهتميصصن بتطويصصر مواقصصع ويصصب قابلة للوصصصول أو لمصصن لديهصصم‬ ‫الرغبصة فصي اكتشاف مشاكصل قابليصة الوصصول فصي مواقعهصم وحلهصا، كمصا تتطلب الورشصة أن‬ ‫6‬
  • 7. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫يكون المتدرب على معرفصصة باسصصتخدام النترنصصت ومهارات الحاسصصب السصصاسية ويفضصصل‬ ‫معرفة بأساسيات التصميم باستخدام لغات ‪ HTML‬و ‪.CSS‬‬ ‫أساليب التدريب:‬ ‫مجاميع تعاونية – تعلم ذاتي.‬ ‫مدة البرنامج:‬ ‫١-٢ ساعة نظرية و ٥.١-٢ ساعة تدريبية.‬ ‫7‬
  • 8. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المنهاج‬ ‫الزمن بالدقيقة‬ ‫الموضوع‬ ‫الجلسة‬ ‫العنوان‬ ‫نحو مواقع ويب عربية قابلة للوصول لذوي الحتياجات الخاصة‬ ‫٠٢‬ ‫مفاهيم عامة في قابلية الوصول‬ ‫للمواقع‬ ‫الولى‬ ‫٠٢‬ ‫أدوات مساعدة لختبار قابلية الوصول‬ ‫٥١‬ ‫تجربة عملية للتمييز بين مواقع قابلة‬ ‫الثانية‬ ‫الوصول وأخرى غير قابلة للوصول‬ ‫٠٦‬ ‫مبادئ تصميم مواقع قابلة للوصول +‬ ‫استخدام برنامج الدريم ويفر‬ ‫استراحة )٠٢ دقيقة(‬ ‫تدريب عملي‬ ‫٥٤‬ ‫الثالثة‬ ‫٥١‬ ‫حلقة نقاش‬ ‫خاتمة‬ ‫٥‬ ‫8‬
  • 9. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الرشادات‬ ‫لتحققصصصي أهداف الورشصصصة التدريبيصصصة بنجاح نأمصصصل مراعاة الرشادات‬ ‫التالية:‬ ‫١- اللتزام بوقت الورشة التدريبية.‬ ‫٢- اللتزام بوجود الحقيبة التدريبية معك طوال البرنامج التدريبي.‬ ‫٣- المشاركة الف ّالة في تنفيذ النشطة التدريبية.‬ ‫ع‬ ‫٤- المشاركة في عرض إجابات المجموعات للنشطة التدريبية.‬ ‫٥- ل تتردي في الستعانة بالمدربة في حالة واجهتك عقبة أثناء‬ ‫التطبيق.‬ ‫٦- رأيك يهمنا ل تتردي في تقديم ملحظاتك واقتراحاتك للمدربة.‬ ‫٧- نرجو منك إغلق أجهزة الجوال داخل القاعة التدريبية.‬ ‫9‬
  • 10. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مقدمة في قابلية الوصول‬ ‫توفصر الويصب فرصصة عظيمصة للشخاص مصن ذوي الحتياجات الخاصصة‬ ‫للحصول على المعلومات وأيضاً التواصل مع الخرين وذلك بالتحرر‬ ‫من قيود العاقة.‬ ‫وحتى تصبح المعلومات والخدمات المتاحة على الويب متوفرة للجميع‬ ‫بصصصصرف النظصصصر عصصصن نوع إعاقتهصصصم، برز مفهوم قابليصصصة الوصصصصول )‬ ‫‪ (Accessibility‬لتمنح الحق لفئة ذوي الحتياجات الخاصة النتفاع‬ ‫من الويب أسوة بأقرانهم من الناس السوياء.‬ ‫غيصصر أن ّ مصصصممي مواقصصع الويصصب ل يهتمون فصصي الغالب بهذا المفهوم‬ ‫ص‬ ‫وهذا مصصا أشارت إليصصه الكثيصصر مصصن الدراسصصات ومنهصصا دراسصصة بريطانيصصة‬ ‫خلصت إلى أن ٧٩% من مواقع الويب ل توفر الحد الدنى من قابلية‬ ‫الوصول.‬ ‫فصصي هذا الجزء مصصن ال ُتيصصب سصصنهتم بتعريصصف قابليصصة الوصصصول للمواقصصع‬ ‫ك‬ ‫وأهميتهصا وأيضاً اسصتعراض بعصض مصن الدوات المسصاعدة فصي اختبار‬ ‫قابلية الوصول.‬ ‫01‬
  • 11. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫١( قابلية الوصول للمواقع‬ ‫تعرف قابليصة الوصصول للمواقصع على أنهصا quot; جععل موقعع معا قابعل‬ ‫للوص ععول س ععواءً للشخاص العاديي ععن أو ذوي الحتياجات‬ ‫ع‬ ‫ع‬ ‫ع‬ ‫الخاصععة، وأيضا لجهزة الحاسععب الشخصععية أو الهواتععف‬ ‫النقالة أو الحاس ععبات الكفي ععة أو قارئات الشاش ععة) ‪screen‬‬ ‫ع‬ ‫ع‬ ‫ع‬ ‫‪ (reader‬وغيرها من الجهزة المساندةquot;.‬ ‫وعند ذكر مصطلح قابلية الوصول )‪ (Accessibility‬لمواقع الويب‬ ‫أول مصصا يتبادر للذهصصن هصصو اتحاد الشبكصصة العنكبوتيصصة )‪ (W3C‬والذي‬ ‫أنشأها السيد تيم برنرز لي )‪ (Tim Berners-Lee‬مخترع الويب.‬ ‫هذا التحاد ُنشئ ليكون المرجع في وضع قواعد ومواصفات ومعايير‬ ‫أ‬ ‫الويب الساسية وتطوير التقنيات المستخدمة حالياً.‬ ‫كما أن لمختر ِ الويب عبارة شهيرة في قابلية الوصول نصها:‬ ‫ع‬ ‫.‪The power of the web is in its universality‬‬ ‫‪Access by everyone, regardless of disability is‬‬ ‫.‪an essential aspect‬‬ ‫وترجمتها:‬ ‫11‬
  • 12. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫قوة الويب في عالميتها. ووصول الجميع، بغض النظر عن عجزهم.‬ ‫ولدى اتحاد الشبكصصصصة العنكبوتيصصصصة )‪ (W3C‬العديصصصصد مصصصصن المبادرات‬ ‫المخصصصصة لذوي الحتياجات الخاصصصة منهصصا مبادرة قابليصصة الوصصصول‬ ‫للويصب )‪ ،( Web Accessibility Initiative‬والذي يمثصل تجمصع‬ ‫لمنظمات العاقصة والباحثيصن فصي مجال قابليصة الوصصول بالضافصة إلى‬ ‫الحكومات والجهات المهتمصصصصصة. وتقدم هذه المبادرة إرشادات قابليصصصصصة‬ ‫الوصول لمحتوى الويب ويطلق عليها أيضاً إرشادات سهولة استخدام‬ ‫المحتويات اللكترونية )‪ (WCAG‬ودليل قابلية الوصول للمتصفحات‬ ‫وكيفية بناء مواقع قابلة للوصول و مجموعة من الدوات لتقييم قابلية‬ ‫الوصول للمواقع ومواد تدريبية.‬ ‫٢( لماذا الهتمام بقابلية الوصول؟‬ ‫هناك العديد من السباب التي تجعل من المهم الهتمام بقابلية الوصول‬ ‫إلى مواقع الويب نذكر منها:‬ ‫1.انتشار استخدام النترنت في جميع مجالت الحياة.‬ ‫2.تحقيصصصصصق مبدأ تسصصصصصاوي الفرص فصصصصصي الوصصصصصصول للمعلومات‬ ‫والخدمات.‬ ‫3.زيادة في عدد الزوار لموقعك.‬ ‫4.دوافع مادية.‬ ‫21‬
  • 13. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫٣( أدوات مساعدة لختبار قابلية الوصول‬ ‫هناك العديصصد مصصن الدوات التصصي تسصصاعد فصصي اختبار موقصصع مصصا لقابليصصة‬ ‫وصوله. هذه الدوات تتراوح بين مواقع خدمية مثل موقع )‪Cynthia‬‬ ‫‪1(Says‬وموقع )‪ 2(HERA‬وبرمجيات وإضافات للمتصفح.‬ ‫كمصصا أن موقصصع اتحاد الشبكصصة العنكبوتيصصة )‪ (W3C‬قصصد خصصصص صصصفحة‬ ‫كاملة3 لدوات الختبار وكيفية اختيار المناسب منها.‬ ‫فيمصا يلي ذكصر لبرز الدوات البرمجيصة التصي يمكصن تثبيتهصا فصي متصصفح‬ ‫الفايرفوكس )‪ (Firefox‬لختبار قابلية الوصول للمواقع:‬ ‫4‬ ‫‪Firefox Accessibility Extension‬‬ ‫صُممت هذه الضافصة فصي السصاس لمطوري مواقصع الويصب حتصى يتمكنوا‬‫ص‬ ‫مصن تعديصل مواقعهصم بمصا يتناسصب واحتياجات ذوي الحتياجات الخاصصة.‬ ‫1‬ ‫/‪http://www.contentquality.com‬‬ ‫2‬ ‫/‪http://www.sidar.org/hera‬‬ ‫3‬ ‫/‪http://www.w3.org/WAI/ER/tools‬‬ ‫4‬ ‫/‪http://firefox.cita.uiuc.edu‬‬ ‫31‬
  • 14. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫و ُوفصصصر هذه الضافصصصة عدد مصصصن الدوات المسصصصاعدة فصصصي قياس قابليصصصة‬ ‫ت‬ ‫الوصول للمواقع.‬ ‫5‬ ‫كمصصصا يمكصصصن اسصصصتخدام إضافصصصة )‪(Web Developer toolbar‬‬ ‫والمخصصصص لمطوري المواقصصع أيضاً فصصي اختبار المواقصصع )كمصصا فصصي‬ ‫الصورة التالية(.‬ ‫6‬ ‫‪Fangs‬‬ ‫ُتيصح هذه الضافصة مصن تحويصل أي صصفحة ويصب إلى صصفحة نصصية فقصط،‬ ‫ت‬ ‫ليوضصح كيصف يتصم قراءتهصا مصن قبصل قارئاتِص الشاشات والتصي يسصتخدمها‬ ‫المكفوفين وضعاف البصر.‬ ‫5‬ ‫06/‪https://addons.mozilla.org/en-US/firefox/addon‬‬ ‫6‬ ‫/‪http://www.standards-schmandards.com/projects/fangs‬‬ ‫41‬
  • 15. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مقدمة في المعايير القياسية‬ ‫ازداد الهتمام بمعاييصر الويصب القياسصية خاصصة فصي ظ ِ التطور الكصبير‬ ‫ل‬ ‫فصي أدوات تصصفح النترنصت. وهذه المعاييصر ُضعصت مصن قبصل منظمات‬ ‫و‬ ‫عديدة وعلى رأسصها ‪ W3C‬ومصن المهام الرئيسصية لهذه المنظمصة هصي:‬ ‫قيادة الويصصب إلى إمكانيتصصه الكاملة بتطويصصر البروتوكولت و التوجيهات‬ ‫التي تضمن للويب النمو على المدى طويل.‬ ‫١( ما المقصود بالمعايير القياسية ؟‬ ‫quot;هصي مجموعصة مصن المعاييصر تصم إنشائهصا مصن قبصل اتحاد شبكية الوييب‬ ‫العالمييييية )منظمصصصصة ‪ ( W3C‬بهدف تسصصصصهيل قابليصصصصة الوصصصصصول إلى‬ ‫المعلومات، و لتسصهيل التعامصل معهصا باسصتخدام المنتجات المتخصصصة‬ ‫فصصي شبكصصة الويصصب، كالمتصصصفحات و برامصصج تحريصصر المواقصصع و برامصصج‬ ‫الدارة quot; ]1[.‬ ‫٢( فوائد المعايير القياسية؟‬ ‫51‬
  • 16. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫يمكصن إجمال الفوائد مصن اسصتخدام المعاييصر القياسصية عنصد تصصميم مواقصع‬ ‫الويب في التالي ]1[:‬ ‫1.تسييييهيل الوصييييول للمحتوى و تمكييييين quot;ذوي الحتياجات‬ ‫الخاصييةquot; ميين اسييتخدام شبكيية المعلومات بسييهولة: تسصصاعد‬ ‫معاييصصصر ‪ W3C‬الناس إلى الوصصصصول إلى المحتوى بطريقصصصة‬ ‫أسهل، فهي تسهل الوصول إلى المعلومات لذوي الحتياجات‬ ‫الخاصصة كالمكفوفيصن، و المصصابين بضعصف البصصر، بالضافصة‬ ‫إلى الصصصص ّاء حيصصصث تسصصصهل عليهصصصم الوصصصصول للمعلومات‬ ‫ح‬ ‫ومحتوى الموقع .‬ ‫2.تصغير حجم الموقع وزيادة سرعة التحميل: فالمواقع التي‬ ‫يتصم كتابتهصا بمعاييصر ‪ W3C‬القياسصية تكون عادة أصصغر حجمصا‬ ‫بمقدار 02% إلى 06% من المواقع التي ل يتم كتابتها بهذه‬ ‫المعاييصصر، و اسصصتخدام المعاييصصر بالشكصصل الصصصحيح يؤدي إلى‬ ‫تقليصل تكلفصة الصصفحات كصبيرة الحجصم ،إضاف ً إلى أنصه سصيكون‬ ‫ة‬ ‫تحمليها سريع جداً .‬ ‫3.التوافييق والنسييجام: ويقصصصد بالتوافصصق هصصو إمكانيصصة عرض‬ ‫الصصصصفحات بشكصصصل سصصصليم على الجهزة القديمصصصة والحديثصصصة‬ ‫)المسصصصصصاعد الشخصصصصصصي الرقمصصصصصي، الهواتصصصصصف النقالة...(،‬ ‫والمتصصصفحات المختلفصصة )فايروفوكصصس، إنترنصصت إكسصصبلورر،‬ ‫نتسكيب، سفاري ...، بالضافة إلى ذلك عرض مواقع الويب‬ ‫على نحصصو سصصليم فصصي جميصصع المنصصصات: آي بصصي إم ، لينكصصس ،‬ ‫أبل ..‬ ‫61‬
  • 17. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫4.الثبات: تسصاعد معاييصر ‪ W3C‬على الثبات فصي المسصتقبل )أي‬ ‫لن يكون هناك حاجة لعادة التصميم مرة أخرى لكل برنامج‬ ‫تصفح(.‬ ‫5.تسيهيل عمليية الوصيول مين قبيل البراميج و محركات البحيث:‬ ‫تجعصل المعاييصر القياسصية الوصصول إلى محتويات الموقصع أسصهل‬ ‫بالنسصبة للبرامصج و محركات البحصث فتزيصد مصن الرشفصة، لن‬ ‫المواقصصع المكتوبصصة بالمعاييصصر القياسصصية تكون مبنيصصة على هيكصصل‬ ‫واضح.‬ ‫71‬
  • 18. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫مبادئ تصميم مواقع قابلة للوصول‬ ‫مصن الممكصن تقسصيم مبادئ وأسصاسيات تصصميم مواقصع قابلة للوصصول‬ ‫إلى قسمين ]3[:‬ ‫•مبادئ عامة.‬ ‫•مبادئ خاصة ) قابلية الوصول لصفحات الويب(.‬ ‫١( مبادئ عامية: هصي تلك المبادئ المسصتخدمة فصي تصصميم البرامصج‬ ‫وصفحات الويب على حدٍ سواء، و تشمل:‬ ‫•الهتمام بوضصع خيارات مختلفصة فصي خصصائص وطرق إنجاز‬ ‫المهام المختلفة لتلءم جميع الشخاص بمختلف العاقات.‬ ‫•هناك مصن يسصتخدم تقنيات مسصاعدة ولكصل تقنيصة حاجات خاصصة‬ ‫فل بد من مراعاتها وتذكرها.‬ ‫•تجنصصصب التصصصصميم البعيصصصد عصصصن توقعات المسصصصتخدم بغرض‬ ‫الختلف فقط.‬ ‫•تزويد المستخدم بتعليقات توضيحية ورسائل تحذيرية.‬ ‫•إزالة أي تعقيدات غير ضرورية.‬ ‫•تزويصد الوامصر باختصصارات لوحصة المفاتيصح بد ً مصن اسصتخدام‬ ‫ل‬ ‫الفأرة.‬ ‫81‬
  • 19. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫٢( مبادئ خاصييية: وهصصي تلك المبادئ المتعلقصصة بتصصصميم صصصفحات‬ ‫الويب ، والتي ُنفت من قبل منظمة ‪ W3C‬إلى ثلث أولويات ]4[:‬ ‫ص‬ ‫1.الولوييية الولى )1 ‪ :(Priority‬النقاط السصصاسية لتحقيصصق‬ ‫قابليصة الوصصول وبفقدهصا يفقصد الموقصع قابليتصه للوصصول مثصل:‬ ‫وضع وبدائل مكافئة للصور.‬ ‫2.الولويية الثانيية )2 ‪ :(Priority‬المبادئ التصي تضمصن إزالة‬ ‫أهصم الموانصع وبفقدهصا تتوفصر بيئة صصعبة الوصصول مثصل:وضصع‬ ‫معاني كاملة للرتباطات .‬ ‫3.الولويية الثالثية )3 ‪:(Priority‬المبادئ التصي ُحسصن كثيراً‬ ‫ت‬ ‫من قابلية الوصول وفقدها قد يكسب الموقع صعوبة للوصول‬ ‫أحيانً مثل:كتابة المعنى الكامل للختصارات.‬ ‫ا‬ ‫أميا فيميا يخيص أهيم المبادئ التيي وضعتهيا منظمية ‪ W3C‬لتحقييق‬ ‫مواقع قابلة للوصول فيمكن تلخيصها على النحو التالي ]4[:‬ ‫1.توفير بدائل مكافئة للمحتوى السمعي والبصري: حيث‬ ‫نضمن تمكين الشخاص المعاقون بصريً أو سمعيً من‬ ‫ا‬ ‫ا‬ ‫ُ‬ ‫الوصصصصول إلى المحتوى الذي ل يمكنهصصصم إدراكصصصه كأن‬ ‫يكون هناك وصصف للصصورة يعصبر عنهصا و أن يتضمصن‬ ‫ص‬ ‫ص‬ ‫الفيديو وصفً صوتيً.‬ ‫ا‬ ‫ا‬ ‫91‬
  • 20. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫2.تجنيييييب العتماد على اللون وحده: لن هناك تقييصصصصصد‬ ‫للفائدة مصصصن تلك المعلومات وتوفيرهصصصا لفئة دون أخرى‬ ‫فبد ً مصصصن اسصصصتخدام اللون وحده للدللة يمكصصصن الشارة‬ ‫ل‬ ‫والسصصتدلل بالقواس أو بوضصصع النجمصصة أو أي علمصصة‬ ‫تضمن وصولها للجميع.‬ ‫3.استخدم التوصيف )‪ (markup‬و أوراق النمط‬ ‫) )‪ sheets style‬بالشكيل المناسيب: وذلك يضمصن التأكصد‬ ‫من صحة كتابة شفرة ‪ HTML‬واستخدامها للمحتوى فقط و‬ ‫‪ CSS‬للعرض فقط.‬ ‫4.اسيييتخدام لغييية واضحييية: أن يشمصصصل تعريصصصف اللغصصصة‬ ‫واختصصارات لوائل الكلمات، حيثُص يسصهل على قارئات‬ ‫الشاشة وغيرها من التقنيات المساعدة تفسير المحتوى،‬ ‫والتأكصصد مصصن سصصلمة النصصصوص مصصن الخطاء الملئيصصة‬ ‫والنحوية.‬ ‫5.تجنييب اسييتخدام الجداول كوسيييلة للعرض: حيصصث كان‬ ‫من الشائع استخدام الجداول لتخطيط وعرض الصفحة،‬ ‫وذلك لقلة دعصصصم المتصصصصفحات للتخطيصصصط المبنصصصي على‬ ‫‪ CSS‬و انحصصصصصصصار اسصصصصصصتخدام الجداول على عرض‬ ‫البيانات المجدولة.‬ ‫6.تأكيد مين توافيق صيفحات الوييب ميع التقنيات الجديدة‬ ‫والقديمية: وذلك بتوقصع كصل الحتمالت وأسصوأها بمعنصى‬ ‫ضمان اسصصتمرارية العمصصل بالموقصصع حيصصن يتصصم تعطيصصل‬ ‫‪ CSS‬أو ‪. JavaScript‬‬ ‫7.التأكييد ميين قدرة المسييتخدم بالتحكييم بالتغييرات التييي‬ ‫تتأثيير بالتوقيييت: حيصصث يتصصم تزويصصد كافصصة المسصصتخدمين‬ ‫02‬
  • 21. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫بالتحكصصصصصم الذي يحتاجونصصصصصه للحصصصصصصول على المحتوى‬ ‫بالسرعة والشكل الذي يناسبهم )كتوفير خاصية اليقاف‬ ‫والتشغيل(، حيث ُعد تجاهل هذه النقطة مركز للمشاكل‬ ‫ي‬ ‫وخاص ً لمن يعاني من عسر في القراءة أو ضعف في‬ ‫ة‬ ‫البصر .‬ ‫8.تعدد طرق الوصيييول لعناصييير الصيييفحة: حيثصُ يكون‬ ‫ص‬ ‫الوصصول لي عنصصر فصي الصصفحة بواسصطة الفأرة قابصل‬ ‫للوصول كذلك باستخدام لوحة المفاتيح، والهتمام أيضً‬ ‫ا‬ ‫بضمان الوصصول للعناصصر بواسصطة التقنيات المسصاعدة‬ ‫المختلفصة كصبرمجيات تمييصز الصصوت و وسصائل الدخال‬ ‫المختلفة.‬ ‫9.توفيير آليات تصيفح واضحية: وذلك باسصتخدام خريطصة‬ ‫الموقع و وضوح معنى النص للرتباطات.‬ ‫01.تجنب استخدام الفلشات بقدر المكان :وذلك لما تسببه‬ ‫مصصن مشاكصصل لقارئات الشاشصصة ، و للشخاص المصصصابين‬ ‫بالصرع.‬ ‫11.إمكانيصة البحصث وتحديصد موقصع المسصتخدم فصي صصفحات‬ ‫الموقع .‬ ‫12‬
  • 22. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫قابلية الوصول في برنامج الدريم ويفر ))‬ ‫‪Dreamweaver‬‬ ‫لماذا الدريم ويفر ) ‪(Dreamweaver‬؟‬ ‫منصذ الصصدار الول لبرنامصج الدريصم ويفصر وهصو‬ ‫يحمصصصل رؤيصصصة منفردة وتصصصصميم رائع فصصصي إنشاء‬ ‫مواقصع النترنصت وإدارتهصا وأهصم مصا ُميصز برنامصج‬ ‫ي‬ ‫الدريصم ويفصر هصو القياسصية بمعنصى أن الكود الناتصج‬ ‫باسصتخدام الدريصصم ويفصصر يخضصع للمعاييصصر القياسصصية ، كمصصا يتميصز بإنتاج‬ ‫ص‬ ‫ص‬ ‫ص‬ ‫شيفرة مصدرية ويطلق عليه أحيانا quot;كودquot; )‪ (Source Code‬محدد‬ ‫وواضصح ومفهوم إلى حصد كصبير دون الحاجصة إلى كتابصة الكود وذلك مصن‬ ‫خلل أدوات وخيارات البرنامج ]2[.‬ ‫22‬
  • 23. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 1 : واجهة برنامج الدريم ويفر.‬ ‫١( إنشاء موقع بالدريم ويفر:‬ ‫عند إنشاء موقع قابل للوصول باستخدام برنامج الدريم ويفر لبد أولً‬ ‫من التعرف على الخصائص المتاحة في هذا البرنامج.‬ ‫١.١( خصائص قابلية الوصول لدريم ويفر:‬ ‫32‬
  • 24. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫عنصد بدء العمصل مصع برنامصج الدريصم ويفصر لبصد بدايصة التأكصد مصن تفعيصل‬ ‫خاصية قابلية الوصول، وذلك عن طريق اختيار من القائمة الرئيسية:‬ ‫‪Edit‬‬ ‫‪Preferences‬‬ ‫‪Accessibility‬‬ ‫ومصن ثصم الشارة على صصناديق الختيار المتعلقصة بالصصور والطارات‬ ‫والنماذج والوسائط.‬ ‫صورة 2: النموذج الخاص بإعدادات قابلية الوصول في برنامج‬ ‫الدريم ويفر.‬ ‫٢.١( إنشاء محتوى قابل للوصول باستخدام الدريم ويفر ]5[:‬ ‫فيمصا يلي سصنسلط الضوء على كصل عنصصر يمكصن إضافتصه فصي أي موقصع‬ ‫على الويصب )مثصل الصصور والجداول واللوان غيرهصا( وسصنذكر كيصف‬ ‫نحقق قابلية الوصول فيها.‬ ‫42‬
  • 25. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫‪‬الصور )‪:(Images‬‬ ‫يجصب الهتمام عنصد إدراج الصصور بتوفيصر بديصل نصصي للصصورة كمصا تصم‬ ‫ذكره مسصصصبقً، وذلك لتوفيصصصر بديصصصل نصصصصي عنصصصد عدم عرض الصصصصور‬ ‫ا‬ ‫وللسماح للمكفوفين بالتعرف على محتوى الصورة.‬ ‫و يتصم إضافصة بديصل نصصي للصصورة بواسصطة برنامصج الدريصم ويفرعصن‬ ‫طريق اختيار:‬ ‫‪Insert‬‬ ‫‪Image‬‬ ‫وبعد اختيار الصورة ستظهر النافذة التالية:‬ ‫صورة ٣: خصائص قابلية الوصول المتعلقة بالصور.‬ ‫52‬
  • 26. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫الخيارات الموجودة في صورة ٣ تعني التالي:‬ ‫• : ‪ Alternative Text‬لوضصصع النصصص البديصصل والمكافصصئ‬ ‫للصورة.‬ ‫•‪ :Long description‬إذا كانت الصورة المستخدمة معقدة‬ ‫وتحتاج لوصصف طويصل كالصصور البيانيصة مثل فيمكصن وصصفها‬ ‫فصصي صصصفحة مسصصتقلة وإضافصصة رابصصط تلك الصصصفحة فصصي المكان‬ ‫المحدد.‬ ‫•أمصا إنْص كانصت الصصورة ل تحمصل أي معلومات مفيدة ول معنصى‬ ‫لها فيمكن وضع البديل النصي لها فارغاً )‪.(quot;quot;=Alt‬‬ ‫‪‬الجداول )‪:(Tables‬‬ ‫تظهر نافذة خصائص قابلية الوصول للجدول )كما في صورة 5( بعد‬ ‫إدراج الجدول كما يلي :‬ ‫‪Insert‬‬ ‫‪table‬‬ ‫و يمكن تصنيف الجداول إلى فئتين رئيسيتين:‬ ‫•جداول التصيميم: للحصصول على مواقصع قابلة للوصصول يجصب‬ ‫البتعاد عصصن هذا النوع مصصن الجداول التصصي ُسصصتخدم للتحكصصم‬ ‫ت‬ ‫بتصصصميم الصصصفحة ول بصصد مصصن اسصصتبدالها باسصصتخدام خصصصائص‬ ‫‪.CSS‬‬ ‫•جداول البيانات: قبصل إنشاء جداول البيانات لبصد مصن التفكيصر‬ ‫أو ً فصي كيفيصة تعامصل قارئات الشاشصة معهصا، و أيضاً لبصد مصن‬ ‫ل‬ ‫62‬
  • 27. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تحديد عناوين للعمدة والصفوف )تسمى بالمجال ‪(scope‬‬ ‫لتمكيصن قراءتهصا بصصورة صصحيحة ومفهومصة مصن ِبصل قارئات‬ ‫ق‬ ‫الشاشصصصة وينصصصصح كذلك بإضافصصصة عنوان للجدول وملخصصصص‬ ‫قصير لمحتواه.‬ ‫صورة 5 : أهم خصائص قابلية الوصول الخاصة بالجداول.‬ ‫‪‬الرتباطات التشعبية )‪:(Hyperlinks‬‬ ‫72‬
  • 28. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫عنصد إدراج الرتباطات لبصد مصن التأكصد مصن كمال معنصى الرابصط وتجنصب‬ ‫الكلمات المبهمصة مثصل quot;أنقصر هنصاquot;، كمصا يجصب توفيصر اختصصارات لوحصة‬ ‫المفاتيصح للروابصط المهمصة، ويمكصن الوصصول للرتباطات وإدراجهصا كمصا‬ ‫يلي:‬ ‫‪Insert‬‬ ‫‪Hyperlink‬‬ ‫صورة 6: أهم خصائص الرتباطات التشعبية.‬ ‫‪‬الطارات ‪:((Frames‬‬ ‫عنصصد إدراج الطارات لبصصد مصصن تحديصصد اسصصمً ملئمً لكصصل إطار ليتصصم‬ ‫ا‬ ‫ا‬ ‫قراءتها بواسطة قارئات الشاشة.‬ ‫82‬
  • 29. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 7 : أهم خصائص قابلية الوصول المتعلقة بالطارات.‬ ‫92‬
  • 30. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تطبيق عملي‬ ‫إنشاء صفحة بالدريم ويفر قابلة للوصول‬ ‫لبصصد مصصن الشارة قبصصل البدء فصصي تصصصميم صصصفحات قابلة للوصصصول‬ ‫ص‬ ‫ص‬ ‫بضرورة الهتمام بفصل التنسيق البصري عن بناء محتوى ‪HTML‬‬ ‫، كمصصا يجصصب التأكصصد أيضاً مصصن إدراج العناصصصر بالترتيصصب الصصصحيح أو‬ ‫المطلوب للقراءة.‬ ‫•خطوات إنشاء صفحة قابلة للوصول بالدريم ويفر‬ ‫1.عنصد البدء بالعمصل مصع برنامصج الدريصم ويفصر ل بصد مصن تحديصد اللغصة‬ ‫المراد عمصل الصصفحة مصن خللهصا، وهنصا تصم اختيار ‪ HTML‬كمصا‬ ‫هو موضح في الصورة رقم 8. أما في الصورة رقم 9 فتظهر‬ ‫لنا واجهة الكود التي ستظهر بعد تحديد اللغة المختارة كما يمكنك‬ ‫ايضً رؤية التصميم الخارجي للصفحة أو الكود والتصميم معً.‬ ‫ا‬ ‫ا‬ ‫03‬
  • 31. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 8 : واجهة تحديد اللغة المستخدمة لبرمج الموقع ، تظهر‬ ‫عند فتح برنامج الدريم ويفر.‬ ‫13‬
  • 32. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫خيارات عرض الكود والتصميم‬ ‫صورة 9 : الواجهة الخاصة بكتابة الكود في الدريم ويفر .‬ ‫23‬
  • 33. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫1.إضافة روابط تشعبية‬ ‫كمصصا أشيصصر مسصصبقً ، ينبغصصي مراعاة الترتيصصب الصصصحيح للقراءة،‬ ‫ا‬ ‫ولنفرض أن المثال الحالي سصيتوجب قراءة قائمصة خيارات الصصفحة‬ ‫أو ً ولذلك سيتم إدراجه أولً من خلل:‬ ‫ل‬ ‫‪Insert‬‬ ‫‪hyperlink‬‬ ‫ومصصن ثصصم تعبئة النموذج الخاص بهصصا كمصصا فصصي الصصصورة رقصصم ٠١‬ ‫وإدراجها كما يظهر ذلك في الصورة رقم 11.‬ ‫33‬
  • 34. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة ٠١: النموذج الخاص بإدراج ارتباط تشعبي، و خصائص‬ ‫قابلية الوصول لهذا الرتباط.‬ ‫ا‬ ‫صورة 11 : صفحة الويب تظهر على متصفح الفايرفوكس مضافً‬ ‫إليها الروابط التشعبية.‬ ‫43‬
  • 35. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫2. إضافة حقل نصي‬ ‫يتم إدراج حقل نصي من القائمة الرئيسية باختيار التالي:‬ ‫‪Insert‬‬ ‫‪Form‬‬ ‫‪Text box‬‬ ‫ثصصم نمل النموذج الخاص بقابليصصة الوصصصول له وإدراجصصه كمصصا فصصي‬ ‫الشكلين التاليين:‬ ‫صورة 21:النموذج الخاص بإضافة حقل نصي، وخصائص قابلية‬ ‫الوصول له.‬ ‫53‬
  • 36. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 31 : صفحة الويب تظهر على متصفح الفايرفوكس بعد‬ ‫إضافة الحقول النصية.‬ ‫63‬
  • 37. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫3.إضافة صورة‬ ‫يتم إدراج صورة كما يلي:‬ ‫‪Insert‬‬ ‫‪image‬‬ ‫ثصم نمل النموذج الخاص بقابليصة الوصصول لهصا وإدراجهصا كمصا فصي‬ ‫الشكلين التاليين:‬ ‫صورة 41: النص البديل للصور من خصائص قابلية الوصول.‬ ‫73‬
  • 38. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫ا‬ ‫صورة 51 : صفحة الويب على المتصفح، الصورة ومضافً‬ ‫إليها النص البديل.‬ ‫4.إضافة نص‬ ‫يتم إضافة النص كما يلي:‬ ‫‪insert‬‬ ‫‪html‬‬ ‫‪text objects‬‬ ‫‪paragraph‬‬ ‫83‬
  • 39. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫أ ّا تنسيق النص فسوف يكون عن طريق ‪.CSS‬‬ ‫م‬ ‫صصصورة 61: صصصفحة الويصصب على المتصصصفح ، مضافً إليهصصا‬ ‫ا‬ ‫نص.‬ ‫93‬
  • 40. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫•نظرة سريعة على تنسيق محتوى الصفحة‬ ‫عنصصد البدء بتنسصصيق الصصصفحة لبصصد مصصن البتعاد عصصن تصصصميم وترتيصصب‬ ‫المحتوى بواسصصطة الجداول ، كمصصا ُنصصصح باسصصتخدام النسصصب المئويصصة‬ ‫ي‬ ‫لتحديصصصد عرض وارتفاع محتويات الصصصصفحة، وذلك لعرض الصصصصفحة‬ ‫بالشكصل المطلوب مهمصا اختلفصت المتصصفحات أو الجهزة المسصتخدمة أو‬ ‫حتى حجم نافذة العرض.‬ ‫ينبغصي بداي ً تخطيصط الصصفحة بالنسصب المئويصة بمعنصى تحديصد أبعاد كصل‬ ‫ة‬ ‫جزء من الصفحة كما في الشكل التالي:‬ ‫%001‬ ‫%03‬ ‫%06‬ ‫%03‬ ‫%001‬ ‫04‬
  • 41. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫صورة 71 : تخطيط وتحديد أبعاد صفحة ويب.‬ ‫وبعصد ذلك نبدأ بتحريصك محتويات الصصفحة وتنسصيق اللوان والخلفيات‬ ‫مصصصصصن خلل خصصصصصصائص ‪ css‬منهصصصصصا على سصصصصصبيل المثال ‪ float‬و‬ ‫‪.margin‬‬ ‫صورة 81: صورة توضح الشكل النهائي للصفحة.‬ ‫14‬
  • 42. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫تدريب تطبيقي‬ ‫الهدف:‬ ‫•تطبيق فعلي للقواعد الساسية لتحقيق قابلية الوصول.‬ ‫•التعرف على أهمية وسهولة تطبيق قابلية الوصول للمواقع.‬ ‫المطلوب:‬ ‫تصصميم صصفحة تحوي نصص بسصيط يذكصر مصن خلله مدى اسصتفادتك مصن‬ ‫الورشصصة، أيضً التدرب على تصصصميم صصصفحة قابلة للوصصصول تحوي‬ ‫ا‬ ‫عناصر أخرى. ومن ثم اختبار الموقع النهائي لقابليته للوصول.‬ ‫الخطوات المطلوبة:‬ ‫1.أضيفي ٣ ارتباطات تشعبية مناسبة لصفحتك .‬ ‫2.حددي نموذج توديصصن إرفاقصصه فصصي صصصفحتك وقومصصي بإدراجصصه‬ ‫مراعيةً خصائص قابلية الوصول.‬ ‫3.ادرجي صورة ثم حددي الوصف النصي الملئم لها.‬ ‫4.أضيفصي نصص يحوي أهصم فائدتيصن جنيتيهصا مصن حضورك اليوم،‬ ‫ونقطتين تمنيتي وجودها اليوم .‬ ‫24‬
  • 43. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫5.ادرجصصصي جدول يحوي ثلثصصصة مصصصن مبادئ قابليصصصة الوصصصصول‬ ‫المذكورة سصصابقً ومدى تطبيقهصصا فصصي هذه الصصصفحة، كمصصا فصصي‬ ‫ا‬ ‫الجدول التالي:‬ ‫مدى تطبيقه )نعم /ل)‬ ‫المبدأ‬ ‫6. اختصصبري قابليصصة الوصصصول لموقعصصك باسصصتخدام أحصصد الدوات‬ ‫المشار إليها في صفحة 31.‬ ‫34‬
  • 44. ‫نحو مواقع ويب عربية قابلة للوصول لذوي‬ ‫حقيبة تدريبية‬ ‫الحتياجات الخاصة‬ ‫المراجع والمصادر‬ :‫المراجع العربية‬ ‫]1[المعايير القياسية )٩ 002(. موسوعة ويكبيديا العربية. متوفرة على شبكة‬ .‫النترنت‬ ‫/المعايير_القياسية‬http://ar.wikipedia.org/wiki ‫]2[ الشافعي محمود صالح ,تصميم مواقع النترنت التفاعلية دريم‬ . ١٤٢٧ ‫ويفر٨ ، الدار السعودية‬ :‫المراجع الجنبية‬ Usability first website Located on the Internet at [3] http://www.usabilityfirst.com/accessibility/principles.txl . Last visited 1 March, 2009. W3C website Located on the Internet at [4] http://www.w3.org/TR/WCAG10/ . Last visited 1 March, 2009. WebAIM Located on the Internet at http://www.webaim.org/ [5] techniques/dreamweaver . Last visited: 4 March, 2009. 44