📖 Upload as Material in Google Classroom:
- Slides (make a copy for your program - upload the copy)
- Coding Exercise(s)
📝 Upload as Assignment in Google Classroom (5 points):
- Exit Ticket (DO NOT MAKE A COPY - upload as link)
This lesson focuses on the principles of creating inclusive and user-friendly web designs that cater to a broad audience, including those with disabilities. Key components include improving color contrast for readability, implementing alt attributes for visual content to aid screen readers, and understanding why accessibility is a crucial aspect of ethical web development. By emphasizing hands-on exercises and real-world applications, the lesson aims to equip learners with practical skills to make technology more accessible to all.
-
⏰ Do Now + Share Out (5) :
- Prompt students to visit Code Nation’s Pizzeria website.
- Ask them to reflect and share their feelings about the design and structure, and whether they find it difficult to navigate.
-
🌈 Accessibility & Contrast (10) :
- Introduce the concept of accessibility and its importance.
- Highlight the problems with the pizzeria's website.
- Teach color contrast principles, including the 4.5:1 ratio and hex colors.
- Encourage students to use color contrast tools.
-
💻 Code Along (10) :
- Guide students in coding to improve the pizzeria website's readability.
- Encourage students to follow along and ask questions.
-
🗣️ Alt Attributes (5) :
- Explain alt attributes and their importance for visually impaired users.
- Teach the syntax for adding alt attributes to images.
- Demonstrate how to include multiple attributes.
-
💻 Code It Solo (10) :
- Provide independent coding tasks focused on accessibility techniques.
- Offer optional challenges such as CSS Border, Margin, and Padding.
-
👋 Exit Ticket & Closing (5) :
- Direct students to the Exit Ticket in Google Classroom.
- Close the lesson with final thoughts and ensure all exit tickets are submitted.
-
Accessibility Only Benefits People with Disabilities: This misconception overlooks that good accessibility design enhances the user experience for everyone, not just those with disabilities.
-
Accessibility is Costly and Time-consuming: The belief that making content accessible is overly expensive or burdensome can hinder its implementation, whereas planning for accessibility from the start often requires minimal extra effort or cost.
-
Contrast is a Design Choice Only: Failing to recognize the significance of color contrast in readability, especially for vision-impaired users, can lead to accessibility issues.
-
Alt Tags are Optional: Thinking that alt attributes for images are just a decorative or optional element may overlook their vital role in making content accessible for visually impaired users using screen readers.
- n/a