ARIA in HTML: Examples and Usage for Grade 7 Computer Science

📚 Quick Study Guide: ARIA in HTML

• 🌐 ARIA stands for Accessible Rich Internet Applications.
• ♿️ It's a set of special attributes you can add to HTML elements to make web content and web applications more accessible to people with disabilities.
• 👂 ARIA helps assistive technologies (like screen readers) understand the purpose and state of elements that might not be clear from standard HTML alone.
• 🚫 ARIA does NOT change how a website looks or functions for most users; it only adds information for assistive technologies.
• 🏷️ Common ARIA attributes include `role` (defines the type of UI element, e.g., `role="button"`), `aria-label` (provides a text label), `aria-labelledby` (refers to an element that labels the current element), and `aria-describedby` (provides a description).
• ⚠️ The First Rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA `role`, `state` or `property`, then do so. (Don't use ARIA if you don't have to!)
• 🧑‍💻 Example: A custom button made with a `
  ` needs `role="button"` and `tabindex="0"` to act like a real button for screen readers.

🧠 Practice Quiz: ARIA in HTML

1. What does ARIA stand for?

   A) Advanced Rich Internet Access
   B) Accessible Rich Internet Applications
   C) Automated Remote Internet Assistant
   D) Applied Robotics for Internet Accessibility

2. What is the main purpose of ARIA in HTML?

   A) To make websites look better with animations and styles.
   B) To help search engines rank websites higher.
   C) To make web content more accessible for people with disabilities.
   D) To speed up how fast a webpage loads.

3. Which of these is an example of an ARIA attribute?

   A) `src`
   B) `href`
   C) `role`
   D) `class`

4. Does ARIA change how a website looks visually for most users?

   A) Yes, it often changes the colors and fonts.
   B) Yes, it adds new visual elements to the page.
   C) No, it primarily adds information for assistive technologies.
   D) Only if the user has a special browser.

5. If you create a custom button using a `

   ` element, what ARIA attribute would you likely add to tell a screen reader it's a button?

   A) `aria-label="button"`
   B) `role="button"`
   C) `type="button"`
   D) `data-button="true"`

6. Which of the following is considered the "First Rule of ARIA"?

   A) Always use ARIA on every HTML element.
   B) Only use ARIA if native HTML elements cannot provide the necessary semantics.
   C) ARIA should only be used for styling purposes.
   D) ARIA is only for websites made with JavaScript.

7. What kind of technology benefits most from ARIA attributes?

   A) Video streaming services
   B) Social media platforms
   C) Assistive technologies like screen readers
   D) Online gaming consoles