web-design-guidelines

Run a systematic checklist covering keyboard navigation, ARIA attributes, contrast ratios, and screen reader compatibility. Verify every interactive element is reachable via Tab, icon buttons have aria-labels, and body text meets the 4.5:1 contrast minimum.

Tab through the page checking that focus follows visual order, Enter and Space activate controls, Escape closes modals, and arrow keys work in radio groups and tab lists. Modals must trap focus until dismissed.

WCAG 2.1 AA requires 4.5:1 for regular body text, 3.0:1 for large headings at 18pt or 14pt bold, and 3.0:1 for input borders and graphical icons. Focus outlines must remain distinct from both element and background colors.

A div with onClick is not focusable, cannot be activated with Enter or Space, and is invisible to screen readers. Use native button or anchor elements instead, which provide keyboard interaction and semantic meaning for free.

Yes, proper HTML5 landmarks like header, nav, main, and footer help search engines understand page structure. Combine them with a single h1, logical heading hierarchy, meta descriptions, and OpenGraph tags for best results.