IIRF Online > Design > User Experience Design > Web Accessibility > How To Design for Accessibility: for UX Designers (WCAG 2.2)
How To Design for Accessibility: for UX Designers (WCAG 2.2) by Udemy
Accessibility and Usability Best Practices for UX and UI Designers (User Experience + WCAG 2.2, Section 508, ADA)
Course Highlights
- How to specifically design for accessibility (the essentials for designers - UX, UI, and Product)
- The top 51 best practices and strategies for designing for accessibility (plus usability & SEO)
- Accessible color contrast & color independence
- Accessible wording - Verb or noun, short or medium labels, are "read more" links bad, and more
- Accessible styling - Border radius, capitalization, fill & color, shadow & elevation, competition, proximity
- Designing accessible error messages, menu items, links, progress trackers
- Designing accessible charts, graphs, and other data visualizations
- Designing amazing signifiers (aka perceived affordances) for accessibility
- Accessible interaction states and the 10 states to design (focus, hover, etc)
- How to combine accessibility tactics
- Accessibility mistakes to avoid
- Accessibility Fundamentals - The who, what, when, where, and why of accessibility
- Section 508, ADA, and WCAG 2.1 and 2.2
Skills you will learn!
Curriculum
6 Topics
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
16 Topics
Introduction to Section 2
Who Is Accessibility About
A Remarkable Glimpse into The Lives of 10 People
5 Astounding Stats That Reveal Just How Many People Accessibility Includes
Disabilities Can Be Situational Temporary Or Permanent
Use My Top 4 Pro Tips
Busting 5 Accessibility Myths (Video)
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
14 Topics
Introduction to Section 3
Note-Taking Resource: S3 Action Summary PDF
Color Contrast Vitals
Did You Know...
Experience It: Red-Green
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)
Example: UI Elements
Section 3 Quiz (8 questions)
Section 3 Action Summary
Course Feedback
16 Topics
Introduction to Section 4
Note-Taking Resource: S4 Action Summary PDF
How to Check for Color Independence
Example: Errors
Example: Current Menu Item
Example: Links
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
Section 4 Quiz (4 questions)
Section 4 Action Summary
15 Topics
Introduction to Section 5
Note-Taking Resource: S5 Action Summary PDF
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 History (Experience Design dates back as far as 4000 BC with Feng Shui)
Moving into Usability Territory: Key Players
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)
Section 5 Quiz (3 questions)
Section 5 Action Summary
18 Topics
Introduction to Section 6
Note-Taking Resource: S6 Action Summary PDF
Button or Link: When to Use Which?
Button Guessing Game & Intro to 7 Techniques for Signifying “Clickability”
Technique 1: Shape and Consistency (Button or Not)
Technique 2: Border Radius (Personality)
Technique 3: Fill and Color (Hierarchy)
Technique 4: Shadow (Elevation)
Technique 5: Competition & Priorities
Technique 6: Proximity (Breathability Relation Touch Targets)
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)
Section 6 Quiz (4 questions)
Section 6 Action Summary
11 Topics
Introduction To Section 7
Note-Taking Resource: S7 Action Summary PDF
Link Styling
Alternatives to the Underline: Advanced Strategy #1
Resource: Link Contrast Checker
Alternatives to the Underline: Advanced Strategy #2
Alternatives to the Underline: Advanced Strategy #3
Can You Use a Mix of Link Styles?
Styling To Reserve for Links
Section 7 Quiz (3 questions)
Section 7 Action Summary
8 Topics
Introduction to Section 8
Update
Which Interactive Elements to Design Multiple States for and How to Go About It
The 10 Fundamental States to Design
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)
2 Topics
Congratulations!!
Course Feedback
2 Topics
NEXT STEPS - 7 Topics to Continue Leveling Up Your Accessibility Expertise
BONUS
How To Design for Accessibility: for UX Designers (WCAG 2.2)
Related Web Accessibility Courses
Thank You!
Your review has been submitted successfully.