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

The capstone project for this course involves designing a fully accessible web page that meets WCAG 2.1 Level AA standards and incorporates the POUR principles (Perceivable, Operable, Understandable, Robust). The evaluation will assess the accessibility, usability, and compliance of the web page. This assessment ensures that participants have successfully applied the knowledge and skills learned throughout the course.

Evaluation Criteria

1. Accessibility (50%)

Accessibility is the most critical aspect of the final project. The web page will be evaluated on how well it addresses the needs of users with disabilities, including those with visual, auditory, motor, and cognitive impairments.

Key Areas to Assess:

  • Text Alternatives: Ensure that all images and non-text content (e.g., icons, infographics) have descriptive alt text. This allows screen reader users to understand visual elements.
  • Keyboard Accessibility: The web page must be fully navigable using a keyboard. Users should be able to tab through interactive elements, such as links, buttons, and form fields, in a logical order.
  • Multimedia Accessibility: For any video or audio content, closed captions or transcripts must be provided to accommodate users with hearing impairments. Audio descriptions should be available for visually important visual content in videos.
  • Color Contrast and Text Scaling: The page should meet WCAG guidelines for color contrast (4.5:1 for normal text, 3:1 for large text). Additionally, text should be resizable by up to 200% without breaking the layout or content.
  • Forms and Input Fields: Forms must have proper labeling and be operable by keyboard and assistive technologies. Error messages should be descriptive and assist users in correcting their mistakes.

Accessibility Evaluation Tools:

  • WAVE (Web Accessibility Evaluation Tool)
  • Axe Accessibility Checker
  • Color Contrast Analyzer

2. Usability (30%)

In addition to accessibility, the web page will be evaluated for its overall usability. Usability measures how easy it is for all users, including those with disabilities, to navigate, understand, and interact with the web page.

Key Areas to Assess:

  • Clear and Consistent Navigation: The web page should provide a clear navigation structure, such as a navigation bar or menu, that is easy to locate and use. The structure should be consistent across the page, ensuring users can move through the content without confusion.
  • Logical Content Structure: Headings, subheadings, and sections should be logically organized, allowing users to quickly find relevant information. A well-structured page benefits all users, including those with cognitive disabilities and those using screen readers.
  • Plain Language: Content should be written in clear, plain language that is easy to understand. Technical jargon should be avoided, and important information should be conveyed concisely.
  • Feedback and Guidance: Forms and interactions should provide helpful feedback. For example, if a form submission fails, the error message should clearly explain what went wrong and how the user can fix it.

3. Compliance with WCAG 2.1 Standards (20%)

The web page must comply with WCAG 2.1 Level AA guidelines, ensuring that it meets international accessibility standards. The evaluation will focus on whether the page adheres to WCAG’s four guiding principles: Perceivable, Operable, Understandable, and Robust.

Key WCAG Guidelines to Evaluate:

  • Perceivable: Ensure that users can perceive all content, including text alternatives for images, captions for videos, and sufficient color contrast.
  • Operable: The page should be operable by all users, including those relying on keyboard navigation or assistive technologies.
  • Understandable: The page’s content and interactions must be understandable, with clear instructions, readable text, and consistent layouts.
  • Robust: The page should be built using clean, semantic HTML code that works across a range of browsers and assistive technologies. ARIA roles and attributes should be used correctly where necessary to enhance accessibility.

Tools for Testing Compliance:

  • Lighthouse (Google Chrome DevTools)
  • WCAG Compliance Checker

Rubric for Capstone Project Evaluation

Criteria Exemplary (90-100%) Proficient (75-89%) Needs Improvement (50-74%) Unsatisfactory (<50%)
Accessibility (50%) All accessibility features are fully implemented and compliant with WCAG 2.1 standards. The web page includes proper alt text, keyboard accessibility, and accessible forms. Color contrast and multimedia elements are fully accessible. Most accessibility features are implemented correctly, but minor issues (e.g., alt text or keyboard navigation) need improvement. Basic accessibility features are present, but key issues (e.g., missing alt text, inaccessible forms) need significant improvement. The web page does not meet accessibility requirements, with major issues preventing users with disabilities from accessing content.
Usability (30%) The web page is easy to navigate, with clear headings, logical structure, and readable content. Forms provide useful feedback, and the layout is user-friendly for all users. Navigation is mostly clear, and content is understandable, but some areas of usability could be improved (e.g., better form feedback or navigation clarity). Usability is inconsistent, with confusing navigation or unclear instructions. Significant improvements are needed to enhance the user experience. The web page is difficult to navigate or understand, with major usability issues that make it hard for users to find information or complete tasks.
WCAG Compliance (20%) Fully compliant with WCAG 2.1 Level AA standards. The web page demonstrates best practices for each of the POUR principles and works well across different browsers and devices. Mostly compliant with WCAG 2.1 standards, with minor improvements needed to fully meet Level AA requirements. The web page partially meets WCAG guidelines but has several areas that need improvement to reach full compliance. The web page does not meet WCAG 2.1 standards, with significant violations that prevent it from being accessible to a broad audience.

Submission Process

  1. Submission Format:
    Participants should submit their final web page design as HTML, CSS, and JavaScript files (if applicable). They may also provide a link to a live demo of the page if hosted online.

  2. Accessibility Self-Evaluation:
    Participants are encouraged to conduct a self-assessment using tools like WAVE or Axe before submission to identify and fix any accessibility issues.

  3. Feedback Process:
    Each participant will receive detailed feedback on their project, outlining both strengths and areas for improvement. This feedback will focus on the page’s accessibility features, usability, and compliance with WCAG standards.

  4. Resubmission (Optional):
    After receiving feedback, participants may choose to resubmit their projects with improvements. The resubmitted projects will be reassessed to reflect any updates made based on feedback.

Conclusion

The Final Project Evaluation provides an opportunity for participants to demonstrate their understanding of digital accessibility and apply the principles learned throughout the course. By designing a fully accessible web page, participants can showcase their ability to create inclusive digital experiences that meet the needs of all users, including those with disabilities. The evaluation process will assess the page’s accessibility, usability, and WCAG compliance, with constructive feedback provided to help participants refine their designs.

Join the conversation
Previous
Next