آموزش نحوه طراحی برای دسترسی: برای طراحان UX (WCAG 2.2)

سرفصل ها و درس ها

شروع شدن Getting Started

• بررسی اجمالی دوره Course Overview

• منابع یادداشت برداری: خلاصه عمل بخش Note-Taking Resources: Section Action Summaries

• با مربی خود آشنا شوید Meet Your Instructor

• فعالیت گرم کردن: سنجش جایی که اکنون در آن هستید Warm-Up Activity: Gauging Where You’re At Now

• داستان: چرا دسترسی مهم است Story: Why Accessibility Matters

• فرم بازخورد دوره Course Feedback Form

دسترسی 101: چه کسی، چه چیزی، چه زمانی، کجا، و چرا (غیر مبتدیان می توانند از این کار صرف نظر کنند) Accessibility 101: The Who, What, When, Where, & Why (non-beginners can skip)

• مقدمه بخش 2 Introduction to Section 2

• دسترسی در مورد چه کسی است Who Is Accessibility About

• نگاهی اجمالی به زندگی 10 نفر A Remarkable Glimpse into The Lives of 10 People

• 5 آمار حیرت‌انگیز که نشان می‌دهد دسترسی افراد شامل چند نفر است 5 Astounding Stats That Reveal Just How Many People Accessibility Includes

• ناتوانی ها می توانند موقعیتی، موقت یا دائمی باشند Disabilities Can Be Situational, Temporary, Or Permanent

• از 4 نکته حرفه ای برتر من استفاده کنید Use My Top 4 Pro Tips

• از بین بردن 5 افسانه دسترسی (ویدئو) Busting 5 Accessibility Myths (Video)

• مورد چشمگیر تجاری برای دسترسی: 5 درایور متمایز کننده Biz The Impressive Business Case for Accessibility: 5 Differentiating Biz Drivers

• آیا فهرستی از دستورالعمل هایی وجود دارد که می توانید برای جلوگیری از مشکلات قانونی از آنها پیروی کنید؟ Is There A List of Guidelines You Can Follow to Avoid Legal Trouble?

• آیا «پلیس دسترسی» وجود دارد؟ Are There “Accessibility Police”?

• چه کسی در تیم شما باید مسئولیت تضمین دسترسی را بپذیرد؟ Who on Your Team Should Be Taking Responsibility for Ensuring Accessibility?

• دسترسی در مقابل: طراحی فراگیر، طراحی جهانی و طراحی برای همه Accessibility Versus: Inclusive Design, Universal Design, and Design For All

• داستان این که چگونه یاد گرفتم چه زمانی برای قابلیت دسترسی تست کنم (به عنوان یک طراح) The Story of How I Learned When to Test for Accessibility (As a Designer)

• نحوه تست دسترسی: بهترین روش How To Test for Accessibility: The Best Method

• نحوه تست دسترسی: ابزارهای برتر How To Test for Accessibility: Top Tools

• بخش بستن Section Close Out

کنتراست رنگ Color Contrast

• مقدمه بخش 3 Introduction to Section 3

• منبع یادداشت برداری: S3 Action Summary PDF Note-Taking Resource: S3 Action Summary PDF

• کنتراست رنگ حیاتی Color Contrast Vitals

• آیا میدانستید... Did You Know...

• آن را تجربه کنید: قرمز-سبز Experience It: Red-Green

• به‌روزرسانی: «شبیه‌ساز دید NoCoffee» کجا رفت؟ Update: Where did the "NoCoffee Vision Simulator" go?

• آن را تجربه کنید: آبی-زرد Experience It: Blue-Yellow

• آن را تجربه کنید: بدون رنگ Experience It: No Color

• ابزاری برای ساختن یک پالت رنگ در دسترس Tool For Building An Accessible Color Palette

• نحوه بررسی کنتراست رنگ (برای واقعیت مجازی، برنامه ها، نرم افزارها، وب سایت ها و غیره) How to Check Color Contrast (for virtual reality, apps, software, websites, etc)

