If you want to create a button from scratch, you must first create the universe
2 hours ago
- #custom elements
- #semantic HTML
- #web accessibility
- The article explains why recreating native HTML elements from scratch, like a button, is a 'Sisyphean task' due to the extensive requirements and expectations they must meet.
- Key requirements for a button include: having a role of 'button', an accessible label, being focusable, activating via various inputs (mouse, touch, keyboard), and supporting states like disabled.
- Creating a custom button element involves complex steps: setting ARIA roles, handling accessibility labels (especially for icons), making it focusable, and implementing multiple event listeners for interactions.
- The implementation must also support form-related attributes (e.g., type, form, value), validation APIs, and dynamic states (e.g., active, disabled), requiring significant JavaScript code.
- The article emphasizes that using native semantic HTML elements is far simpler, more maintainable, and ensures better accessibility, as they already include all necessary functionality without extra code.