تدريبية ورشة

قابلة عربية ويب مواقع نحوالخاصة اإلحتياجات لذوي للوصول

وتنفيذ إعداد

القحطاني عبدالله بنت أمل – الخنين خالد بنت منال

هند. الخليفة سليمان بنت د

المعلومات تقنية قسم

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

والمعلومات الحاسب علوم كلية

1

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

المقدمة

رب لله والحمد الرحيم الرحمن الله بسم آله وعلى محمد نبينا على الله وصلى العالمين

. أجمعين وصحبه

من( Accessibility) الوصول قابلية مفهوم يعتبر

عند اإلهتمام من حظها تنل لم التي المفاهيم

>عرف العربية، المواقع تصميم المفهوم هذا وي

تناسب ويب مواقع إعدادب القيام" أنه على

ويتم". الخاص االحتياجات يذو استخدام ذلك ة

تجعل والتي القياسية المعايير وتطبيق بإتباع

G ،سهولة أكثر قعاللمو الوصول عملية جعل وأيضا

ومفهوم. منطقي ترتيب ذا الموقع صفحات

2

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الوعي بزيادة سنهتم الورشة هذه خالل ومن جعل طريق عن وذلك الوصول قابلية بمفهوم

تأخذ ويب صفحات بتصميم يقومون المتدربين

كما. المعايير اإلعتبار عين في سنعمل القياسية

المشاركين جعل إلى الورشة هذه خالل من

الوصول قابلية واختبار تقييم بعملية يقومون

عدم تبعات بيان مع العربية المواقع لبعض

صفحات تصميم عند القياسية بالمعايير اإللتزام

ذوي من الويب متصفحي على وتأثيرها الويب

الخاصة. اإلحتياجات

تحياتنا وتقبلوا

هند- أمل – منال

3

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الفهرس

1................................................................................................المقدمة

4.........................................................................................البرنامج دليل

6..................................................................................................المنهاج

7.............................................................................................اإلرشادات

8........................................................................الوصول قابلية في مقدمة

