Course Content
Module 1: Introduction to Accessibility and Inclusivity
• 1.1 What is Digital Accessibility? Understand the importance of accessibility in the digital world and its impact on individuals with disabilities. • 1.2 Overview of Disabilities and Assistive Technologies Explore different types of disabilities (visual, auditory, cognitive, motor) and the assistive technologies used by people with disabilities. • 1.3 The Role of Inclusive Design in Promoting Diversity Learn how inclusivity strengthens design and fosters a diverse user base by addressing diverse needs. • 1.4 Legal Frameworks for Accessibility (ADA, Section 508, and WCAG) Gain insight into legal standards and guidelines that promote digital accessibility.
0/4
What is Digital Accessibility?
00:00
Overview of Disabilities and Assistive Technologies
00:00
The Role of Inclusive Design in Promoting Diversity
00:00
Legal Frameworks for Accessibility (ADA, Section 508, and WCAG)
00:00
Module 2: The POUR Principles in Web Design
• 2.1 Perceivable: Creating Content for All Senses Explore strategies to ensure that all content (text, images, audio, video) can be perceived by users with different disabilities. - Lab: Writing effective alternative text for images - Lab: Using transcripts and captions for media • 2.2 Operable: Designing Functional Interfaces Learn how to make digital interfaces operable for users with diverse abilities, including keyboard navigation and accessible control mechanisms. - Lab: Creating keyboard-accessible navigation - Lab: Designing intuitive form controls • 2.3 Understandable: Clear and Consistent Design Understand how to make content and design easy to comprehend, using clear language, logical layout, and predictable functionality. - Lab: Designing for readability and cognitive load • 2.4 Robust: Future-Proofing Your Design Discover ways to ensure your design remains accessible across various devices, browsers, and assistive technologies. - Lab: Testing your design on multiple platforms and with screen readers
0/4
Perceivable: Creating Content for All Senses
00:00
Operable: Designing Functional Interfaces
00:00
Understandable: Clear and Consistent Design
00:00
Robust: Future-Proofing Your Design
00:00
Module 3: Applying WCAG Standards
• 3.1 Introduction to WCAG 2.1 Guidelines Deep dive into the Web Content Accessibility Guidelines (WCAG) and their application to digital design. • 3.2 Levels of Conformance: A, AA, and AAA Learn about the different levels of accessibility conformance and how to prioritize accessibility improvements. • 3.3 Evaluating Your Website for WCAG Compliance - Lab: Conducting an accessibility audit using online tools
0/3
Introduction to WCAG 2.1 Guidelines
00:00
Levels of Conformance: A, AA, and AAA
00:00
Evaluating Your Website for WCAG Compliance
00:00
Module 4: Designing for Specific Disabilities
• 4.1 Designing for Visual Impairments (Including Color Blindness) Learn how to optimize your design for people with visual impairments, using contrast, screen readers, and magnification tools. - Lab: Implementing high-contrast color schemes • 4.2 Designing for Auditory Disabilities Discover ways to make multimedia content accessible to users with hearing impairments, including transcripts and sign language options. - Lab: Adding captions to videos • 4.3 Designing for Motor Disabilities Learn best practices for designing websites and apps that are easy to navigate for users with motor impairments. - Lab: Simplifying navigation and form inputs for motor disabilities • 4.4 Designing for Cognitive Disabilities Explore strategies to simplify content and interface design to support users with cognitive impairments, learning disabilities, or neurological conditions. - Lab: Reducing cognitive load through simple UI design
0/4
Designing for Visual Impairments (Including Color Blindness)
00:00
Designing for Auditory Disabilities
00:00
Designing for Motor Disabilities
00:00
Designing for Cognitive Disabilities
00:00
Module 5: Tools and Resources for Accessible Design
• 5.1 Accessibility Evaluation Tools Explore various online tools and plugins that help evaluate the accessibility of digital designs. • 5.2 Assistive Technology Simulations Experience how users with disabilities interact with websites using screen readers, magnifiers, and other assistive technologies.
0/2
Accessibility Evaluation Tools
00:00
Assistive Technology Simulations
00:00
Module 6: Best Practices for Ongoing Accessibility
• 6.1 Creating an Accessibility Plan for Your Organization Learn how to develop a comprehensive accessibility plan that integrates POUR principles into your design process. • 6.2 Accessibility Testing and Maintenance Understand the importance of continuous accessibility testing and strategies to keep your digital designs inclusive over time. • 6.3 Case Studies of Successful Accessible Designs Review real-world examples of websites and applications that have successfully implemented accessibility standards.
0/3
Creating an Accessibility Plan for Your Organization
00:00
Accessibility Testing and Maintenance
00:00
Case Studies of Successful Accessible Designs
00:00
Module 7: Final Project
• 7.1 Capstone Project: Designing an Accessible Web Page Apply all the concepts learned in the course by designing a fully accessible web page, meeting WCAG 2.1 guidelines and incorporating POUR principles. Participants will receive feedback on their designs. ________________________________________ Assessment • Quizzes and Knowledge Checks Each module will contain quizzes and exercises to reinforce the principles and practices discussed. • Final Project Evaluation The capstone project will be assessed for accessibility, usability, and compliance with WCAG standards.
0/3
Capstone Project: Designing an Accessible Web Page
00:00
Quizzes and Knowledge Checks
00:00
Final Project Evaluation: Capstone Project Assessment Criteria
00:00
The POUR Principles of Design: Inclusivity and Accessibility for People with Disabilities
About Lesson

