How do you design something that works well for screen reader users?

Design the structure, not just the picture. Give the page a logical heading hierarchy and landmarks, make sure every control has a meaningful accessible name, and write alt text based on the purpose of the image rather than a description of it. Decide what should be announced when content changes, keep focus predictable, and make sure anything possible with a mouse is possible with a keyboard.

I think about what the thing sounds like, not just what it looks like. So the first pass is structure: is there one h1, do the sections nest sensibly, is there a main landmark, and does the reading order match the visual order once it reflows. Then names. The test I use is whether a control still makes sense read aloud with no surrounding context. A table of ten rows where every link says 'view' is fine on screen and useless out loud, so it becomes 'view invoice 4021' with the extra part hidden visually. Alt text I write for purpose. The same photo of a laptop is decorative on a marketing page and needs real description in a support article showing where a port is. Announcements are the part people forget: if a filter updates results without a page load, a screen reader user gets nothing unless we say so, so I specify a polite live region and exactly what it says. And I put VoiceOver on and go through the built flow myself. It is humbling and it always finds something.