9.....................................................................للمواقع الوصول قابلية( 1

10........................................................الوصول؟ بقابلية هتمامإال لماذا( 2

11..............................................الوصول قابلية ختبارإل مساعدة أدوات( 3

13..................................................................القياسية المعايير في مقدمة

13......................................................؟ القياسية بالمعايير المقصود ما( 1

القياسية؟( 2 المعايير 13.........................................................فوائد

16..........................................................للوصول قابلة مواقع تصميم مبادئ

Dreamweaver.............................20)) ويفر الدريم برنامج في الوصول قابلية

28........................................................................................عملي تطبيق

40.....................................................................................تطبيقي تدريب

42.................................................................................والمصادر المراجع

4

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

البرنامج دليل

قابلة عربية ويب مواقع نحو: التدريبية الورشة اسمالخاصة اإلحتياجات لذوي للوصول

التدريبية: الورشة من العام الهدف

المعايير إتباع وأهمية الوصول قابلية بمفهوم الوعي زيادة.الويب مواقع تصميم عند القياسية

التفصيلية: األهداف

المتدربة: من يتوقع التدريبية الورشة نهاية في

.الوصول لقابلية القياسية المعايير على التعرف.1

.للمواقع الوصول قابلية واختبار تقييم إمكانية.2

.ويفر الدريم برنامج باستخدام للوصول قابل موقع تصميم.3

التدريبية: الورشة من المستهدفة الفئة

أو للوصول قابلة ويب مواقع بتطوير للمهتمين موجهة الورشة ستكون مواقعهم في الوصول قابلية مشاكل اكتشاف في الرغبة لديهم لمن

5

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

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

بأساسيات معرفة ويفضل األساسية الحاسب ومهارات االنترنت

.CSS و HTML لغات باستخدام التصميم

التدريب: أساليب

ذاتي. تعلم – تعاونية مجاميع

البرنامج: مدةتدريبية. ساعة 2-1.5و نظرية ساعة 1-2

6

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

المنهاج

الجلسالعنوانة

الزمنالموضوعبالدقيقة

حون

قع

وام

ب

وي

يةرب

ع

لةابق

ل

صولو

ل

يذو

ل

تجا

ياحت

اإل

صةخا

ال

7

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

اإلرشادات

مراعاة نأمل بنجاح التدريبية الورشة أهداف لتحققيالتالية: اإلرشادات

التدريبية. الورشة بوقت اإللتزام- 1

البرنامج طوال معك التدريبية الحقيبة بوجود اإللتزام- 2التدريبي.

التدريبية. األنشطة تنفيذ في الفع̀الة المشاركة- 3

لألنشطة المجموعات إجابات عرض في المشاركة- 4التدريبية.

واجهتك حالة في بالمدربة اإلستعانة في تتردي ال- 5 أثناء عقبة

التطبيق.

واقتراحاتك مالحظاتك تقديم في تتردي ال يهمنا رأيك- 6للمدربة.

8

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

القاعة داخل الجوال أجهزة إغالق منك نرجو- 7التدريبية.

9

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الوصول قابلية في مقدمة

ذوي من لألشخاص عظيمة فرصة الويب توفر G وأيضا المعلومات على للحصول الخاصة االحتياجات

. اإلعاقة قيود من بالتحرر وذلك اآلخرين مع التواصل

الويب على المتاحة والخدمات المعلومات تصبح وحتىبرز إعاقتهم، نوع عن النظر بصرف للجميع متوفرة

( الوصول قابلية الحق( Accessibilityمفهوم لتمنحأسوة الويب من اإلنتفاع الخاصة االحتياجات ذوي لفئة

. األسوياء الناس من بأقرانهم

الغالب في يهتمون ال الويب مواقع مصممي أ̀ن غيرالدراسات من الكثير إليه أشارت ما وهذا المفهوم بهذا

أن إلى خلصت بريطانية دراسة مواقع من% 97ومنهاالوصول. قابلية من األدنى الحد توفر ال الويب

10

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

قابلية بتعريف سنهتم >تيب الك من الجزء هذا فيمن بعض استعراض G وأيضا وأهميتها للمواقع الوصول

. الوصول قابلية اختبار في المساعدة األدوات

للمواقع( 1 الوصول قابليةأنها " على للمواقع الوصول قابلية ما جعلتعرف موقع

ذوي أو العاديين لألشخاص سواءG للوصول قابلوأيضاG االحتياجات الحاسب الخاصة، الشخصية ألجهزة

قارئات أو الكفية الحاسبات أو النقالة الهواتف أوscreenالشاشة) reader) األجهزة من وغيرها ".المساندة

)و الوصول قابلية مصطلح ذكر (Accessibilityعندالشبكة اتحاد هو للذهن يتبادر ما أول الويب لمواقع

لي( )W3Cالعنكبوتية ) برنرز تيم السيد أنشأها والذيTim Berners-Lee . ال( هذا الويب أ إمخترع نشئ>تحاد

ومعايير ومواصفات قواعد وضع في المرجع ليكونوتطوير األساسية G التقنياتالويب حاليا .المستخدمة

11

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الوصول قابلية في شهيرة عبارة الويب nلمخترع أن كمانصها:

The power of the web is in its universality. Access by everyone, regardless of disability is

an essential aspect.

وترجمتها:

النظر بغض الجميع، ووصول. عالميتها في الويب قوةعجزهم. عن

)و العنكبوتية الشبكة اتحاد من (W3Cلدى العديدمنها الخاصة االحتياجات لذوي المخصصة المبادرات

( للويب الوصول قابلية Webمبادرة Accessibility Initiative )، اإلعاقة لمنظمات تجمع يمثل والذي

إلى باإلضافة الوصول قابلية مجال في والباحثينالمهتمة والجهات المبادرة و .الحكومات هذه تقدم

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

(WCAG )وكيفية للمتصفحات الوصول قابلية ودليلاألدوات من مجموعة و للوصول قابلة مواقع بناء

. تدريبية ومواد للمواقع الوصول قابلية لتقييم

12

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الوصول؟ بقابلية االهتمام لماذا( 2

المهم من تجعل التي األسباب من العديد هناكالوصول بقابلية الويب إلى اإلهتمام : مواقع منها نذكر

استخدام .1 مجاالت جميع في اإلنترنت انتشارالحياة.

الوصول .2 في الفرص تساوي مبدأ تحقيق. والخدمات للمعلومات

3.. لموقعك الزوار عدد في زيادة

4.. مادية دوافع

الوصول قابلية الختبار مساعدة أدوات( 3

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

13

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

( موقع مثل )Cynthia Says)1خدمية HERA)2وموقع

. للمتصفح وإضافات وبرمجيات

( العنكبوتية الشبكة اتحاد موقع أن قد( W3Cكماكاملqة صqفحة اختيqار 3خصqص وكيفيqة االختبqار ألدوات

. منها المناسب

تثبيتها يمكن التي البرمجية األدوات ألبرز ذكر يلي فيما( الفايرفوكس متصفح قابلية( Firefoxفي الختبار

: للمواقع الوصول

Firefox Accessibility Extension4

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

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

للمواقع .الوصول

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/

14

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

( إضافة استخدام يمكن Webكما Developer toolbar)5 ارqاختب في G أيضqا المواقqع لمطqوري والمخصqص

.) التالية ) الصورة في كما المواقع

Fangs6

>تيح تحويل ت من اإلضافة صفحة هذه إلى ويب أيليوضح نصية صفحة يتم فقط، قبل من قراءتها كيفnالمكفوفين يستخدمها والتي الشاشات قارئات

البصر .وضعاف

5 https://addons.mozilla.org/en-US/firefox/addon/60

6 http://www.standards-schmandards.com/projects/fangs/

15

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

القياسية المعايير في مقدمة

ال ظلn إازداد في خاصة القياسية الويب بمعايير هتمام . وهذه اإلنترنت تصفح أدوات في الكبير التطوررأسها وعلى عديدة منظمات قبل من و>ضعت المعايير

W3C المنظمة لهذه الرئيسية المهام قيادة: هي ومنو البروتوكوالت بتطوير الكاملة إمكانيته إلى الويب

طويل المدى على النمو للويب تضمن التي .التوجيهات

؟ (1 القياسية بالمعايير المقصود ما

تم " المعايير من مجموعة قبل إنشائهاهي اتحادمنالويب ) العالمية شبكة بهدف( W3Cمنظمة

لتسهيل و المعلومات، إلى الوصول قابلية تسهيلفي المتخصصة المنتجات باستخدام معها التعامل

و المواقع تحرير برامج و كالمتصفحات الويب، شبكةاإلدارة . [1] " برامج

القياسية؟ (2 المعايير فوائد

16

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

القياسية المعايير استخدام من الفوائد إجمال يمكن:[1] التالي في الويب مواقع تصميم عند

تمكين .1 و للمحتوى الوصول ذوي"تسهيلالخاصة شبكة "االحتياجات استخدام من

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

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

سرعة .2 وزيادة الموقع حجم تصغيربمعايير: التحميل كتابتها يتم التي W3C فالمواقع

بمقدار حجما أصغر عادة تكون إلى% 20القياسيةالمعايير،% 60 بهذه كتابتها يتم ال التي المواقع من

إلى يؤدي الصحيح بالشكل المعايير استخدام وإلى Gإضافة، الحجم كبيرة الصفحات تكلفة تقليل

. G جدا سريع تحمليها سيكون أنه

هو ويقصد :واالنسجامالتوافق .3 بالتوافقعلى سليم بشكل الصفحات عرض إمكانية

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

( إكسبلورر، إنترنت فايروفوكس، المختلفة ... عرض ذلك إلى باإلضافة ، سفاري نتسكيب،

17

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

: المنصات جميع في سليم نحو على الويب مواقعأبل .. ، لينكس ، إم بي آي

معايير: الثبات.4 في W3C تساعد الثبات على ( إلعادة حاجة هناك يكون لن أي المستقبل

برنامج لكل أخرى مرة تصفح(.التصميم

و .5 البرامج قبل من الوصول عملية تسهيلالبحث القياسية: محركات المعايير تجعل

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

مبنية تكون القياسية بالمعايير المكتوبة المواقعواضح هيكل .على

18

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

للوصول قابلة مواقع تصميم مبادئ

مواقع تصميم وأساسيات مبادئ تقسيم الممكن منقسمين إلى للوصول : [3]قابلة

. عامة مبادئ.) الويب ) لصفحات الوصول قابلية خاصة مبادئ

1 ) : عامة في مبادئ المستخدمة المبادئ تلك هيسو xحد على الويب وصفحات البرامج و اتصميم ء،

تشمل:

خصائص اإلهتمام• في مختلفة خيارات بوضعالمختلفة المهام إنجاز جميع لتالءموطرق

. اإلعاقات بمختلف األشخاصمن • ولكل هناك مساعدة تقنيات تقنية يستخدم

مراعاتها خاصة حاجات من بد وتذكرها.فالالمستخدم • توقعات عن البعيد التصميم تجنب

.اإلختالفبغرض فقط ورسائل • توضيحية بتعليقات المستخدم تزويد

تحذيرية.

19

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

•. ضرورية غير تعقيدات أي إزالةاألوامر • من باختصاراتتزويد G بدال المفاتيح لوحة

.استخدام الفأرة

2 ): خاصة بتصميم مبادئ المتعلقة المبادئ تلك وهيمنظمة قبل من ص>نفت والتي ، الويب W3Cصفحات

أولويات ثالث :[4] إلى

األولى ).1 األساسية (:Priority 1األولوية النقاطالموقع يفقد وبفقدها الوصول قابلية لتحقيق

مثل للوصول مكاف :قابليته وبدائل .ئةوضع للصور 2.( الثانية Priorityاألولوية التي (:2 المبادئ

بيئة تتوفر وبفقدها الموانع أهم إزالة تضمنمثل الوصول كاملة :صعبة معاني وضع

رتباطات .إلل3.( الثالثة Priorityاألولوية التي (:3 المبادئ

يكسب >ت قد وفقدها الوصول قابلية من G كثيرا حسنللوصول صعوبة Gالموقع المعنى :مثل أحيانا كتابة

. لالختصارات الكامل

20

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

وضعتها التي المبادئ أهم يخص فيما أماللوصول W3Cمنظمة قابلة مواقع لتحقيق

التالي النحو على تلخيصها : [4]فيمكن

مكاف .1 بدائل السمعي ئتوفير للمحتوى ةنضمن والبصري: األشخاص تمكينحيث

إلى الوصول من G سمعيا أو <G بصريا المعاقونال الذي إدراكه المحتوى هناك يمكنهم يكون كأن

الفيديو يتضمن أن و عنها يعبر للصورة وصف . G صوتيا G وصفا

اللون اإلعتمادتجنب .2 هناك وحده:على ألنلفئة وتوفيرها المعلومات تلك من للفائدة تقييد

G فبدال أخرى استخدام دون وحده من اللونو اإلشارة يمكن أو االستداللللداللة باألقواس

وصولها تضمن عالمة أي أو النجمة بوضع للجميع.

)استخدم.3 أوراق( markupالتوصيف والنمط

( (sheets style : المناسب وذلك بالشكلشفرة كتابة صحة من التأكد HTMLيضمن

و واستخدامها فقط للعرض CSSللمحتوىفقط.

4.: واضحة لغة تعريف أن استخدام يشملواختصارات يسهل اللغة حيث> الكلمات، ألوائل

التقنيات من وغيرها الشاشة قارئات على

21

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

تفسير سالمة المحتوى،المساعدة من والتأكداإلمالئية األخطاء من والنحوية.النصوص

5.: للعرض كوسيلة الجداول استخدام تجنبالجداول استخدام الشائع من كان حيث

وعرض دعم الصفحة،لتخطيط لقلة وذلكعلى المبني للتخطيط و CSSالمتصفحات

البيانات استخدامر اانحص عرض على الجداولالمجدولة.

مع .6 الويب صفحات توافق من تأكد: والقديمة الجديدة بتوقع التقنيات وذلك

االحتماالت ضمان وأسوأهاكل بمعنىتعطيل يتم حين بالموقع العمل CSSاستمرارية

.JavaScriptأو بالتحكم .7 المستخدم قدرة من التأكد

: بالتوقيت تتأثر التي يتم بالتغييرات حيثيحتاجونه الذي بالتحكم المستخدمين كافة تزويد

الذي والشكل بالسرعة المحتوى على للحصول) ( ، والتشغيل اإليقاف خاصية كتوفير يناسبهم

للمشاكل مركز النقطة هذه تجاهل >عد ي حيثأو القراءة في عسر من يعاني لمن Gوخاصة

البصر . في ضعف8.: الصفحة لعناصر الوصول طرق تعدد

الصفحة في عنصر ألي الوصول يكون حيث>كذلك للوصول قابل الفأرة باستخدامبواسطة

G واإلهتمام المفاتيح،لوحة الوصول أيضا بضمان

22

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

المختلفة المساعدة التقنيات بواسطة للعناصراإلدخال وسائل و الصوت تمييز كبرمجيات

المختلفة.9.: واضحة تصفح آليات باستخداموذلك توفير

النص معنى وضوح و الموقع خريطة. لإلرتباطات

بقدر .10 الفالشات استخدام تجنبمشاكل : مكانإال من تسببه لما لقارئات وذلك

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

الموقع . صفحات

23

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الدريم في لوصول ا ة ي قابل برنامج Dreamweaver ) ويفر )

ويفر الدريم )لماذا Dreamweaver) ؟

الدريم لبرنامج األول اإلصدار منذوتصميم منفردة رؤية يحمل وهو ويفر

اإلنترنت مواقع إنشاء في رائعي ما وأهم القياسية >وإدارتها هو ويفر الدريم برنامج ميز

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

" أحيانا عليه )كودويطلق "Source Code )محدد كتابة إلى الحاجة دون كبير حد إلى ومفهوم وواضح

البرنامج وخيارات أدوات خالل من وذلك .[2]الكود

24

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

.1صورة ويفر : الدريم برنامج واجهة

1): ويفر بالدريم موقع إنشاء

برنامج باستخدام للوصول قابل موقع إنشاء عندالخصائص على التعرف من G أوال البد ويفر الدريم

. البرنامج هذا في المتاحة

1.1) : ويفر لدريم الوصول قابلية خصائص

25

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

التأكد بداية البد ويفر الدريم برنامج مع العمل بدء عندطريق عن وذلك الوصول، قابلية خاصية تفعيل من

الرئيسية اختيار القائمة :من

Edit Preferences Accessibility

اإلشارة ثم صناديق عومن بالصور االختيارلى المتعلقة. والوسائط والنماذج واإلطارات

في: 2صورة الوصول قابلية بإعدادات الخاص النموذج. ويفر الدريم برنامج

للوصول (1.2 قابل محتوى باستخدامإنشاءويفر :[5]الدريم

26

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

إضافته يمكن عنصر كل على الضوء سنسلط يلي فيما ( والجداول الصور مثل الويب على موقع أي في

) الوصول قابلية نحقق كيف وسنذكر غيرها واأللوانفيها.

الصور( Images) :نصي اإلهتماميجب بديل بتوفير الصور إدراج عند

ذكره تم كما G،للصورة بديل مسبقا لتوفير نصي وذلكبالتعرف للمكفوفين وللسماح الصور عرض عدم عند

محتوى الصورة. على

للصورة يتم و نصي بديل برنامج إضافة بواسطةطريق ويفرعن :اختيارالدريم

Insert Image

التالية النافذة ستظهر الصورة اختيار :وبعد

27

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

.:3صورة بالصور المتعلقة الوصول قابلية خصائص

صورة في الموجودة :3الخيارات التالي تعني

:Alternative Text البديل النص لوضع. للصورة والمكافئ

Long description :المستخدمة الصورة كانت إذامثال البيانية كالصور طويل لوصف وتحتاج معقدة

رابط وإضافة مستقلة صفحة في وصفها فيمكن. المحدد المكان في الصفحة تلك

إن مفيدة ْأما معلومات أي تحمل ال الصورة كانتالنص البديل وضع فيمكن لها معنى G يوال فارغا لها

(Alt)""=.

الجداول( Tables) :

28

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

نافذة )  تظهر في كما للجدول الوصول قابلية خصائصبعد( 5 صورة

يلي : كما الجدول إدراج

Insert table

فئتين و إلى الجداول تصنيف رئيسيتين:يمكن

قابلة :التصميمجداول مواقع على للحصولالجداول من النوع هذا عن االبتعاد يجب للوصول

من بد وال الصفحة بتصميم للتحكم >ستخدم ت التيخصائص باستخدام .CSSاستبدالها

البيانات البد: جداول البيانات جداول إنشاء قبلالشاشة قارئات تعامل كيفية في G أوال التفكير من

و Gمعها، لألعمدة البد أيضا عناوين تحديد من ( بالمجال تسمى لتمكين( scopeوالصفوف

ومفهومة صحيحة بصورة قارئات قراءتها قnبل منللجدول عنوان بإضافة كذلك وينصح الشاشة

. لمحتواه قصير وملخص

29

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الخاصة : 5صورة الوصول قابلية خصائص أهمبالجداول.

التشعبية اإلرتباطات( Hyperlinks) :إدراج معنى اإلرتباطاتعند كمال من التأكد من البد

" " كما ، هنا أنقر مثل المبهمة الكلمات وتجنب الرابطتوفير للروابط اختصاراتيجب المفاتيح المهمة،لوحة

الوصول كما لإلرتباطاتويمكن يلي:وإدراجها

30

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

Insert Hyperlink

االرتباطات: 6صورة خصائص .التشعبيةأهم

اإلطاراتFrames)) :لكل G مالئما G اسما تحديد من البد اإلطارات إدراج عند

ليتم .قراءتهاإطار الشاشة قارئات بواسطة

31

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

المتعلقة : 7صورة الوصول قابلية خصائص أهمباإلطارات.

32

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

عملي تطبيق

قابلة ويفر بالدريم صفحة إنشاءللوصول

البدء قبل اإلشارة من قابلة في البد صفحات تصميمبضرورة عن اإلهتمامللوصول البصري التنسيق بفصل

محتوى التأكد ، HTML بناء يجب Gكما إدراج أيضا من. للقراءة المطلوب أو الصحيح بالترتيب العناصر

للوصول قابلة صفحة إنشاء خطواتويفر بالدريم

من .1 بد ال ويفر الدريم برنامج مع بالعمل البدء عندتم وهنا خاللها، من الصفحة عمل المراد اللغة تحديد

رقم HTML اختيار الصورة في موضح هو .8كماال في رقم أما التي 9 صورة الكود واجهة لنا فتظهر

يمكنك كما المختارة اللغة تحديد بعد G ستظهر ايضا

33

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

والتصميم الكود أو للصفحة الخارجي التصميم رؤية.G معا

لبرمج : 8صورة المستخدمة اللغة تحديد واجهة. ويفر الدريم برنامج فتح عند تظهر ، الموقع

34

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

والتصميم الكود عرض خيارات

الدريم : 9صورة في الكود بكتابة الخاصة الواجهةويفر .

35

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

تشعبية أ. روابط إضافة

أشير ، كما G الصحيح مسبقا الترتيب مراعاة ينبغيالمثال ولنفرض للقراءة، سيتوجب أن قراءة الحالي

G أوال إدراجه سيتم ولذلك G أوال الصفحة خيارات قائمةخالل:من

Insert hyperlink

تعبئة ومن الصورة ثم في كما بها الخاص النموذجرقم 10رقم الصورة في ذلك يظهر كما وإدراجها

11.

36

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

بإدراج :10صورة الخاص و تشعبي، ارتباطالنموذجلهذا الوصول قابلية .االرتباطخصائص

متصفح : 11صورة على تظهر الويب صفحة. التشعبية الروابط إليها G مضافا الفايرفوكس

37

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

نصي ب. حقل إضافةنصي حقل إدراج باختيار يتم الرئيسية القائمة من

:التالي

Insert Form Text box

له الوصول بقابلية الخاص النموذج نمأل ثم: التاليين الشكلين في كما وإدراجه

حقل: 12صورة بإضافة الخاص نصي،النموذجالوصول قابلية له.وخصائص

38

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

متصفح : 13صورة على تظهر الويب صفحة. النصية الحقول إضافة بعد الفايرفوكس

39

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

صورة ت. إضافةيلي كما صورة إدراج :يتم

Insert image

لها الوصول بقابلية الخاص النموذج نمأل ثم: التاليين الشكلين في كما وإدراجها

قابلية: 14صورة خصائص من للصور البديل النصالوصول.

40

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

الصورة : 15صورة المتصفح، على الويب صفحة. البديل النص إليها G ومضافا

نص ث. إضافة: يلي كما النص إضافة يتم

insert html text objects paragraph

طريق عن يكون فسوف النص تنسيق .CSSأ̀ما

41

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

G: 16صورة مضافا ، المتصفح على الويب صفحة. نص إليها

42

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

ع سريعة الصفحة لى نظرة محتوى تنسيقمن البد الصفحة بتنسيق البدء تصميم عن اإلبتعادعند

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

أو نافذة المستخدمة حجم العرض.حتى

بمعنى المئوية بالنسب الصفحة تخطيط Gبداية ينبغيمن جزء كل أبعاد كما تحديد الشكل الصفحة في

التالي:

43

100%

60%

30%

30% 100%

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

.17صورة ويب : صفحة أبعاد وتحديد تخطيط

وتنسيق الصفحة محتويات بتحريك نبدأ ذلك وبعدمن األلوان خصائص والخلفيات على cssخالل منها

المثال .marginو floatسبيل

.18صورة للصفحة: النهائي الشكل توضح صورة

44

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

تطبيقي تدريب

:الهدف

ل فعلي قابلية األقواعد لتطبيق لتحقيق ساسيةالوصول.

قابلية تطبيق وسهولة أهمية على التعرف. للمواقع الوصول

المطلوب:

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

. أخرى عناصر تحوي للوصول قابلة ثم صفحة ومن. للوصول لقابليته النهائي الموقع اختبار

:المطلوبةالخطوات

لصفحتك .3أضيفي .1 مناسبة تشعبية ارتباطاتوقومي .2 صفحتك في إرفاقه تودين نموذج حددي

قابلية خصائص Gمراعية الوصول.بإدراجهالمالئم يحددثم صورةدرجي ا.3 النصي الوصف

لها.

45

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

من .4 جنيتيها فائدتين أهم يحوي نص أضيفياليوم . وجودها تمنيتي ونقطتين اليوم، حضورك

قابلية ا.5 مبادئ من ثالثة يحوي جدول درجيسابقا المذكورة هذه Gالوصول في تطبيقها ومدى

في ،الصفحة :الجدولكما التالي

)ال/ نعم) تطبيقه مدىالمبدأ

أحد اخت .6 باستخدام لموقعك الوصول قابلية بريصفحة في إليها المشار .13األدوات

46

قابلة عربية ويب مواقع نحواالحتياجات لذوي للوصول

الخاصة

تدريبية حقيبة

والمصادر المراجع

العربية: المراجع

القياسية [1] . 2009 )المعايير على(. متوفرة العربية ويكبيديا موسوعةاإلنترنت .شبكة

http://ar.wikipedia.org/wiki/ القياسية _ المعايير

الشافعي محمود صالح ,تصميم مواقع االنترنت التفاعلية دريم [2] .1427 ، الدار السعودية 8ويفر

األجنبية: المراجع

]3[ Usability first website Located on the Internet at http://www.usabilityfirst.com/accessibility/principles.txl . Last visited 1 March, 2009.

]4[ W3C website Located on the Internet at http://www.w3.org/TR/WCAG10/ . Last visited 1 March, 2009.

]5[ WebAIM Located on the Internet at http://www.webaim.org/techniques/dreamweaver . Last visited: 4 March, 2009.

47