← Accessibility basics lesson New set →

Web Worksheet: Accessibility Basics

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

Answer key

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

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