در این ارائه با انواع معلولیت های انسانها در هنگام کار با تکنولوژی و روشهای کمک به این افراد آشنا خواهید شد و یاد میگیرید چگونه محصول تحت وب یا اپ موبایلی طراحی کنید که برای نابینایان و سایر معلولین قابل استفاده باشد ویدیوی این ارایه را از سایت یو ایکس شیراز ۱۳۹۹ دریافت کنید

1. ‫ماشین‬‫و‬‫انسان‬‫برای‬‫پذیری؛‬‫دسترس‬
‫طراح‬
‫سداد‬‫ورزی‬‫داده‬‫محصول؛‬
(
‫ملی‬‫بانک‬
)
‫شرفی‬‫حسین‬
@macromediax
Hossein-Sharafi

2. #UXSHIRAZ
‫چیست؟‬‫معلولیت‬
‫اش‬‫روزمره‬‫کارهای‬ ‫انجام‬ ‫در‬ ‫را‬ ‫انسان‬ ‫که‬ ‫وضعیتی‬
‫محدودیتی‬‫یا‬ ‫مشکل‬ ‫دچار‬
‫کند‬
‫معلولیت‬‫انواع‬
•
‫دیداری‬ ‫معلولیت‬
(
‫کوررنگی‬،‫بینایی‬ ‫کم‬ ،‫نابینایی‬
)
•
‫شنیداری‬ ‫معلولیت‬
(
‫شنوایی‬ ‫کم‬ ،‫ناشنوایی‬
)
•
‫حرکتی‬ ‫معلولیت‬
(
‫پارکینسون‬ ،‫عضالنی‬ ،‫استخوانی‬ ‫مشکالت‬
)
•
‫ذهنی‬ ‫معلولیت‬
(
‫دیسکلکولیا‬ ،‫دیسلکسیا‬ ،‫اوتیسم‬
)

3. #UXSHIRAZ
‫جوامع‬ ‫در‬‫معلولیت‬ ‫آمار‬
•
‫دائمی‬
(
۱۵
‫جامعه‬ ‫افراد‬ ‫درصد‬
)
•
‫موقتی‬
(
۷۰
‫زندگی‬ ‫از‬ ‫ای‬‫دوره‬ ‫در‬ ‫جامعه‬ ‫افراد‬ ‫درصد‬
)
•
‫ای‬ ‫لحظه‬ ‫موقعیت‬ ‫به‬ ‫بسته‬
(
۱۰۰
‫درصد‬
)

4. #UXSHIRAZ
‫دیداری‬‫های‬‫ناتوانی‬
-
‫کوررنگی‬
‫بینید؟‬ ‫می‬‫ها‬ ‫دایره‬ ‫این‬ ‫داخل‬ ‫اعدادی‬ ‫چه‬
‫معلولیت‬ ‫انواع‬
>

5. #UXSHIRAZ
‫دیداری‬‫های‬‫ناتوانی‬
-
‫کوررنگی‬
‫یک‬ ‫برای‬ ‫مشاهده‬‫قابل‬ ‫نمونه‬
‫نابینا‬ ‫سبز‬
‫معلولیت‬ ‫انواع‬
>

6. #UXSHIRAZ
‫دیداری‬‫های‬‫ناتوانی‬
-
‫کوررنگی‬
‫یک‬ ‫برای‬ ‫مشاهده‬‫قابل‬ ‫نمونه‬
‫نابینا‬ ‫سرخ‬
‫معلولیت‬ ‫انواع‬
>

7. #UXSHIRAZ
‫دیداری‬‫های‬‫ناتوانی‬
-
‫کوررنگی‬
‫نرمال‬ ‫رنگ‬
–
‫بینند‬ ‫می‬‫سالم‬ ‫کامال‬ ‫افراد‬ ‫آنچه‬
‫معلولیت‬ ‫انواع‬
>

8. #UXSHIRAZ
‫دیسلکسیا‬
‫معلولیت‬ ‫انواع‬
>

9. #UXSHIRAZ
‫دیداری‬‫استرس‬
‫میکند‬ ‫ایجاد‬ ‫متن‬ ‫خواندن‬ ‫در‬ ‫را‬‫هایی‬ ‫دشواری‬‫و‬ ‫میدهد‬ ‫رخ‬ ‫نور‬ ‫به‬ ‫حساسیت‬ ‫دلیل‬ ‫به‬ ‫دیداری‬ ‫استرس‬
‫معلولیت‬ ‫انواع‬
>