• مثال: عناصر UI Example: UI Elements

• آزمون بخش 3 (8 سوال) Section 3 Quiz (8 questions)

• بخش 3 خلاصه عمل Section 3 Action Summary

• فرم بازخورد دوره Course Feedback Form

استقلال رنگ Color Independence

• مقدمه بخش 4 Introduction to Section 4

• منبع یادداشت برداری: S4 Action Summary PDF Note-Taking Resource: S4 Action Summary PDF

• نحوه بررسی استقلال رنگ How to Check for Color Independence

• مثال: خطاها Example: Errors

• مثال: آیتم منوی فعلی Example: Current Menu Item

• مثال: پیوندها Example: Links

• مثال: Progress Trackers Example: Progress Trackers

• مثال: نمودارها Example: Charts

• مثال: نمودارها Example: Graphs

• مثال: سایر تجسم‌های داده Example: Other Data Visualizations

• خلاصه: تجسم داده های مستقل از رنگ Summary: Color Independent Data Visualizations

• فعالیت: نقشه مسیر ترانزیت Activity: Transit Route Map

• ترکیب تاکتیک ها Combining Tactics

• وابستگی رنگ در بازی و واقعیت مجازی Color Dependence in Gaming & Virtual Reality

• آزمون بخش 4 (4 سوال) Section 4 Quiz (4 questions)

• بخش 4 خلاصه عمل Section 4 Action Summary

واژه‌سازی عناصر تعاملی Wording Interactive Elements

• مقدمه بخش 5 Introduction to Section 5

• منبع یادداشت برداری: S5 Action Summary PDF Note-Taking Resource: S5 Action Summary PDF

• چگونه عناصر تعاملی را بررسی کنیم (به علاوه: آیا از "Affordance" به اشتباه استفاده می کنید؟) How to Check Interactive Elements (Plus: Do You Use “Affordance” Incorrectly?)

• چگونه تشخیص دهیم که نشانه هایی که طراحی می کنید نشان دهنده چیزهایی هستند که شما می خواهید How to Tell If the Signifiers You Design Are Signifying the Things You Want

• درهای نورمن چیست؟ What Are “Norman Doors”

• تاریخچه UX (طراحی تجربه به 4000 سال قبل از میلاد با فنگ شویی برمی گردد) UX History (Experience Design dates back as far as 4000 BC with Feng Shui)

• حرکت به منطقه قابلیت استفاده: بازیکنان کلیدی Moving into Usability Territory: Key Players

• 3 جنبه اصلی برای طراحی (هنگام ایجاد عناصر تعاملی) 3 Core Aspects To Design For (When Creating Interactive Elements)

• بهترین شیوه های واژه نویسی دکمه Button Wording Best Practices

• واژه‌بندی پیوند: کمی "تست" Link Wording: A Little “Test”

• چرا از پیوندهای «بیشتر بخوانید» (و موارد مشابه) اجتناب کنید Why Avoid “Read More” Links (And The Like)

• بهترین شیوه های نوشتن پیوند Link Wording Best Practices

• جایگزین های عبارت (برای دکمه ها یا پیوندها) Wording Alternatives (For Buttons or Links)

• آزمون بخش 5 (3 سوال) Section 5 Quiz (3 questions)

• بخش 5 خلاصه عمل Section 5 Action Summary

عناصر تعاملی یک ظاهر طراحی شده (قسمت 1: دکمه ها و موارد مشابه) Styling Interactive Elements (Part 1: Buttons & The Like)

• مقدمه بخش 6 Introduction to Section 6

• منبع یادداشت برداری: S6 Action Summary PDF Note-Taking Resource: S6 Action Summary PDF

• دکمه یا پیوند: چه زمانی از کدام استفاده کنیم؟ Button or Link: When to Use Which?

• بازی حدس زدن دکمه و معرفی 7 تکنیک برای نشان دادن "قابلیت کلیک" Button Guessing Game & Intro to 7 Techniques for Signifying “Clickability”

