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

1. 1
‫الرقمي‬ ‫النفاذ‬
‫تقديم‬
‫الغنامي‬ ‫مبارك‬ ‫بن‬ ‫سعيد‬
‫ومستشار‬ ‫مشاريع‬ ‫مدير‬
‫واالتصال‬ ‫التصميم‬ ‫مجال‬ ‫في‬
ghannamisaeed
‫المؤسسية‬ ‫والهوية‬

2. 2
‫المحاضر‬ ‫عن‬ ‫نبذة‬
‫الرقمي‬ ‫بالنفاذ‬ ‫اإللتزام‬ ‫في‬ ‫معتمد‬ ‫محترف‬
Professional Certificate in Web Accessibility Compliance
2017 ،)MediaAccess( ‫أستراليا‬ ‫أكسس‬ ‫وميديا‬ ‫أستراليا‬ ‫ساوث‬ ‫جامعة‬
)‫الرقمية‬ ‫(البيئات‬ ‫المعلومات‬ ‫تقنية‬ ‫في‬ ‫ماجستير‬
2016 ،‫أستراليا‬ ،‫للتقنية‬ ‫كوينزالند‬ ‫جامعة‬
‫العملية‬ ‫الخبرة‬
‫واالعالم‬ ‫العامة‬ ‫العالقات‬ - ‫الفعاليات‬ - ‫التصميم‬
‫مستشار‬ • ‫حسابات‬ ‫مدير‬ • ‫م‬‫مصم‬ •
‫مشاريع‬ ‫مدير‬ • ‫عمليات‬ ‫مدير‬ • ‫مبرمج‬ •
‫ثقافي‬ ‫مترجم‬ •
20042017

3. 3
‫المشاريع‬
‫معها/بها‬ ‫عملت‬ ‫التي‬ ‫الجهات/المشاريع‬ ‫بعض‬

4. 4
‫المحتوى‬• ‫حقائق‬
• ‫اإلعاقة‬
• ‫الرقمي‬ ‫النفاذ‬
• UX ‫المستخدم‬ ‫تجربة‬
• ‫الهوية‬
• ‫األلوان‬ ‫تباين‬
• ‫النصي‬ ‫المحتوى‬
• ‫تحديات‬
• ‫نصائح‬

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

6. 6
‫حقائق‬
‫المتحدة‬ ‫بالواليات‬ ‫منها‬ ‫والوقاية‬ ‫األمراض‬ ‫مكافحة‬ ‫مراكز‬ ‫لتقرير‬ ‫طبقًا‬
‫ذو‬ ‫الشخص‬ ،Centers for Disease Control and Prevention (CDC( ‫األمريكية‬
:‫في‬ ‫صعوبات‬ ‫لديه‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫اإلعاقة‬
‫السمع‬ • ‫التذكر‬ • ‫الرؤية‬ •
‫النفسية‬ ‫الصحة‬ • ‫التعلم‬ • ‫الحركة‬ •
‫االجتماعيه‬ ‫العالقات‬ • ‫التواصل‬ • ‫التفكير‬ •

7. 7
‫حقائق‬
‫العالم‬ ‫في‬ ‫إعاقة‬ ‫لديه‬ ‫شخص‬ ‫مليار‬ ١.٣ – ١ •
)٢٠١١ ‫عام‬ ‫المتحدة‬ ‫األمم‬ ‫(إحصائيات‬
‫مليار‬ ١.٣٩ ،٢٠١٤ ‫عام‬ ‫في‬ ‫الصين‬ ‫تعداد‬ ‫تقريبا‬ ‫يساوي‬ ‫العدد‬ ‫هذا‬
‫٩.٨١٣مليون‬ ،٢٠١٤ ‫عام‬ ‫في‬ ‫األمريكية‬ ‫المتحدة‬ ‫الواليات‬ ‫مرات‬ ‫أربع‬ ‫تعداد‬ ‫ويساوي‬
‫األمريكية‬ ‫المتحدة‬ ‫المملكة‬ ‫في‬ ‫شخص‬ ‫مليون‬ ٢ •
2009 Access Economic ‫البصر‬ ‫فقدان‬ ‫أعراض‬ ‫بعض‬ ‫لديه‬
‫األلوان‬ ‫عمى‬ ‫أعراض‬ ‫بعض‬ ‫لديهم‬ ‫الرجال‬ ‫من‬ ٪١٠ ‫من‬ ‫أكثر‬ ‫عالميا‬ •
‫األلوان‬ ‫عمى‬ ‫لديهم‬ ‫النساء‬ ‫من‬ ‫شخص‬ ٢٠٠ ‫لكل‬ ١ ‫و‬ ‫الرجال‬ ‫من‬ ‫شخص‬ ١٢ ‫لكل‬ ١
‫بصر‬ ‫ضعف‬ ‫لديهم‬ ‫أشخاص‬ ٣ ‫لكل‬ ١
‫البصر‬ ‫فاقدي‬ ‫شخص‬ ١٩٩ ‫لكل‬ ١

8. 8
‫حقائق‬
‫من‬ ‫كبيرة‬ ‫نسبة‬ ‫بأن‬ ‫الدراسة‬ ‫نتائج‬ ‫تفيد‬ ‫األنترنت‬ ‫في‬ ‫األشتراك‬ ‫يخص‬ ‫فيما‬ ‫أما‬
‫جملة‬ ‫من‬ %64 ‫نسبتهم‬ ‫بلغت‬ ‫حيث‬ ،‫األنترنت‬ ‫في‬ ‫أشتراك‬ ‫لديهم‬ ‫المعاقين‬
.‫األناث‬ ‫من‬ %29‫و‬ ‫الذكور‬ ‫من‬ %35 ‫منهم‬ ‫المعاقين‬
‫األنترنت‬ ‫استخدام‬ ‫على‬ ‫القدرة‬ ‫لديهم‬ ‫ليست‬ ‫المعاقين‬ ‫غالبية‬ ‫أن‬ ‫ويتضح‬
‫على‬ ‫قدرة‬ ‫لديهم‬ ‫الذين‬ ‫أما‬ ‫المعاقين‬ ‫جملة‬ ‫3,48%من‬ ‫نسبتهم‬ ‫بلغت‬ ‫حيث‬
.‫المعاقين‬ ‫جملة‬ ‫من‬ ‫فقط‬ %13,3 ‫نسبتهم‬ ‫فكانت‬ ‫األنترنت‬ ‫أستخدام‬
2015 ‫يوليو‬ 11 - ‫الوطن‬ ‫جريدة‬

9. 9
‫الرقمي‬ ‫النفاذ‬
‫واجتماعيًا‬ ‫ثقافيا‬ ‫حياتنا‬ ‫في‬ ‫األكبر‬ ‫المؤثر‬ ‫هو‬ ‫اآلن‬ ‫يعتبر‬ ‫اإلنترنت‬
‫على‬ ‫كلي‬ ‫شبه‬ ‫بشكل‬ ‫يعتمد‬ ‫وتفاعلنا‬ ‫تواصلنا‬ .‫وتجاريًا‬ ‫وسياسيًا‬
.‫اإلنترنت‬
‫مهمة‬ ‫تواريخ‬
• ١٩٩٦ ‫خريف‬ )World Wide Web Consortium W3C( ‫العالمية‬ ‫الشبكة‬ ‫رابطة‬
• ‫فبراير‬ ١٩٩٧ ‫عام‬ )Web Accessibility Initiative WAI( ‫الرقمي‬ ‫النفاذ‬ ‫مبادرة‬
• ،‫أدوبي‬ ،‫جوجل‬ ‫مثل‬ ‫واالتصاالت‬ ‫المعلومات‬ ‫تقنية‬ ‫عمالقة‬ ‫من‬ ‫كبير‬ ‫دعم‬ ‫حصلت‬ WAI
.‫بي‬ ‫هتش‬ ،‫أم‬ ‫بي‬ ‫آي‬ ،‫أبل‬ ،‫مايكروسوفت‬

10. 10
‫الرقمي‬ ‫النفاذ‬
‫تعريف‬
،‫والخدمات‬ ‫واألجهزة‬ ‫المنتجات‬ ‫تصميم‬ ‫إلى‬ ‫عام‬ ‫بوجه‬ ‫الرقمي‬ ‫النفاذ‬ ‫يشير‬
‫الصحة‬ ‫لمنظمة‬ ‫ووفقًا‬ .‫االعاقة‬ ‫ذوي‬ ‫من‬ ‫لألشخاص‬ ‫المناسبة‬ ‫البيئة‬ ‫توفير‬ ‫أو‬
‫استخدام‬ ‫سهولة‬ ‫إلى‬ )Web Accessibility( ‫الرقمي‬ ‫النفاذ‬ ‫يشير‬ ،‫العالمية‬
‫األشخاص‬ ‫بواسطة‬ ‫وذلك‬ ،‫اإلنترنت‬ :‫مثل‬ ،‫واالتصاالت‬ ‫المعلومات‬ ‫تكنولوجيا‬
.‫االعاقة‬ ‫ذوي‬ ‫من‬

11. 11
‫الرقمي‬ ‫النفاذ‬
‫وموائمتها‬ ‫الرقمي‬ ‫بالنفاذ‬ ‫الخاصة‬ ‫واإلرشادات‬ ‫المعايير‬ ‫تحديد‬ ‫تم‬ ‫وقد‬
‫ذوي‬ ‫من‬ ‫لألشخاص‬ ‫الرقمي‬ ‫اإلدماج‬ ‫لتعزيز‬ ‫العالم‬ ‫أنحاء‬ ‫جميع‬ ‫في‬
،‫عصبية‬ ‫أو‬ ،‫إدراكية‬ ‫أو‬ ،‫سمعية‬ ‫إعاقات‬ ‫من‬ ‫يعانون‬ ‫من‬ ‫ذلك‬ ‫ويشمل‬ ،‫االعاقة‬
.‫دائم‬ ‫أو‬ ‫وقتي‬ ‫بصري‬ ‫عجز‬ ‫أو‬ ،‫بالكالم‬ ‫عجز‬ ‫أو‬ ،‫جسدية‬ ‫أو‬
:‫عالميا‬ ‫المستخدمة‬ ‫المعايير‬
• Web Content Accessibility Guidelines (WCAG) 2.0
• U.S. government’s Section 508 Standards

12. 12
‫الرقمي‬ ‫النفاذ‬
UX ‫المستخدم‬ ‫وتجربة‬
‫الرقمي‬ ‫النفاذ‬
‫االستخدام‬ ‫قابلية‬
Usability
‫المستخدم‬ ‫تجربة‬
User Experience UX

13. 13
‫الرقمي‬ ‫النفاذ‬
WCAG 2.0
Principles
Guidelines
Success Criteria
A, AA, AAA

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

15. 15
‫الرقمي‬ ‫النفاذ‬
‫المؤسسية‬ ‫والهوية‬
:‫خالل‬ ‫من‬ ً‫ال‬‫سه‬ ‫إليها‬ ‫الوصول‬ ‫نفاذ‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫الهوية‬
‫األلوان‬ ‫تباين‬ •
‫األشكال‬ •
‫الموقع‬ •
‫النصي‬ ‫المحتوى‬ •
:‫للهوية‬ ‫الرقمي‬ ‫النفاذ‬ ‫فائدة‬
‫المستخدمين‬ ‫من‬ ‫أكبر‬ ‫لشريحة‬ ‫الوصول‬ •
‫دائم‬ ‫تناسق‬ •
‫التطبيق‬ ‫سهولة‬ •
‫أكثر‬ ‫متابعين/معجبين‬ •
‫مالي‬ ‫توفير‬ •

16. 16

17. 17

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

19. 19
‫األلوان‬ ‫تباين‬
:‫الواجهات‬ ‫خالل‬ ‫من‬ ‫المعلومات‬ ‫عرض‬ ‫في‬ ً‫عامة‬ ‫األلوان‬ ‫تستخدم‬
‫المعروضة‬ ‫البيانات‬ ‫بين‬ ‫لتمايز‬ ‫البيانية‬ ‫الرسومات‬ •
‫األقسام‬ ‫بين‬ ‫لتمايز‬ ‫اإللكترونية‬ ‫المواقع‬ •
‫اإللكترونية‬ ‫التطبيقات‬ ‫قوائم‬ ‫في‬ ‫معين‬ ‫عنصر‬ ‫لتمييز‬ •
‫إليها‬ ‫االنتباه‬ ‫لشد‬ ‫الملونة‬ ‫األزرار‬ •

20. 20
‫األلوان‬ ‫تباين‬
WCAG 2.0 ‫معايير‬
.‫الخلفية‬ ‫عن‬ ‫المقدمة‬ ‫فصل‬ ‫مع‬ ‫المحتوى‬ ‫وسماع‬ ‫رؤية‬ ‫المستخدم‬ ‫على‬ ‫تسهل‬ ‫أن‬ ‫يجب‬
Guideline 1.4 Distinguishable: Make it easier for users to see and hear content
including separating foreground from background.

21. 21
‫األلوان‬ ‫تباين‬
WCAG 2.0 ‫معايير‬
‫عرض‬ ‫أو‬ ،‫إلجراء‬ ‫إشارة‬ ‫أو‬ ،‫المعلومة‬ ‫لنقل‬ ‫وحيدة‬ ‫مرئية‬ ‫كوسيلة‬ ‫يستخدم‬ ‫ال‬ ‫اللون‬
.‫مرئي‬ ‫عنصر‬ ‫تمييز‬ ‫أو‬ ،‫استجابة‬
1.4.1 Use of Color: Color is not used as the only visual means of conveying
information, indicating an action, prompting a response, or distinguishing a visual
element. (Level A)

22. 22

23. 23

24. 24

25. 25
‫األلوان‬ ‫تباين‬
WCAG 2.0 ‫معايير‬
٤.٥:١ ‫عن‬ ‫يقل‬ ‫ال‬ ‫بها‬ ‫التباين‬ ‫معدل‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫نص‬ ‫على‬ ‫تحتوي‬ ‫التي‬ ‫والصور‬ ‫النص‬
‫الكبيرة‬ ‫النصوص‬ ‫بإستثناء‬
‫أعلى‬ ‫أو‬ ‫العريض‬ ‫بالخط‬ ‫نقطة‬ ١٤ ‫أو‬ ‫طبيعي‬ ‫نقطة‬ ١٨ ‫يساوي‬ ‫النص‬ ‫حجم‬ ‫أن‬ ‫حالة‬ ‫في‬ ‫أما‬
٣:١ ‫عن‬ ‫يقل‬ ‫ال‬ ‫التباين‬ ‫معدل‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫عندها‬
If your website is WCAG 2.0 Level AA compliant, you must meet minimum contrast
requirements outlined in Success Criterion 1.4.3: Contrast (minimum):
1. Text and images of text must have a contrast ratio of at least 4.5:1 except for
large text.
2. Large text that is 18pt normal or 14pt bold or larger must have a colour ratio of
at least 3:1.

26. 26
‫األلوان‬ ‫تباين‬
‫األلوان‬ ‫عمى‬
)‫األلوان‬ ‫(عمى‬ ‫النظر‬ ‫في‬ ‫القصور‬ ‫أعراض‬ ‫بعض‬
• :Deuteranopia ‫ديوترانوبيا‬
‫اللون‬ ‫إلى‬ ‫مائل‬ ‫ويكون‬ ‫األلوان‬ ‫عمى‬ ‫ذوى‬ ‫األشخاص‬ ‫بين‬ ‫الشائع‬ ‫وهو‬ ‫األخضر‬ ‫اللون‬ ‫في‬ ‫قصور‬
.‫ما‬ ‫نوعا‬ ‫الرمادي‬
• :Protanopia ‫بروتانوبيا‬
.‫األحمر‬ ‫من‬ ‫قريب‬ ‫األخضر‬ ،‫الغامق‬ ‫البيج‬ ‫إلى‬ ‫مائل‬ ‫يظهر‬ :‫األحمر‬ ‫اللون‬ ‫في‬ ‫قصور‬
• :Tritanopia ‫تريتانوبيا‬
‫شائع‬ ‫غير‬ ‫العرض‬ ‫هذا‬ ،‫األخضر‬ ‫اللون‬ ‫وبين‬ ‫بينه‬ ‫الخلط‬ ‫لدرجة‬ ‫األزرق‬ ‫اللون‬ ‫في‬ ‫قصور‬
• :Achromatopsia ‫أكروماتوبسيا‬
‫ويعتبروا‬ ،‫بالظل‬ ‫بينها‬ ‫يمايزوا‬ ‫فقط‬ ‫لون‬ ‫لو‬ ‫أي‬ ‫يرون‬ ‫ال‬ ‫أنهم‬ ‫لدرجة‬ ‫األلوان‬ ‫جميع‬ ‫في‬ ‫قصور‬
.‫قليلة‬ ‫جدًا‬ ‫فئة‬ ‫العرض‬ ‫هذا‬ ‫أصحاب‬
https://webaim.org/articles/visual/colorblind

27. 27
‫األلوان‬ ‫تباين‬
Manual Simulators ‫اليدوية‬ ‫المحاكاة‬ ‫أدوات‬
PayPal ‫بال‬ ‫بي‬ ‫بشركة‬ ‫األلوان‬ ‫رؤية‬ ‫لتجربة‬ ‫معرض‬

28. 28
‫األلوان‬ ‫تباين‬
Manual Simulators ‫اليدوية‬ ‫المحاكاة‬ ‫أدوات‬
‫تجربة‬

29. 29

30. 30
‫األلوان‬ ‫تباين‬
Manual Simulators ‫اليدوية‬ ‫المحاكاة‬ ‫أدوات‬
‫تجربة‬
gradient

31. 31
‫األلوان‬ ‫تباين‬
Software Simulators ‫اإللكترونية‬ ‫المحاكاة‬ ‫أدوات‬
‫اختبار‬ ‫في‬ ‫المستخدمة‬ ‫اإللكترونية‬ ‫األدوات‬
:‫الهاتف‬ ‫تطبيقات‬ ‫باستخدام‬ ‫األلوان‬ ‫تباين‬
Chromatic Vision Simulator •
)iOS ‫أس‬ ‫أو‬ ‫آي‬ ‫و‬ Android ‫(أندرويد‬
VisionSim •
)Android ‫أندرويد‬ ‫أنظمة‬ ‫على‬ ‫متوفر‬ ‫(غير‬

32. 32
‫األلوان‬ ‫تباين‬
Software Simulators ‫اإللكترونية‬ ‫المحاكاة‬ ‫أدوات‬
‫تمرين‬

33. 33
‫األلوان‬ ‫تباين‬
Software Simulators ‫اإللكترونية‬ ‫المحاكاة‬ ‫أدوات‬
‫تمرين‬

34. 34
‫األلوان‬ ‫تباين‬
Color Contrast Checking ‫األلوان‬ ‫تباين‬ ‫فحص‬
ColorSafe.co
http://colorsafe.co :‫رابط‬
Colour Contrast Analyser
https://developer.paciellogroup.com/resources/contrastanalyser :‫رابط‬
Colorable
http://jxnblk.com/colorable/demos/text :‫رابط‬
‫األلوان‬ ‫اختيار‬ ‫عملية‬ ‫في‬ ‫خطوة‬ ‫أول‬ ‫التطبيقات‬ ‫هذا‬ ‫أجعل‬

35. 35
‫األلوان‬ ‫تباين‬
Color Contrast Checking ‫األلوان‬ ‫تباين‬ ‫فحص‬
‫تمرين‬
• ColorSafe.co
• Colour Contrast Analyser
• Colorable

36. 36
‫النصي‬ ‫المحتوى‬
‫ومفهوم‬ ‫مقروء‬ ‫النص‬ ‫محتوى‬ ‫اجعل‬
Guideline 3.1: Make text content readable and understandable.

37. 37
‫النصي‬ ‫المحتوى‬
‫المحتوى‬ ‫وسياق‬ ‫اللغة‬
‫لغة‬ ‫استخدام‬ ‫ويفضل‬ ،‫الجمهور‬ ‫بين‬ ‫المستخدمة‬ ‫اللغات‬ ‫جميع‬ ‫استخدم‬
)Guideline 3.1.5( ‫الجمهور‬ ‫فئات‬ ‫جميع‬ ‫من‬ ‫الفهم‬ ‫سهل‬ ‫مخاطبة‬

38. 38
‫النصي‬ ‫المحتوى‬
‫التسمية‬
‫قارئي‬ ‫بأجهزة‬ ‫وخاصة‬ ‫التسمية‬ ‫وفهم‬ ‫قراءة‬ ‫إمكانية‬ ‫إلى‬ ‫االنتباه‬ ‫يرجى‬
.IBM, SQU ‫مثل‬ ‫االختصارات‬ ‫استخدام‬ ‫حالة‬ ‫وفي‬ ‫الشاشة‬
.‫النطق‬ ‫على‬ ‫اعتمادا‬ ‫أخرى‬ ‫إلى‬ ‫التسمية‬ ‫كتابة‬ ‫حالة‬ ‫في‬ ‫كذلك‬
‫ستتعرف‬ ‫التالية‬ ‫البرامج‬ ‫فإن‬ ‫شهير‬ ‫التسمية‬ ‫في‬ ‫المستخدم‬ ‫االختصار‬ ‫إذا‬
:‫بسهولة‬ ‫عليها‬
Google Now
Siri
JAWS

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

40. 40

41. 41

42. 42
‫النصي‬ ‫المحتوى‬
‫الخطوط‬ ‫نوعية‬
‫ذوي‬ ‫األشخاص‬ ‫بواسطة‬ ‫القراءة‬ ‫سهلة‬ ‫لتكون‬ ‫تصميمها‬ ‫تم‬ ‫الخطوط‬ ‫بعض‬
.‫القراءة‬ ‫وعسر‬ )‫والتفكير‬ ‫الذاكرة‬ ‫في‬ ‫(قصور‬ ‫اإلدراكية‬ ‫اإلعاقة‬
‫الجمهور‬ ‫من‬ ‫شريحة‬ ‫أكبر‬ ‫مع‬ ‫تتناسب‬ ‫التي‬ ‫الخطوط‬ ‫استخدام‬ ‫يفضل‬ ‫ولهذا‬
)San Serif ‫خطوط‬ ‫(مثل‬

43. 43
‫النصي‬ ‫المحتوى‬
‫الخطوط‬ ‫نوعية‬
‫لخط‬ ‫المشابهة‬ ‫الخطوط‬ ‫استخدام‬ ‫يفضلوا‬ ‫المصممين‬ ‫بعض‬
‫الصغيرة‬ ‫العمرية‬ ‫الفئة‬ ‫مع‬ ‫تتناسب‬ ‫ألنها‬ Comic Sans
Comic Sans

44. 44
‫النصي‬ ‫المحتوى‬
‫الكبيرة‬ ‫األحرف‬
‫بسبب‬ ‫وذلك‬ ‫اإلنجليزية‬ ‫اللغة‬ ‫في‬ ‫الكبيرة‬ ‫األحرف‬ ‫استخدام‬ ‫تجنب‬ ‫حاول‬
.‫الشاشة‬ ‫قارء‬ ‫برامج‬ ‫قبل‬ ‫من‬ ‫خاطئة‬ ‫بطريقة‬ ‫قراءتها‬ ‫احتمالية‬
ABCDEFG

45. 45
‫النصي‬ ‫المحتوى‬
‫الخطوط‬ ‫تصغير‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬
‫حجمها‬ ‫تصغير‬ ‫عند‬ ‫بسهولة‬ ‫قراءتها‬ ‫تعني‬ ‫ال‬ ‫قراءة‬ ‫األكثر‬ ‫الخطوط‬ ‫بأن‬ ‫تأكد‬

46. 46
‫النصي‬ ‫المحتوى‬
‫والفقرات‬ ‫العناوين‬
‫وهذا‬ ‫للجمهور‬ ‫ظاهر‬ ‫يكون‬ ‫أن‬ ‫يفضل‬ ‫الفقر‬ ‫عناصر‬ ‫بين‬ ‫واالختالف‬ ‫الترابط‬
.‫الشاشة‬ ‫قارئ‬ ‫على‬ ‫كذلك‬ ‫ينطبق‬
‫العالقة‬ ‫تعكس‬ ‫أن‬ ‫يجب‬ ‫األخرى‬ ‫والعناصر‬ ‫النص‬ ‫بين‬ ‫البصرية‬ ‫العالقة‬
.‫بينهم‬ ‫الحقيقية‬
• ‫العنوان‬
• )‫الهوية‬ ‫في‬ ‫اللفظي‬ ‫(الشعار‬ ‫الفقرة‬
‫خالل‬ ‫من‬ ‫يترجم‬ ‫أن‬ ‫يجب‬ ‫وعليه‬ ‫الفقرة‬ ‫من‬ ‫أكثر‬ ‫أهمية‬ ‫ذا‬ ‫العنوان‬ ‫يعتبر‬
.‫والموقع‬ ‫الحجم‬

47. 47
‫النصي‬ ‫المحتوى‬
‫والفقرات‬ ‫العناوين‬
‫الجامعة‬ ‫في‬ ‫البحثية‬ ‫المراكز‬
‫بحوث‬ - ‫عامة‬ ‫نظرة‬
‫البحثية‬ ‫وخبراتها‬ ‫الجامعة‬ ‫في‬ ‫البحثية‬ ‫المراكز‬ ‫تجارب‬ ‫استعراض‬ ‫إلى‬ ‫الفعالية‬ ‫تهدف‬
‫ومد‬ ،‫السلطنة‬ ‫في‬ ‫التنموية‬ ‫المشاريع‬ ‫احتياجات‬ ‫وتلبية‬ ‫والمجتمع‬ ‫البيئة‬ ‫خدمة‬ ‫في‬
‫المؤسسات‬ ‫ا‬ ً‫تحديد‬ ،‫والخاص‬ ‫العام‬ ‫القطاعين‬ ‫مؤسسات‬ ‫مع‬ ‫التعاون‬ ‫وآفاق‬ ‫جسور‬
‫الخطط‬ ‫واقع‬ ‫على‬ ‫الوقوف‬ ‫إلى‬ ‫كذلك‬ ‫الفعالية‬ ‫وتهدف‬ .‫والخدمية‬ ‫الصناعية‬
‫التي‬ ‫المتنوعة‬ ‫البحثية‬ ‫والمشروعات‬ ،‫المراكز‬ ‫تلك‬ ‫تتبناها‬ ‫التي‬ ‫البحثية‬ ‫واالستراتيجيات‬
‫العام‬ ‫للقطاعين‬ ‫تقدمها‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫والخدمات‬ ‫والموارد‬ ،‫تنفيذها‬ ‫على‬ ‫تحرص‬
.‫والخاص‬
،‫األعمال‬ ‫وسيدات‬ ‫ورجال‬ ،‫المجتمع‬ ‫أفراد‬ ‫فيها‬ ‫بما‬ ‫متنوعة‬ ‫فئات‬ ‫الفعالية‬ ‫تستهدف‬
‫السلطان‬ ‫بجامعة‬ ‫واألكاديميون‬ ‫والباحثون‬ ‫والخريجون‬ ،‫والسياسات‬ ‫القرار‬ ‫اع‬ّ‫ن‬‫وص‬
‫وممثلو‬ ،‫السلطنة‬ ‫في‬ ‫واألكاديمية‬ ‫والتعليمية‬ ‫العلمية‬ ‫المؤسسات‬ ‫من‬ ‫وغيرها‬ ‫قابوس‬
.‫الصناعة‬ ‫قطاع‬ ‫مؤسسات‬

48. 48
‫استراتيجية‬
‫الرقمي‬ ‫النفاذ‬ ‫تضمين‬
‫التصميم‬ ‫عملية‬ ‫في‬

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

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

51. 51
‫الرقمي‬ ‫النفاذ‬ ‫تضمين‬ ‫استراتيجية‬
‫التصميم‬ ‫عملية‬ ‫في‬
‫واالختبار‬ ‫للتفكير‬ ‫العمل‬ ‫فريق‬ ‫مع‬ ‫الجلوس‬
• ‫بها‬ ‫نقوم‬ ‫التي‬ ‫الطريقة‬ ‫بنفس‬ ‫الهوية‬ ‫مع‬ ‫اآلخرون‬ ‫يتفاعل‬ ‫ال‬ ‫كيف‬ ‫فهم‬
• ‫الهوية‬ ‫مع‬ ‫الناس‬ ‫بها‬ ‫يتفاعل‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫الطرق‬ ‫من‬ ‫العديد‬ ‫فهم‬
‫أفضل‬ ‫بشكل‬ ‫احتياجاتهم‬ ‫تلبية‬ ‫وكيفية‬

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

53. 53
‫التحديات‬
‫الرقمي‬ ‫النفاذ‬ ‫ربط‬ ‫في‬
‫التصميم‬ ‫عملية‬ ‫في‬
‫عدم‬ ‫في‬ ‫تساهم‬ ‫التي‬ ‫التحديات‬ ‫أن‬ ‫إلى‬ ‫أشارت‬ ‫الدراسات‬ ‫معظم‬
:‫بسبب‬ ‫هي‬ ‫الرقمي‬ ‫النفاذ‬ ‫معايير‬ ‫إلى‬ ‫الوصول‬
• ‫والعميل‬ ‫المصممين‬ ‫بين‬ ‫التواصل‬ ‫ضعف‬
• ‫النفاذ‬ ‫معايير‬ ‫بتطبيق‬ ‫سيقومون‬ ‫المصممين‬ ‫أن‬ ‫على‬ ‫كليا‬ ‫العميل‬ ‫اعتماد‬
‫الرقمي‬
• ‫الجانب‬ ‫هذا‬ ‫في‬ ‫المصممين‬ ‫لدى‬ ‫معرفي‬ ‫قصور‬
• ‫اإللكترونية‬ ‫التطبيقات‬ ‫في‬ ‫وخاصة‬ ‫المعايير‬ ‫تطبيق‬ ‫تكلفة‬ ‫ارتفاع‬

54. 54
‫لكم‬ ‫شكرًا‬
‫باستفساراتكم‬ ‫نرحب‬

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

56. 56
‫الرقمي‬ ‫النفاذ‬
‫المؤسسية‬ ‫والهوية‬
‫بالنا‬ ‫في‬ ‫التالية‬ ‫النقاط‬ ‫وضع‬ ‫التصميم‬ ‫لعملية‬ ‫نخطط‬ ‫ونحن‬ ‫علينا‬ ‫يجب‬
‫اإلنترنت‬ ‫في‬ ‫متعدد‬ ‫استخدام‬ ‫لها‬ ‫سيكون‬ ‫الهوية‬ ‫تصميم‬ ‫بأن‬ ‫وهي‬ ‫أال‬
‫التواصل‬ ‫شبكات‬ ‫مثل‬ ‫الهوية‬ ‫من‬ ‫أجزاء‬ ‫استخدام‬ ‫األحيان‬ ‫بعض‬ ‫في‬ ‫يتطلب‬
.‫الهاتف‬ ‫تطبيقات‬ ‫رمزية‬ ‫أو‬ ‫االجتماعي‬
‫العناصر‬ ‫ببعض‬ ‫مرتبط‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫التطبيقات‬ ‫في‬ ‫والمظهر‬ ‫الشكل‬
‫في‬ ‫عليها‬ ‫التركيز‬ ‫يجب‬ ‫التي‬ ‫هي‬ ‫العناصر‬ ‫وهذه‬ ‫الهوية‬ ‫في‬ ‫األساسية‬
.‫الرقمي‬ ‫النفاذ‬ ‫معايير‬ ‫مطابقة‬

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

58. 58
‫المراجع‬
Branding, Accessibility and the NAC. (n.d.). Retrieved September 25, 2017, from http://
designedgecanada.com/blogs/branding-accessibility-and-the-nac/
Connor, C. O. (2014, October 22). Color Contrast And Why You Should Rethink It. Retrieved September
25, 2017, from https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-
accessibility/
Cornish, K., Goodman-Deane, J., Ruggeri, K., & Clarkson, P. J. (2015). Visual accessibility in graphic
design: A client–designer communication failure. Design Studies, 40, 176-195. doi:10.1016/j.
destud.2015.07.003
Decision - Corporate branding accessibility. (2017, May 09). Retrieved September 25, 2017, from http://
councillors.herefordshire.gov.uk/ieDecisionDetails.aspx?ID=4587
Hausler, J. (2015, April 15). 7 Things Every Designer Needs to Know about Accessibility. Retrieved
September 25, 2017, from https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-
about-accessibility-64f105f0881b
How can graphic design be more accessible for people with disabilities? (n.d.). Retrieved September
25, 2017, from https://graphicdesign.stackexchange.com/questions/15674/how-can-graphic-design-be-
more-accessible-for-people-with-disabilities

59. 59
‫المراجع‬
Kalbag, L. (2015, May 23). Accessibility. Retrieved September 25, 2017, from https://laurakalbag.com/
category/accessibility-2/
Mifsud, J., & About Justin MifsudI am a user interface designer and user experience consultant by day
and blogger by night. I own and run this blog, Usability Geek, where I evangelize about the importance
of making the web a usable place and, more importantly, how to do it. More about me. (2014, May 12).
The Difference between Web Site Usability and Accessibility. Retrieved September 25, 2017, from
https://usabilitygeek.com/the-difference-between-web-site-usability-and-accessibility/
Rapp, A. (2015, February 24). Accessible Interface Design – Salesforce UX – Medium. Retrieved
September 25, 2017, from https://medium.com/salesforce-ux/accessible-interface-design-
d80e95cbb2c1
Staff, C. B. (2015, January 23). A designer’s guide to colour and accessibility. Retrieved September 25,
2017, from http://www.creativebloq.com/web-design/designers-guide-colour-and-accessibility-11513946
I. (2016, May 10). The History of Web Accessibility. Retrieved September 25, 2017, from https://illyism.
com/journal/history-web-accessibility
Visual design and colour accessibility. (n.d.). Retrieved September 25, 2017, from https://www.
webcredible.com/blog/visual-design-and-colour-accessibility/

60. 60
‫المراجع‬
Web accessibility starts with your branding | Access iQ. (n.d.). Retrieved September 25, 2017, from
http://www.bing.com/cr?IG=BDC9A65C09684EC38EDE9D943F2374C8&CID=01E41EE323AA6B4F22A
215EB22AC6ABE&rd=1&h=jNP-H7-2V2UfYR9gDdDMpWzadUeywrsLbdKFXEFJex8&v=1&r=http%3a
%2f%2fwww.accessiq.org%2fnews%2ffeatures%2f2013%2f05%2fweb-accessibility-starts-with-your-
branding&p=DevEx,5064.1
W. (2017, May 28). What makes a Logo Design Successful? Retrieved September 25, 2017, from http://
inkbotdesign.com/what-makes-a-logo-design-successful/
Witko, K. (2017, September 19). Accessibility testing is your social responsibility
#AccessibilityTestingDoIT. Retrieved September 25, 2017, from https://kingatest.wordpress.
com/2017/09/19/accessibility-testing-is-your-social-responsibility-accessibilitytestingdoit/?utm_
source=feedburner&utm_medium=feed&utm_campaign=Feed%3A%2Bmottestingfeeds%2B%28Testing
%2BFeeds%2B-%2BBloggers%29
Witko, K. (2017, January 24). Accessibility testing. Retrieved September 25, 2017, from https://
kingatest.wordpress.com/2017/01/23/__trashed/
Zheng, R. (n.d.). Understand the Social Needs for Accessibility in UX Design. Retrieved September
25, 2017, from https://www.interaction-design.org/literature/article/understand-the-social-needs-for-
accessibility-in-ux-design