10. #UXSHIRAZ
‫دیداری‬‫استرس‬
‫میکند‬ ‫ایجاد‬ ‫متن‬ ‫خواندن‬ ‫در‬ ‫را‬‫هایی‬ ‫دشواری‬‫و‬ ‫میدهد‬ ‫رخ‬ ‫نور‬ ‫به‬ ‫حساسیت‬ ‫دلیل‬ ‫به‬ ‫دیداری‬ ‫استرس‬
‫معلولیت‬ ‫انواع‬
>

11. #UXSHIRAZ
‫دیداری‬‫استرس‬
‫میکند‬ ‫ایجاد‬ ‫متن‬ ‫خواندن‬ ‫در‬ ‫را‬‫هایی‬ ‫دشواری‬‫و‬ ‫میدهد‬ ‫رخ‬ ‫نور‬ ‫به‬ ‫حساسیت‬ ‫دلیل‬ ‫به‬ ‫دیداری‬ ‫استرس‬
‫معلولیت‬ ‫انواع‬
>

12. #UXSHIRAZ
‫دیداری‬‫استرس‬
‫میکند‬ ‫ایجاد‬ ‫متن‬ ‫خواندن‬ ‫در‬ ‫را‬‫هایی‬ ‫دشواری‬‫و‬ ‫میدهد‬ ‫رخ‬ ‫نور‬ ‫به‬ ‫حساسیت‬ ‫دلیل‬ ‫به‬ ‫دیداری‬ ‫استرس‬
‫معلولیت‬ ‫انواع‬
>

13. #UXSHIRAZ
‫بینایی‬‫کم‬
•
‫زوم‬ ‫از‬ ‫و‬ ‫هستند‬‫بینایی‬ ‫ضعف‬ ‫دارای‬ ‫که‬ ‫افرادی‬
/
‫میک‬ ‫استفاده‬ ‫صفحه‬ ‫خواندن‬ ‫برای‬ ‫کنتراست‬ ‫افزایش‬
‫نند‬
.
•
‫است‬ ‫سخت‬‫برایشان‬ ‫خواندن‬‫و‬ ‫هستند‬ ‫چشمی‬ ‫پیر‬ ‫دچار‬‫یا‬ ‫هستند‬ ‫مسن‬ ‫که‬ ‫افرادی‬
‫معلولیت‬ ‫انواع‬
>

14. #UXSHIRAZ
‫ناشنوایی‬
/
‫شنوایی‬‫کم‬
‫کنند‬ ‫استفاده‬‫صوتی‬ ‫کاربری‬ ‫رابط‬ ‫از‬ ‫توانند‬ ‫نمی‬ ‫شنوایان‬ ‫کم‬ ‫و‬ ‫ناشنوایان‬ ،‫مسن‬ ‫افراد‬
‫معلولیت‬ ‫انواع‬
>

15. #UXSHIRAZ
‫حرکتی‬‫معلولیت‬
‫دست‬‫لرزش‬ ،‫کوچک‬ ‫اهداف‬ ‫به‬‫اشاره‬‫و‬ ‫موس‬ ‫دادن‬ ‫حرکت‬ ‫در‬ ‫دقت‬ ، ‫موس‬ ‫گیری‬ ‫کار‬ ‫به‬ ‫در‬‫توانایی‬ ‫عدم‬
...
‫معلولیت‬ ‫انواع‬
>

