Web Accessibility (a11y): Semantic HTML and ARIA

Building for accessibility (a11y) isn't just about ethics; it's about making a better product for everyone. The foundation is semantic HTML. Use a <button> for clickable actions, not a <div>. Screen readers announce 'button' to the user, telling them what interaction is available. If you must use a div, you need to add role='button' and keyboard event handlers, which is complicated. For images, always use alt text that describes the content, not just 'image'. For complex components like modals or tabs, we use ARIA (Accessible Rich Internet Applications) attributes like aria-expanded or aria-hidden to convey state to assistive technology. I learned the hard way that a visually perfect website can be completely unusable for someone relying on a keyboard or screen reader. Testing with a keyboard (tab to navigate) should be part of your development workflow from day one.