Web Interface Guidelines

Guidelines for building great interfaces on the web. Covers interactions, animations, layout, content, forms, performance & design.

Web Interface Guidelines Web Interface Guidelines Interfaces succeed because of hundreds of choices. This is a living, non-exhaustive list of those decisions. Most guidelines are framework-agnostic, some specific to React/Next.js. Feedback is welcome . Interactions Keyboard works everywhere. All flows are keyboard-operable & follow the WAI-ARIA Authoring Patterns . Clear focus. Every focusable element shows a visible focus ring. Prefer :focus-visible over :focus to avoid distracting pointer users. Set :focus-within for grouped controls. Manage focus. Use focus traps, move & return focus accord

saved by

• Chloe Yan
• Scott Langille
• Flora Guo
• Pournami Pottekat
• Sachin

related reading

• Web Interface Guidelinesinterfaces.rauno.me
• Web Interface Guidelinesrauno.me
• GitHub - vercel-labs/web-interface-guidelines: Guidelines for building interfaces on the Web.github.com
• Details That Make Interfaces Feel Betterjakub.kr
• GitHub - bendc/frontend-guidelines: Some HTML, CSS and JS best practices.github.com
• Web Field Manual | Codewebfieldmanual.com
• Invisible Details of Interaction Designrauno.me
• Anatomy of AI Inputibelick.com
• Crafting the Next.js Websiterauno.me
• Say precisely what you mean.index.how
• Tao of React - Software Design, Architecture & Best Practices | Alex Kondovalexkondov.com
• What will you ship?rauno.me