16. #UXSHIRAZ
•
‫ها‬ ‫داده‬ ‫از‬ ‫بخشی‬ ‫رفتن‬ ‫دست‬ ‫از‬
‫انتقال‬ ‫هنگام‬ ‫در‬
‫اطالعات‬
(
‫شد‬ ‫نوشته‬ ‫رنگ‬ ‫چند‬ ‫با‬ ‫که‬ ‫جزواتی‬ ‫کپی‬ ‫مانند‬
‫اند‬ ‫ه‬
)
•
‫سیستم‬ ‫به‬ ‫کاربر‬ ‫توسط‬ ‫اطالعات‬ ‫ورود‬ ‫امکان‬ ‫عدم‬
(
‫طرق‬ ‫از‬
‫گوناگون‬
:
‫رابط‬
‫حرکتی‬ ،‫متنی‬ ،‫صوتی‬
)
‫یعنی‬‫دسترسی‬‫عدم‬
:
‫پذیری‬‫دسترس‬
‫یا‬ ‫درک‬‫قابل‬ ،‫دسترس‬‫قابل‬ ،‫افراد‬ ‫همه‬ ‫برای‬ ‫را‬ ‫محصول‬ ‫که‬ ‫کیفیتی‬ ‫سطح‬
‫قابل‬
‫میکند‬ ‫استفاده‬
‫کاربری‬‫رابط‬ ‫هر‬‫اصلی‬‫وظیفه‬‫دو‬
.1
‫کاربر‬ ‫به‬ ‫اطالعات‬ ‫ارایه‬
.2
‫کاربر‬ ‫از‬ ‫اطالعات‬ ‫دریافت‬

17. #UXSHIRAZ
‫پذیری‬‫دسترس‬‫اجرایی‬‫های‬‫الیه‬
:
•
‫الیه‬ ‫در‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬
‫کاربر‬ ‫تحقیقات‬
(
‫کاربر‬‫با‬ ‫همدلی‬
)
•
‫الیه‬ ‫در‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬ ‫کارگیری‬ ‫به‬
‫اطالعات‬ ‫معماری‬
‫محتوا‬‫و‬
(
‫شناختی‬ ‫پذیری‬ ‫دسترس‬
)
•
‫الیه‬ ‫در‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬ ‫کارگیری‬ ‫به‬
‫دیزاین‬
(
‫ویژوال‬ ‫پذیری‬ ‫دسترس‬
)
•
‫الیه‬ ‫در‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬ ‫گیری‬ ‫کار‬ ‫به‬
‫کد‬ ‫سازی‬ ‫پیاده‬
(
‫ماشین‬ ‫پذیری‬ ‫دسترس‬
)
•
‫تست‬
‫واقعی‬ ‫محیط‬ ‫در‬ ‫واقعی‬ ‫کاربران‬‫با‬ ‫محصول‬ ‫پذیری‬ ‫دسترس‬
•
‫وب‬ ‫کنسرسیوم‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬
WCAG 2.1
‫سطوح‬ ‫و‬
A, AA, AAA
•
‫استاندارد‬
ISO 9241-20
‫استاندارد‬‫و‬
ISO 40500
‫پذیری‬‫دسترس‬‫استاندارد‬
:

18. #UXSHIRAZ
‫کاربر‬‫ریسرچ‬
...
‫کاربر‬‫با‬‫همدلی‬
‫کاربر‬ ‫احساس‬ ‫درک‬ ‫برای‬ ‫بینایان‬ ‫کم‬ ‫شرایط‬‫سازی‬ ‫شبیه‬
...
‫در‬ ‫نیز‬ ‫معلولیت‬ ‫دارای‬ ‫کاربران‬ ‫وقتی‬
‫ریسرچ‬
‫در‬ ‫حضورشان‬ ،‫دارند‬ ‫حضور‬ ‫ها‬
journey
‫بود‬ ‫خواهد‬ ‫تاثیرگذار‬ ‫نیز‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۱

19. #UXSHIRAZ
‫کاربر‬‫ریسرچ‬
...
‫کاربر‬‫با‬‫همدلی‬
‫دارند‬‫ها‬ ‫دست‬ ‫در‬ ‫عضالنی‬ ‫مشکل‬ ‫که‬ ‫افرادی‬‫شرایط‬‫سازی‬ ‫شبیه‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
Credit: Sarvin Valifar
۱