Introduction to the Capstone Project

The final capstone project is an opportunity to apply everything you’ve learned about accessibility, including the POUR principles (Perceivable, Operable, Understandable, Robust) and WCAG 2.1 guidelines, to design a fully accessible web page. This project will challenge you to create a web page that is usable by all people, including those with disabilities, and incorporates best practices for accessibility.

The project will be evaluated based on how well your design meets the WCAG 2.1 standards and the overall accessibility and usability of the page. You will receive feedback on your design, which you can use to make further improvements.

Capstone Project Requirements

Objective:
Design a fully accessible web page that meets WCAG 2.1 Level AA guidelines and incorporates the POUR principles of accessibility.

What You Need to Include:

  1. Text Content: Make sure all text is accessible, clear, and easy to read.
  2. Images and Media: Provide alt text for images, captions, or transcripts for multimedia.
  3. Navigation: Ensure that the page is fully navigable by keyboard and that focus indicators are visible.
  4. Forms: Include at least one form element, such as a contact form, that is accessible.
  5. Interactive Elements: Buttons, links, and other interactive elements should be operable by various input methods.
  6. Color Contrast and Text Scaling: Test the contrast ratio of text against the background and allow text scaling without breaking the layout.
  7. Semantic HTML: Use appropriate HTML tags (e.g., headings, lists, landmarks) to structure your content logically.

Steps for Designing an Accessible Web Page

1. Planning Your Web Page

Before jumping into the design, outline the structure of your web page. Consider:

  • What content will you include? (e.g., headings, paragraphs, forms, media)
  • How will users navigate the page? (e.g., navigation menus, internal links)
  • Who is your target audience? Make sure your content and layout are accessible to people with diverse needs, including users with visual, auditory, cognitive, or motor disabilities.
2. Ensuring Perceivability

Users should be able to perceive all content on your page, regardless of their abilities. This means making sure that:

  • Alt text is provided for all images so that users with visual impairments can understand the content.
  • Captions and transcripts are available for any audio or video content.
  • Text is readable, with proper font size, line spacing, and high contrast between text and background.
3. Making Your Page Operable

Your page should be fully operable by keyboard and assistive technologies. This includes:

  • Keyboard Navigation: Ensure that all elements are accessible using the keyboard. Users should be able to navigate using the “Tab” key, with logical focus order.
  • Interactive Elements: Make sure buttons, links, and forms are accessible via keyboard and screen readers.
  • Visible Focus Indicators: Highlight which element is currently in focus when navigating via keyboard.
4. Designing for Understandability

Ensure that users can easily understand how to navigate and interact with your page. Best practices include:

  • Consistent Navigation: Provide consistent navigation throughout the page and use clear, descriptive labels for menus and links.
  • Plain Language: Write in clear, simple language and avoid technical jargon. Break up long paragraphs into smaller sections.
  • Form Instructions: Make sure forms have clear labels and instructions. Error messages should provide guidance on how to correct mistakes.
5. Making the Design Robust

