accessibility

Semantic HTML uses meaningful elements like <header>, <nav>, <main>, <article>, and <footer> instead of generic <div> tags. I structure content with proper heading hierarchy (<h1> to <h6>). Semantic mark

HTML5 form validation uses attributes like required, pattern, min, max, and type to validate input. I leverage native validation before JavaScript. The <label> element associates text with inputs for accessibility. Input types like email, tel, u

Accessible apps support keyboard-only navigation with proper focus management. Tab order should follow visual order, and all interactive elements must be keyboard accessible. I use tabIndex={0} to make custom controls focusable and tabIndex={-1} for p

Modals are everywhere but often fail accessibility requirements. I build modals with Stimulus that properly manage focus, support keyboard navigation, and announce themselves to screen readers. When opened, focus moves to the modal and gets trapped in

Turbo stream re-renders can drop focus, which is rough for accessibility. Use turbo:render to focus the first invalid field inside a specific container. This feels “native” and reduces user friction.

Media queries adapt layouts to different screen sizes using @media rules with breakpoints. I use mobile-first approach starting with base mobile styles and progressively enhancing with min-width queries. Common breakpoints are 640px (sm), 768px (md),

Accessible modals require focus management, keyboard navigation, and ARIA attributes. I build a reusable Modal component that traps focus inside when open, moves focus to the first interactive element, and returns it to the trigger on close. The Escap

Accessible iOS apps work for all users, including those with disabilities. VoiceOver reads UI elements, requiring proper labels and hints. I set .accessibilityLabel() for non-text elements like images and buttons, describing what they represent. .acce