20. #UXSHIRAZ
‫محتوا‬‫مدیریت‬‫و‬‫اطالعات‬‫معماری‬
.1
‫دهید‬ ‫اختصاص‬ ‫تسک‬ ‫یک‬ ‫برای‬ ‫را‬ ‫صفحه‬ ‫هر‬
( .
‫همانند‬
‫های‬ ‫رابط‬ ،‫صوتی‬ ‫های‬ ‫رابط‬
USSD
‫خودپردازها‬ ‫و‬
)
.2
‫یک‬ ،‫کند‬ ‫پر‬ ‫باید‬ ‫کاربر‬ ‫که‬ ‫فرمهایی‬ ‫در‬
‫خطی‬ ‫مسیر‬
‫بگیرید‬ ‫نظر‬ ‫در‬ ‫کاربر‬ ‫تعامل‬ ‫برای‬ ‫را‬
.
.3
‫کنید‬ ‫استفاده‬‫ساده‬ ‫نگارش‬ ‫و‬ ‫جامعه‬ ‫متوسط‬ ‫زبان‬ ‫سطح‬ ‫از‬
(
‫بر‬ ‫های‬ ‫ترانه‬ ‫اکثر‬ ‫انگلیسی‬ ‫زبان‬ ‫سطح‬
‫تاریخ‬ ‫تر‬
‫سطح‬ ‫حدود‬ ‫آمریکا‬
۵.۵
‫است‬ ‫بوده‬ ‫آیلتس‬
)
.4
‫کنید‬ ‫منتشر‬ ‫زیرنویس‬‫با‬ ‫را‬ ‫فیلمها‬‫و‬ ‫صوت‬ ‫قالب‬ ‫در‬ ‫هم‬ ‫و‬ ‫متن‬‫قالب‬ ‫در‬ ‫هم‬ ‫را‬ ‫محتوا‬
.
.5
‫کنید‬ ‫استفاده‬ ‫پیچیده‬ ‫محتوای‬ ‫ی‬ ‫ساده‬ ‫بیان‬ ‫برای‬ ‫ها‬ ‫گراف‬‫و‬ ‫تصاویر‬ ‫از‬
.
.6
‫ها‬ ‫گراف‬‫و‬ ‫تصاویر‬ ‫تشریح‬ ‫برای‬ ‫متن‬ ‫از‬
(
‫نابینایان‬ ‫برای‬
)
‫کنید‬ ‫استفاده‬
.
.7
‫ها‬ ‫لیست‬ ‫از‬
(
‫دار‬ ‫بولت‬
)
‫کنید‬ ‫استفاده‬ ‫محتوا‬ ‫بیان‬ ‫در‬
.
‫نگ‬ ‫ساده‬ ‫و‬‫کوتاه‬ ‫نیز‬ ‫را‬‫ها‬ ‫پاراگراف‬ ‫بندی‬ ‫قالب‬
‫دارید‬ ‫ه‬
.
.8
‫استفا‬ ‫معلولیت‬ ‫دارای‬ ‫کاربران‬‫با‬ ‫سورتینگ‬ ‫کارت‬ ‫از‬ ،‫پیچیده‬ ‫های‬ ‫اپلیکیشن‬ ‫ساختار‬ ‫چیدمان‬ ‫برای‬
‫کنید‬ ‫ده‬
.
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۲

21. #UXSHIRAZ
‫ویژوال‬‫کاربری‬‫رابط‬‫طراحی‬
‫کوررنگی‬‫برای‬
۷
%
‫هستند‬‫کوررنگی‬ ‫انواع‬ ‫از‬‫یکی‬ ‫دچار‬ ‫مردان‬ ‫از‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

22. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫کوررنگی‬‫برای‬
۷
%
‫هستند‬‫کوررنگی‬ ‫انواع‬ ‫از‬‫یکی‬ ‫دچار‬ ‫مردان‬ ‫از‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

23. #UXSHIRAZ
‫ویژوال‬‫کاربری‬‫رابط‬‫طراحی‬
‫کوررنگی‬‫برای‬
‫حل‬ ‫راه‬
:
‫نباشید‬ ‫رنگ‬ ‫به‬ ‫متکی‬ ،‫گوناگون‬ ‫معانی‬ ‫ارسال‬‫و‬ ‫تمایز‬ ‫ایجاد‬ ‫برای‬
(
‫ک‬ ‫استفاده‬ ‫گرافیکی‬ ‫های‬ ‫المان‬
‫نید‬
)
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

24. #UXSHIRAZ
‫ویژوال‬‫کاربری‬‫رابط‬‫طراحی‬
‫کوررنگی‬‫برای‬
‫حل‬ ‫راه‬
:
‫نباشید‬ ‫رنگ‬ ‫به‬ ‫متکی‬ ،‫گوناگون‬ ‫معانی‬ ‫ارسال‬‫و‬ ‫تمایز‬ ‫ایجاد‬ ‫برای‬
(
‫ک‬ ‫استفاده‬ ‫گرافیکی‬ ‫های‬ ‫المان‬
‫نید‬
)
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

25. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫بینایی‬‫کم‬‫برای‬
•
‫بکگراندشان‬ ‫رنگ‬ ‫به‬ ‫نسبت‬ ‫متون‬ ‫کنتراست‬ ‫بردن‬‫باال‬
contrast-ratio.com
•
‫سطح‬ ‫اصول‬ ‫رعایت‬
AA
‫استاندارد‬
WCAG
‫کاربری‬ ‫رابط‬ ‫در‬ ‫متون‬ ‫سایر‬‫و‬ ‫ها‬ ‫لیبل‬ ،‫ها‬ ‫دکمه‬ ‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

26. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫بینایی‬‫کم‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳
Minimum Font size: 16px or 14pxbold
Color contrast 4.5 for TEXT – 3.0 for titles (according to WCAG 2.0)
Min Line Height: 1.5 (English) and 2.0 for Persian fonts

27. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫دیداری‬‫استرس‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳
‫را‬‫ها‬ ‫پاراگراف‬ ‫نمایش‬ ‫طرز‬
justify
‫نکنید‬
.

28. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫دیسلکسیا‬‫برای‬
•
‫حل‬ ‫راه‬
:
‫کنتراست‬
‫زیاد‬‫خیلی‬
‫نکنید‬ ‫استفاده‬
.
‫برعکس‬ ‫و‬ ‫سفید‬ ‫روی‬ ‫مشکی‬ ‫نوشتهء‬ ‫بخصوص‬
(
‫زغالی‬ ‫رنگ‬ ‫از‬ ‫سیاه‬ ‫رنگ‬ ‫جای‬ ‫به‬
(
‫مثال‬
555555
)
‫استفاده‬
‫کنید‬
.
‫کنید‬ ‫تیره‬ ‫کمی‬ ‫را‬ ‫بکگراند‬ ‫یا‬
).
•
‫بدهید‬ ‫کاربر‬ ‫به‬ ‫را‬ ‫کنتراست‬ ‫تنظیم‬ ‫اجازه‬
.
•
‫از‬
auto complete
‫شود‬ ‫کم‬ ‫ذهنی‬ ‫لود‬ ‫تا‬ ‫کنید‬ ‫استفاده‬
.
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

29. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫و‬‫مسن‬‫افراد‬‫برای‬
...
‫حداقل‬ ‫رعایت‬
‫کلیک‬‫قابل‬ ‫محدوده‬
(
Hit area
)
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

30. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫و‬‫مسن‬‫افراد‬‫برای‬
...
‫کنید‬ ‫تر‬ ‫راحت‬‫یا‬ ‫کنید‬ ‫دریافت‬ ‫اتومات‬ ‫را‬‫برخی‬ ،‫کابر‬ ‫از‬ ‫ورودیها‬ ‫همه‬ ‫دریافت‬ ‫جای‬ ‫به‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

31. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫و‬‫مسن‬‫افراد‬‫برای‬
...
‫کنید‬ ‫کم‬ ‫ممکن‬‫جای‬ ‫تا‬ ‫را‬ ‫بیهوده‬ ‫های‬ ‫الگین‬
.
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳

32. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫بینا‬‫کم‬‫و‬‫نابینا‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳
•
‫قالب‬ ‫در‬ ‫متنی‬ ‫محتوای‬ ‫گذاری‬ ‫اشتراک‬
HTML
(
‫بصورت‬ ‫نه‬ ‫و‬
PDF
)
•
‫متن‬ ‫روی‬ ‫زوم‬ ‫قابلیت‬
/
‫خوان‬ ‫صفحه‬ ‫توسط‬ ‫خوانش‬
•
‫کلیک‬‫قابل‬ ‫آیکونهای‬ ‫کنار‬ ‫در‬ ‫و‬‫ها‬ ‫دکمه‬ ‫روی‬ ‫نوشته‬ ‫از‬ ‫استفاده‬
•
‫جای‬ ‫به‬ ‫لیبل‬ ‫از‬ ‫استفاده‬
place Holder
•
‫صفحات‬ ‫در‬ ‫زوم‬ ‫امکان‬ ‫گذاشتن‬ ‫باز‬
‫وب‬
(
maximum-scale=1
)
•
‫خاصیت‬ ‫نوشتن‬
Alt
‫عکس‬‫های‬ ‫تگ‬ ‫برای‬
(
‫عکس‬ ‫رخداد‬ ‫مهمترین‬ ‫دهنده‬ ‫توضیح‬
–
‫داینامیک‬
) !
•
‫گرامری‬ ‫قالب‬ ‫از‬ ‫استفاده‬
“
‫فعل‬
”
‫ها‬ ‫دکمه‬ ‫عنوان‬ ‫در‬
•
‫مانند‬ ‫عناوینی‬ ‫از‬ ‫استفاده‬ ‫عدم‬
“
‫کنید‬ ‫کلیک‬ ‫اینجا‬
”
‫لینکها‬ ‫عنوان‬ ‫در‬

