Library › Coding AI › High school students

Make a bake sale table readable for screen readers

Practice: Setting limits and rules. About 5 minutes.

About this exercise

Your student council page has a sales table with no headers. Add a caption with the exact text 'Bake sale sales by day', put the top row in a thead with th cells using scope="col", put the other rows in a tbody, and turn the first cell of each of those rows into a th with scope="row". Keep every number exactly as it is, and add no CSS or style attributes. Return only the table in exactly 1 code block of at most 30 lines, under 20 words of text.

Common mistakes when you ask AI for this

  • Guessing the caption. The AI writes its own caption, or skips it. Try: Give it: "Caption exactly: Bake sale sales by day."
  • Headers without scope. The AI changes td to th but forgets scope, or misses the row headers. Try: Add: "Top row in thead with th scope=\"col\"; other rows in tbody; first cell of each th scope=\"row\"."
  • Redesigning the table. The AI adds CSS, thead/tbody styling or reformats the money. Try: Add: "Keep every number and class; no CSS or style attributes."
  • The whole page back. The AI reprints the page and explains accessibility. Try: Add: "Return only the table, no text."

What a strong prompt includes

  • Gives the caption text
  • Asks for scope and sections
  • Covers row headers
  • Protects the data
  • Asks for only the table

Practice this now ↑

Related exercises