• تکنیک 1: شکل و سازگاری (دکمه ای یا نه) Technique 1: Shape and Consistency (Button or Not)

• تکنیک 2: شعاع مرزی (شخصیت) Technique 2: Border Radius (Personality)

• تکنیک 3: پر کردن و رنگ کردن (سلسله مراتب) Technique 3: Fill and Color (Hierarchy)

• تکنیک 4: سایه (ارتفاع) Technique 4: Shadow (Elevation)

• تکنیک 5: رقابت و اولویت ها Technique 5: Competition & Priorities

• تکنیک 6: مجاورت (تنفس، ارتباط، اهداف لمسی) Technique 6: Proximity (Breathability, Relation, Touch Targets)

• تکنیک 7: حروف بزرگ کردن برچسب (لحن صدا) Technique 7: Label Capitalization (Tone of Voice)

• چیزهایی که باید برای دکمه ها رزرو کنید Things to Reserve for Buttons

• چه زمانی باید سازگار بود When To Be Consistent

• چه زمانی باید ناسازگار بود (معروف به متمایز) When To Be Inconsistent (aka Distinct)

• وقتی شبیه باشیم When To Be Similar

• تصمیم گیری بین این سه (سازگار، متمایز، مشابه) Deciding Between The Three (Consistent, Distinct, Similar)

• آزمون بخش 6 (4 سوال) Section 6 Quiz (4 questions)

• بخش 6 خلاصه عمل Section 6 Action Summary

عناصر تعاملی سبک (بخش 2: پیوندها و موارد مشابه) Styling Interactive Elements (Part 2: Links & The Like)

• مقدمه بخش 7 Introduction To Section 7

• منبع یادداشت برداری: S7 Action Summary PDF Note-Taking Resource: S7 Action Summary PDF

• سبک پیوند Link Styling

• جایگزین های زیر خط: استراتژی پیشرفته شماره 1 Alternatives to the Underline: Advanced Strategy #1

• منبع: جستجوگر کنتراست پیوند Resource: Link Contrast Checker

• جایگزین های زیر خط: استراتژی پیشرفته شماره 2 Alternatives to the Underline: Advanced Strategy #2

• جایگزین های زیر خط: استراتژی پیشرفته شماره 3 Alternatives to the Underline: Advanced Strategy #3

• آیا می توانید از ترکیبی از سبک های پیوند استفاده کنید؟ Can You Use a Mix of Link Styles?

• یک ظاهر طراحی شده برای رزرو برای پیوندها Styling To Reserve for Links

• آزمون بخش 7 (3 سوال) Section 7 Quiz (3 questions)

• بخش 7 خلاصه عمل Section 7 Action Summary

طراحی حالت های تعاملی Designing Interactive States

• مقدمه بخش 8 Introduction to Section 8

• به روز رسانی Update

• کدام عناصر تعاملی برای طراحی چندین حالت و نحوه انجام آن Which Interactive Elements to Design Multiple States for and How to Go About It

• 10 حالت اساسی برای طراحی The 10 Fundamental States to Design

• چگونه (به تنهایی) تعیین کنیم چگونه چیزی را در دسترس قرار دهیم: 6 سوال آشکار How to Determine (On Your Own) How to Make Something Accessible: 6 Revealing Qs

• تفاوت بین "راهنمای سبک" و "سیستم طراحی" (و "استانداردهای طراحی") Difference Between a “Style Guide” and “Design System” (and “Design Standards”)

• ایالات تمرکز (جدید) Focus States (NEW)

• ایالات شناور (جدید) Hover States (NEW)

فینال بزرگ! Grand Finale!

• تبریک می گویم!! Congratulations!!

• فرم بازخورد دوره Course Feedback Form

جایزه Bonus

• جایزه - این دوره را تا 90٪ تخفیف به اشتراک بگذارید BONUS - Share this course at up to 90% off

• گام های بعدی - 7 موضوع برای ادامه ارتقاء سطح تخصص دسترسی شما NEXT STEPS - 7 Topics to Continue Leveling Up Your Accessibility Expertise