33. #UXSHIRAZ
‫کاربری‬‫رابط‬‫طراحی‬
‫ویژوال‬
‫اوتیسم‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۳
•
‫طبیعی‬ ‫نور‬ ‫با‬‫هایی‬ ‫رنگ‬ ‫از‬ ‫استفاده‬
(
‫میدهد‬ ‫آزار‬ ‫را‬ ‫اوتیستیک‬ ‫افراد‬ ‫جیغ‬ ‫رنگهای‬ ‫و‬‫باال‬ ‫کنتراست‬
•
‫راهنما‬ ‫متون‬‫و‬ ‫ها‬ ‫دکمه‬‫عناوین‬ ،‫ها‬ ‫تسک‬ ‫انجام‬ ‫بیان‬ ‫در‬‫ساده‬ ‫زبان‬ ‫از‬ ‫استفاده‬
•
‫کاربر‬ ‫تمرکز‬ ‫حفظ‬ ‫برای‬‫کوتاه‬ ‫های‬ ‫متن‬ ‫از‬ ‫استفاده‬

34. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫میکنید‬‫کسب‬ ‫بهتری‬ ‫گوگل‬ ‫رتبه‬ ،‫بخشید‬ ‫بهبود‬ ‫محصول‬ ‫در‬ ‫را‬ ‫پذیری‬ ‫دسترس‬‫و‬ ‫کاربرپذیری‬ ‫هرچقدر‬
.
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴

35. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫است‬ ‫محصول‬ ‫فرانت‬ ‫کد‬ ‫سمت‬ ‫در‬ ‫گیرید‬ ‫کار‬ ‫به‬ ‫باید‬‫نابینایان‬ ‫برای‬ ‫که‬ ‫طراحی‬ ‫اصول‬ ‫بیشترین‬
.
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴

36. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
‫خاصیت‬
lang
‫تگ‬ ‫در‬
HTML
w3schools.com/tags/ref_language_codes.asp
‫خودشان‬‫اصلی‬‫مفهوم‬ ‫در‬‫فرم‬‫های‬‫المان‬ ‫از‬‫استفاده‬
<span class="button" onclick="submitForm()"> Submit </span>
<button type="submit"> ACTION </button>
‫خاصیت‬
TabIndex
‫نابینایان‬ ‫برای‬ ‫فرمها‬‫ناوبری‬ ‫در‬ ‫نکته‬ ‫ترین‬ ‫مهم‬
‫کنی‬ ‫چک‬ ‫را‬ ‫ایندکس‬ ‫تب‬،‫بایاس‬ ‫ویژوال‬ ‫از‬ ‫پیشگیری‬ ‫جهت‬
‫د‬

37. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
‫های‬ ‫تگ‬ ‫از‬ ‫استفاده‬
HTML5
‫باشد‬‫شناسایی‬‫قابل‬‫ها‬ ‫خوان‬ ‫صفحه‬ ‫برای‬ ‫صفحه‬ ‫مختلف‬‫های‬ ‫بخش‬ ‫تا‬ ‫میکند‬ ‫کمک‬
.
‫لینکهای‬
‫برای‬ ‫صفحه‬‫ناوبری‬
screen reader
‫قابل‬
‫میشود‬ ‫تشخیص‬
.
<article> / <aside> / <section>
<nav> …
‫ها‬ ‫هدینگ‬ ‫از‬ ‫استفاده‬
:
‫بخش‬
‫های‬
‫برای‬ ‫صفحه‬ ‫مختلف‬
screen reader
‫قابل‬
‫میشود‬ ‫تشخیص‬
.
<h1> / <h2> / <h3>
‫معنایی‬‫های‬‫تگ‬ ‫از‬‫استفاده‬
HTML5

38. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
‫خاصیت‬
ALT
‫میکند‬‫شناسایی‬‫قابل‬‫ها‬ ‫خوان‬ ‫صفحه‬ ‫و‬ ‫روباتها‬ ‫انواع‬ ‫برای‬ ‫را‬ ‫آنها‬،‫تصاویر‬ ‫برای‬
‫تگ‬ ‫از‬ ‫استفاده‬
figure
‫به‬ ‫نسبت‬ ‫کاملتری‬ ‫توضیحات‬ ‫تا‬ ‫میکند‬ ‫کمک‬
alt
‫کنیم‬ ‫اضافه‬ ‫تصویر‬ ‫به‬
<img alt=“…”>
<figure>
<img src="cat.jpg" alt="African wildcat sleeping in the sun">
<figcaption>
African wildcats are active mainly during the night. Image
rights: CC BY 2.0, John McExample.
</figcaption>
</figure>

39. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
‫قابلیت‬،‫نابینایان‬ ‫برای‬ ‫پذیری‬ ‫دسترس‬ ‫در‬ ‫چیز‬ ‫ترین‬ ‫مهم‬
focusability
‫است‬
.
‫مرورگر‬ ‫فوکوس‬
!
‫تر‬ ‫ساده‬ ‫بیان‬ ‫به‬
:
‫؟‬ ‫هستم‬ ‫صفحه‬‫کجای‬ ‫من‬
‫شود‬ ‫منتقل‬‫پاپاپ‬ ‫به‬ ‫صفحه‬ ‫فوکوس‬‫باید‬،‫پاپاپ‬ ‫بازشدن‬ ‫محض‬ ‫به‬
.
‫پاپاپ‬‫پذیری‬‫دسترس‬
‫از‬ ‫استفاده‬‫با‬ ‫را‬ ‫محتوا‬‫و‬ ‫فرمها‬ ‫اگر‬
CSS
‫ترتیب‬ ‫که‬ ‫شوید‬ ‫مطمئن‬ ،‫میکنید‬‫جابجا‬
HTML
‫است‬ ‫همانگونه‬ ‫نیز‬ ‫آنها‬
VisualBias

40. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
•
‫است‬‫هایی‬ ‫بخش‬ ‫چه‬ ‫شامل‬ ‫صفحه‬ ‫که‬ ‫میشود‬ ‫متوجه‬ ‫کاربر‬
.
•
‫است‬ ‫چگونه‬‫ها‬ ‫المان‬ ‫وضعیت‬ ‫که‬ ‫میشود‬ ‫متوجه‬ ‫کاربر‬
.
‫خیر؟‬‫یا‬ ‫است‬ ‫خورده‬ ‫تیک‬ ‫باکس‬ ‫چک‬ ‫مثال‬
•
‫بصورت‬ ‫صفحه‬ ‫شدن‬ ‫روز‬ ‫به‬ ‫متوجه‬ ‫کاربر‬
ajax
‫شود‬
.
‫مثال‬
:
‫شود‬ ‫می‬ ‫باز‬ ‫صفحه‬ ‫در‬ ‫نوتیفیکیشن‬ ‫باکس‬ ‫یک‬ ‫وقتی‬
.
•
‫میکند‬ ‫پیدا‬ ‫را‬ ‫صفحه‬ ‫از‬‫خاصی‬ ‫بخش‬ ‫به‬ ‫شدن‬ ‫منتقل‬ ‫امکان‬ ‫کاربر‬
.
‫ش‬ ‫باز‬ ‫که‬ ‫نوتیفیکیشنی‬ ‫داخل‬ ‫به‬ ‫مثال‬
‫ده‬
.
‫خصیصه‬ ‫از‬‫استفاده‬
ARIA
•
‫تگهای‬ ‫معنی‬ ‫میتواند‬ ‫خصیصه‬ ‫این‬
HTML
‫را‬
override
‫کند‬
( .
‫باشه‬ ‫مضر‬ ‫ممکنه‬ ‫معنایی‬ ‫تگهای‬ ‫وجود‬ ‫با‬
)
‫از‬‫استفاده‬‫خطرات‬
ARIA
AccessibleRichInternetApplications
Link: bit.ly/aria-learn

41. #UXSHIRAZ
‫د‬
ُ
‫ک‬‫سمت‬‫سازی‬‫پیاده‬
!
‫ماشین‬‫و‬‫انسان‬‫برای‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۴
•
‫کند‬ ‫عوض‬ ‫را‬‫ها‬ ‫نوشته‬ ‫فونت‬ ‫سایز‬ ‫و‬ ‫نوع‬ ‫تواند‬ ‫می‬ ‫کاربر‬
.
•
‫کند‬ ‫عوض‬ ‫را‬‫ها‬ ‫نوشته‬ ‫رنگ‬ ‫تواند‬ ‫می‬ ‫کاربر‬
.
•
‫کند‬ ‫ایجاد‬ ‫صفحه‬ ‫در‬ ‫ریسپانسیو‬ ‫غیر‬‫های‬ ‫المان‬ ‫میتواند‬ ‫کاربر‬
.
‫مانند‬
table
‫ادیتورهای‬ ‫از‬‫استفاده‬
WYSIWYG
•
‫ببرد‬ ‫کار‬ ‫به‬ ‫ها‬ ‫عنوان‬ ‫کردن‬ ‫بزرگ‬ ‫و‬ ‫کوچک‬ ‫برای‬ ‫را‬ ‫معنایی‬ ‫های‬ ‫تگ‬ ‫میتواند‬ ‫کاربر‬
.
•
‫و‬ ‫کاربر‬ ‫و‬ ‫معنا‬‫اساس‬ ‫بر‬ ، ‫استانداردتر‬ ‫شده‬ ‫تولید‬ ‫خروجی‬
semantic
‫است‬ ‫نگارش‬
.
‫جایگزین‬
:
‫ادیتورهای‬
WYMIWYG

42. #UXSHIRAZ
‫پذیری‬‫دسترس‬‫تست‬‫و‬‫هیوریستیک‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۵
‫از‬‫عریان‬
CSS

43. #UXSHIRAZ
‫پذیری‬‫دسترس‬‫تست‬‫و‬‫هیوریستیک‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۵
‫سفید‬‫و‬‫سیاه‬‫چاپ‬‫تست‬

44. #UXSHIRAZ
‫پذیری‬‫دسترس‬‫تست‬‫و‬‫هیوریستیک‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۵
‫موس‬ ‫از‬‫استفاده‬‫بدون‬‫صفحه‬‫ناوبری‬

45. #UXSHIRAZ
‫بینایی‬ ‫کم‬ ‫شرایط‬ ‫در‬ ‫هیوریستیک‬ ‫تست‬
/
‫دید‬‫تاری‬
/
‫نور‬ ‫کمبود‬
‫پذیری‬‫دسترس‬‫تست‬‫و‬‫هیوریستیک‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۵

46. #UXSHIRAZ
‫واقعی‬ ‫کاربر‬‫با‬ ‫تست‬
‫پذیری‬‫دسترس‬‫تست‬‫و‬‫هیوریستیک‬
‫پذیری‬ ‫دسترس‬ ‫اجرای‬‫های‬ ‫الیه‬
>
۵

47. ‫منابع‬
•
‫وب‬ ‫کنسرسیوم‬ ‫استاندارد‬
WCAG
‫نسخه‬
2.1
•
‫انگلیس‬ ‫دولت‬ ‫پذیری‬ ‫دسترس‬ ‫راهنمای‬
accessibility.blog.gov.uk
•
‫وب‬ ‫کنسرسیوم‬ ‫گانه‬ ‫سه‬ ‫سطوح‬ ‫پذیری‬ ‫دسترس‬ ‫اصول‬ ‫کوچک‬ ‫لیست‬ ‫چک‬
wuhcag.com/wcag-checklist
•
‫مقاالت‬
‫تعاملی‬ ‫طراحی‬ ‫بنیاد‬ ‫سایت‬ ‫وب‬
IxDF
‫پذیری‬ ‫دسترس‬ ‫درباره‬
#UXSHIRAZ

48. @macromediax
Hossein-Sharafi
‫محصول‬‫طراح‬
.
‫سداد‬‫ورزی‬‫داده‬
(
‫ملی‬‫بانک‬
)
‫شرفی‬‫حسین‬