Your page should be robust enough to work across different browsers, devices, and assistive technologies. This includes:

  • Using Semantic HTML: Ensure proper use of HTML tags like <header>, <nav>, <article>, and <footer> to create a logical structure that is easily interpreted by screen readers.
  • ARIA Roles: Where necessary, use ARIA (Accessible Rich Internet Applications) roles to enhance accessibility (e.g., role="button" for clickable elements).
  • Compatibility with Assistive Technologies: Test your page with screen readers and other assistive technologies to ensure it works across a range of devices.

Key Accessibility Features to Include

  1. Text Alternatives:
    Provide descriptive alt text for all non-text content, including images, icons, and charts. Alt text should clearly explain the function or meaning of the image.

  2. Keyboard Accessibility:
    Ensure that users can navigate through the web page and activate all buttons, links, and form elements using only the keyboard. The “Tab” key should move through interactive elements in a logical order, and focus indicators should be clearly visible.

  3. Form Accessibility:
    Include at least one form on your web page, such as a contact form or a subscription form. Forms must:

    • Have properly labeled input fields (e.g., using <label> for each input).
    • Provide clear error messages when incorrect information is entered.
    • Be fully operable using a keyboard or screen reader.

  4. Accessible Media:
    If you include any videos or audio clips, provide transcripts and closed captions. Ensure that users with visual or auditory impairments can still access the information in the media.

  5. Color Contrast and Text Size:
    Check the contrast between text and background colors using tools like the Color Contrast Analyzer to ensure it meets WCAG 2.1 standards (minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text). Allow users to resize text up to 200% without losing content or functionality.

  6. Semantic HTML Structure:
    Use proper HTML tags to create a well-structured page that screen readers can easily interpret. This includes using heading levels (<h1>, <h2>, etc.) in a logical order and ensuring that navigation menus, lists, and forms are properly coded.

Tools and Resources for Designing Your Accessible Web Page

  • WAVE (Web Accessibility Evaluation Tool):
    Use this tool to check your page for accessibility issues. It provides feedback on problems such as missing alt text, low contrast, and keyboard inaccessibility.
    https://wave.webaim.org/

  • Axe Accessibility Checker:
    A browser extension that helps identify WCAG violations and offers suggestions for improving accessibility.
    https://www.deque.com/axe/

  • Color Contrast Analyzer:
    Test the contrast ratio between text and background colors to ensure readability for users with visual impairments.
    https://developer.paciellogroup.com/resources/contrastanalyser/

  • Screen Readers (NVDA, VoiceOver):
    Use a screen reader to test how your web page is interpreted and navigated by users with visual impairments.

Project Submission and Feedback

Once your web page design is complete:

  1. Submit your web page: Submit your HTML, CSS, and any other relevant files.
  2. Accessibility Evaluation: Your web page will be evaluated based on how well it meets WCAG 2.1 Level AA standards, incorporates POUR principles, and addresses accessibility issues.
  3. Receive Feedback: You will receive personalized feedback on your design, highlighting areas where you excelled and suggestions for further improvements.

End of Lecture Quiz

1. What does the “O” in POUR stand for?

  • a) Operable
  • b) Optional
  • c) Optimized

Answer: a) Operable
Rationale: “O” stands for Operable, which means that users should be able to interact with all the features on a web page, including navigation, forms, and interactive elements.

2. Which of the following tools would you use to check the contrast ratio on your web page?

  • a) WAVE
  • b) Color Contrast Analyzer
  • c) NVDA

Answer: b) Color Contrast Analyzer
Rationale: The Color Contrast Analyzer is specifically designed to check the contrast ratio between text and background colors to ensure readability.

3. What should you do to ensure your web page is fully navigable using only the keyboard?

  • a) Make sure all links and buttons are clickable.
  • b) Ensure all interactive elements can be accessed and used by the “Tab” key, and provide visible focus indicators.
  • c) Provide additional images and animations.

Answer: b) Ensure all interactive elements can be accessed and used by the “Tab” key, and provide visible focus indicators.
Rationale: Keyboard navigation ensures that users who cannot use a mouse can still access all the interactive elements on your page.

Conclusion

The capstone project is a culmination of everything you’ve learned about accessible design. By designing a fully accessible web page that adheres to WCAG 2.1 guidelines and integrates the POUR principles, you’ll gain practical experience in creating inclusive digital content. Remember to focus on key aspects such as text alternatives, keyboard accessibility, clear navigation, and robust design to ensure your page works for all users.

Join the conversation
Previous
Next