Web developer warns against reinventing HTML buttons, citing 500 lines of code to replicate native features
Marco Campos argues that using native semantic HTML is far more efficient than building custom components from scratch, noting that inaccessible pages face legal risks and that AI tools often generate flawed code.
Web developer Marco Campos has published a technical analysis arguing against the practice of recreating native HTML elements, such as buttons, using custom components and ARIA roles. In a post titled "If you want to create a button from scratch, you must first create the universe," published on his blog madcampos.dev, Campos demonstrates that manually replicating the functionality of a native button requires extensive code to handle accessibility, keyboard navigation, event handling, and form integration.
The article details the numerous requirements for a functional button, referencing WCAG Success Criteria and MDN documentation. Campos notes that while modern browsers map touch and pointer events to click events to some extent, a robust custom implementation requires independent handling of mouse, touch, and pointer interactions. The author also outlines the complexity of making custom elements keyboard focusable via `tabindex`, managing form association, and implementing `disabled` states via `ariaDisabled` and CSS.
Campos concludes that using native semantic HTML is significantly more efficient and less prone to errors than custom implementations. The article highlights that the custom button component example requires approximately 500 lines of JavaScript, whereas a native HTML button requires zero lines of JavaScript. This disparity underscores the maintenance burden and potential for errors inherent in hand-rolling components that the browser already provides.
The analysis also touches on the broader implications for web development and compliance. Campos warns that inaccessible pages are liable to legal action and fines, urging developers to prioritise accessibility. Additionally, the author notes that Large Language Models (LLMs) tend to generate inaccessible code by default, which can exacerbate these issues if not carefully reviewed and corrected by human developers.
By referencing APIs such as the Popover API and Invoker Commands API, Campos illustrates how modern browsers continue to expand native capabilities, further reducing the need for custom solutions. The piece serves as a practical reminder for developers to leverage existing platform features rather than attempting to reinvent basic UI elements, ensuring better user experience and reduced development overhead.
