About the course
This comprehensive two-day "Inclusive Web App Design" course provides a deep understanding of web accessibility principles and equips you with practical skills to design and build inclusive user experiences.
You'll learn the ethical, legal, and business imperatives behind accessibility, delve into the WCAG (Web Content Accessibility Guidelines), and understand common barriers faced by users with disabilities.
Through hands-on exercises and a coding challenge, you'll master techniques for colour contrast, designing for colour blindness, creating large touch targets, using semantic HTML effectively, building accessible forms, and implementing ARIA (Accessible Rich Internet Applications) for dynamic content.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Understand the ethical, legal, and business reasons for web accessibility and the principles of WCAG.
- Apply design principles for colour contrast, colour blindness, and touch targets to create more accessible interfaces.
- Structure web content semantically using appropriate HTML elements for better accessibility.
- Build accessible forms with proper labels, validation, and user guidance.
- Implement ARIA roles, states, and properties to enhance the accessibility of dynamic and interactive elements.
- Ensure effective keyboard navigation and focus management within web applications.
- Utilize accessibility testing tools like Lighthouse and Axe to identify and address accessibility issues.
- Perform manual accessibility testing techniques, including keyboard-only navigation and screen reader evaluation.
- Understand best practices for creating responsive designs with accessibility in mind.
- Identify resources for continued learning and staying up-to-date with web accessibility standards.
-
This course is essential for web designers, UI/UX designers, front-end developers, full-stack developers, accessibility specialists, product managers, and anyone involved in the planning, design, development, and testing of web applications who wants to create inclusive and user-friendly experiences for all users.
-
To make the most of this course, delegates should have attended our Intro to HTML5 and CSS3 training course or have a basic understanding of web development fundamentals, including HTML and CSS.
Familiarity with basic JavaScript concepts will be beneficial, particularly for understanding ARIA and dynamic content accessibility, but is not strictly required. A willingness to learn about user needs and a commitment to creating inclusive digital experiences are highly encouraged.
-
This Inclusive Web Design course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to Accessibility
Why accessibility matters: ethical, legal, and business perspectives.
Overview of WCAG principles: Perceivable, Operable, Understandable, and Robust (POUR).
Common barriers for users with disabilities.
Design Principles
Colour Contrast
Tools for checking contrast ratios.
Best practices for accessible colour palettes.
Colour Blindness
Designing with colour blindness in mind.
Avoiding reliance on colour alone for conveying information.
Large Touch Targets
Guidelines for responsive design and touch-friendly interfaces.
Practical tips for designing accessible buttons and links.
Semantic HTML
Importance of semantic elements for screen readers.
Key elements: `<header>`, `<main>`, `<footer>`, `<section>`, `<article>`, etc.
Forms and Labels
Proper use of `<label>` and `for` attributes.
Accessible form validation.
Examples of good and bad form practices.
Hands-On Exercise
Evaluate real or sample web pages for colour contrast, colour blindness considerations, and touch target issues.
Use tools like a contrast checker and browser dev tools.
Day 2: Practical Implementation
ARIA and Accessibility Features
Overview of ARIA roles, states, and properties.
When to use ARIA (and when not to).
Examples: landmarks (`role="banner"`, `role="navigation"`), live regions, etc.
Interactive Elements
Making buttons, links, and controls accessible.
Keyboard navigation and focus management.
Hands-On Exercise
Refactor a basic web page to include semantic HTML and ARIA features.
Accessibility Testing
Tools: Lighthouse, Axe, screen readers (e.g., NVDA, VoiceOver).
Manual testing techniques (e.g., keyboard-only navigation).
Coding Challenge
Build an accessible form using semantic HTML and ARIA.
Style it with CSS, ensuring responsive design and large touch targets.
Wrap-Up and Next Steps
Recap of key takeaways.
Resources for continued learning (e.g., WCAG documentation, MDN guides).
Open Q&A and feedback.
-
Web Content Accessibility Guidelines (WCAG) Overview - The official overview of the WCAG from the World Wide Web Consortium (W3C).
MDN Web Docs - Accessibility - Comprehensive documentation and guides on web accessibility from Mozilla.
WAI-ARIA Overview - Information and specifications on Accessible Rich Internet Applications (ARIA) from the W3C.
Google's Accessibility Fundamentals - A practical guide to web accessibility from Google's web.dev.
Axe - Web Accessibility Testing Tool - Information and resources for the popular Axe accessibility testing tool.
Trusted by
