Accessibility testing checklist for Grade 7 Web Design

📚 Quick Study Guide: Web Accessibility for Grade 7 Designers

• 🌐 What is Web Accessibility? It's about making sure websites can be used by everyone, including people with disabilities (like visual impairments, hearing loss, or motor difficulties). Think of it as designing for all users!
• 👀 Visual Elements Checklist:
  • 🎨 Color Contrast: Is there enough difference between text color and background color? (e.g., dark text on a light background, not light gray on white).
  • 🖼️ Alt Text for Images: Every image needs a short, descriptive "alt text" so screen readers can describe it to users who can't see the image. (e.g., `<img src="cat.jpg" alt="A fluffy orange cat sleeping on a blue couch">`).
  • 📏 Font Size & Readability: Is the text large enough to read easily? Avoid tiny fonts.
• ⌨️ Navigation & Interaction Checklist:
  • 🖱️ Keyboard Navigation: Can you use the website using ONLY the keyboard (Tab key, Enter key, arrow keys) without a mouse? All interactive elements (links, buttons) should be reachable.
  • 🔗 Clear Link Text: Instead of "Click Here," use descriptive text like "Read more about web design tips."
• 🎧 Audio & Video Checklist:
  • 🗣️ Captions & Transcripts: If you have videos or audio, do they have captions (text on screen) or a transcript (a written version of what's said) for people who are deaf or hard of hearing?
• 📝 Content Structure & Clarity Checklist:
  • 🏷️ Meaningful Headings: Use `<h1>`, `<h2>`, `<h3>` tags logically to organize your content, not just for bigger text. (e.g., `<h1>` for the main title, `<h2>` for sections).
  • ✍️ Simple Language: Use clear, straightforward language that's easy for a Grade 7 student (and everyone else!) to understand. Avoid jargon.
• ⚙️ Testing Your Website:
  • 🔍 Manual Check: Try navigating your site with just the keyboard. Close your eyes and imagine someone describing the page to you – does the alt text make sense?
  • ➕ Browser Extensions: Tools like "Lighthouse" (built into Chrome) or "WAVE" can help you find common accessibility issues.

✅ Practice Quiz: Web Accessibility for Grade 7

Choose the best answer for each question.

1. Which of the following is the MOST important reason to add "alt text" to an image on your website?

   A. To make the image load faster.
   B. To make the website look more professional.
   C. To describe the image to users who cannot see it, like those using screen readers.
   D. To help search engines find your image more easily.

2. When designing a website for accessibility, what does "color contrast" primarily refer to?

   A. Using many different bright colors.
   B. The difference in brightness between text and its background.
   C. Making sure all colors match your school's theme.
   D. Using only black and white colors.

3. A website is considered "keyboard accessible" if:

   A. You can type messages into a chat box.
   B. All links and buttons can be activated using only the Tab and Enter keys.
   C. It has a search bar that works.
   D. You can copy and paste text from the page.

4. Why is it important to use clear and descriptive text for links (e.g., "Learn about our school" instead of "Click Here")?

   A. It makes the website prettier.
   B. It helps users know where the link will take them, especially those using screen readers.
   C. It saves space on the page.
   D. It's a new rule for all websites.

5. For a video on your website, what accessibility feature would help someone who is deaf or hard of hearing?

   A. Making the video full screen.
   B. Providing a high-quality audio track.
   C. Including captions or a transcript of the dialogue.
   D. Using background music throughout the video.

6. What is the main purpose of using `<h1>`, `<h2>`, `<h3>` tags logically on a webpage?

   A. To make some text bigger and bolder than others.
   B. To create a visual hierarchy and help screen readers understand the page structure.
   C. To make the page load faster.
   D. To add special effects to the text.

7. Imagine you're testing your website for accessibility. Which of these is a good manual test?

   A. Checking if all your images are high-resolution.
   B. Asking a friend to click every button.
   C. Navigating through your entire website using only the keyboard (Tab, Enter keys).
   D. Making sure all your links open in a new tab.