React
/Intermediate
Screen Readers
Definition
Software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display.
Explain Like I'm New
A screen reader is a robot that reads your website out loud. If you use a bunch of nested `<div>` tags with no text, the robot will just say 'group, group, group' and the user will have no idea what is happening. You must structure your React app logically.
Real World Example
Using the `.sr-only` CSS class in Tailwind to visually hide a label like 'Search Bar', but keep it in the DOM so the screen reader announces it.
Common Use Cases
- •Ensuring compliance with ADA/WCAG standards
Interactive Example
Interview Questions
basic
- What is `alt` text on an image?
intermediate
- What happens if an image is purely decorative?
advanced
- How do you announce dynamic React state changes to a screen reader?