← Accessibility basics lesson New set →

Web Worksheet: Accessibility Basics

HTML and CSS lesson 24: Accessibility basics · Set 182 · 40 questions
TalentJR

Code tip (Pages for everyone): Headings go down one level at a time: h1 → h2 → h3 (they may jump back up). Alt text on images, clear link text, labels on form boxes, big enough text. Strong contrast (black on white, yellow on black) is easy to read; light grey on white is not.

NameDateTime takenScore ___ / 40
  1. 1.♿ Who uses a screen reader? (a) only coders (b) only robots (c) only teachers (d) people who are blind
  2. 2.♿ What does good colour contrast mean? (a) many bright colours (b) no colours at all (c) only red text (d) text stands out clearly
  3. 3.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) makes it harder (b) helps everyone
  4. 4.♿ Is this heading order correct (no level skipped)?
    <h1> → <h3> → <h4> → <h3>
    (a) Yes (b) No
  5. 5.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) helps everyone (b) makes it harder
  6. 6.🌗 Is white on dark blue easy or hard to read? (a) easy to read (b) hard to read
  7. 7.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h3>
    (a) No (b) Yes
  8. 8.♿ Does this help everyone, or make the page harder to use: label every form box? (a) makes it harder (b) helps everyone
  9. 9.True or false: “use headings in order” helps everyone use the page. (a) False (b) True
  10. 10.♿ Does this help everyone, or make the page harder to use: skipping heading levels? (a) makes it harder (b) helps everyone
  11. 11.True or false: “write clear link text” makes the page harder to use. (a) False (b) True
  12. 12.🌗 Is white on black easy or hard to read? (a) hard to read (b) easy to read
  13. 13.True or false: “skipping heading levels” makes the page harder to use. (a) False (b) True
  14. 14.True or false: “link text “click here”” makes the page harder to use. (a) True (b) False
  15. 15.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h4> (b) <h2> (c) <h1> (d) <h5>
  16. 16.♿ Which link text is clearest? (a) here (b) click here (c) Read the fruit facts (d) link
  17. 17.🌗 Is black on white easy or hard to read? (a) easy to read (b) hard to read
  18. 18.♿ Does this help everyone, or make the page harder to use: use headings in order? (a) helps everyone (b) makes it harder
  19. 19.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) makes it harder (b) helps everyone
  20. 20.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h5> (b) <h3> (c) <h6> (d) <h2>
  21. 21.Which colour pair is hard to read? (a) white on black (b) white on dark blue (c) red on green (d) yellow on black
  22. 22.🌗 Is blue on purple easy or hard to read? (a) hard to read (b) easy to read
  23. 23.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h2>
    (a) Yes (b) No
  24. 24.♿ A part of the page is under a <h5> heading. Which tag should its sub-heading use? (a) <h3> (b) <h4> (c) <h6> (d) <h5>
  25. 25.True or false: “images with no alt” helps everyone use the page. (a) False (b) True
  26. 26.True or false: “tiny grey text” makes the page harder to use. (a) False (b) True
  27. 27.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h4>
    (a) No (b) Yes
  28. 28.♿ A part of the page is under a <h1> heading. Which tag should its sub-heading use? (a) <h6> (b) <h1> (c) <h2> (d) <h3>
  29. 29.Which colour pair is easy to read? (a) pink on red (b) yellow on white (c) blue on purple (d) white on dark blue
  30. 30.Which colour pair is hard to read? (a) black on white (b) dark grey on white (c) light grey on white (d) yellow on black
  31. 31.Which colour pair is easy to read? (a) pink on red (b) black on white (c) light grey on white (d) yellow on white
  32. 32.♿ Does this help everyone, or make the page harder to use: images with no alt? (a) makes it harder (b) helps everyone
  33. 33.True or false: “use headings in order” makes the page harder to use. (a) True (b) False
  34. 34.🌗 Is yellow on black easy or hard to read? (a) hard to read (b) easy to read
  35. 35.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) helps everyone (b) makes it harder
  36. 36.🌗 Is dark grey on white easy or hard to read? (a) hard to read (b) easy to read
  37. 37.Which colour pair is easy to read? (a) white on black (b) blue on purple (c) yellow on white (d) pink on red
  38. 38.🌗 Is red on green easy or hard to read? (a) easy to read (b) hard to read
  39. 39.🌗 Is yellow on white easy or hard to read? (a) hard to read (b) easy to read
  40. 40.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read

Answer key

  1. people who are blind
  2. text stands out clearly
  3. helps everyone
  4. No
  5. helps everyone
  6. easy to read
  7. No
  8. helps everyone
  9. True
  10. makes it harder
  11. False
  12. easy to read
  13. True
  14. True
  15. <h5>
  16. Read the fruit facts
  17. easy to read
  18. helps everyone
  19. makes it harder
  20. <h3>
  21. red on green
  22. hard to read
  23. Yes
  24. <h6>
  25. False
  26. True
  27. Yes
  28. <h2>
  29. white on dark blue
  30. light grey on white
  31. black on white
  32. makes it harder
  33. False
  34. easy to read
  35. makes it harder
  36. easy to read
  37. white on black
  38. hard to read
  39. hard to read
  40. hard to read

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids