Mission 14: ARIA for the Void
The comms panel uses `<div>` tags for buttons, which are invisible to the officer's screen reader. First, give them a proper role.
00:00
Mission Objective
Add `role="button"` and `tabindex="0"` to the send button `<div>` to make it both identifiable and focusable.
Step 1 / 3
System Briefing: Making Interfaces Talk
The comms officer on the starship Kepler, who is blind, relies on a neural-to-speech interface to do his job. A newly installed comms panel is completely silent to his device because it uses non-standard elements (like <div>s styled as buttons) and icons without text labels. Your mission is to use ARIA (Accessible Rich Internet Applications) attributes to give these abstract elements semantic meaning, making them understandable to assistive technologies.
Core ARIA Attributes
role: Defines what an element's purpose is. For example,role="button"tells a screen reader to treat a<div>like a button.aria-label: Provides an accessible name for an element when one isn't visible on the screen, which is essential for icon-only buttons.aria-live: Identifies a "live region" whose content may change dynamically. Setting it topolitetells a screen reader to announce the change when it's finished with its current task.