The <command> and <commandfor> elements, now supported in Chrome 165, offer a declarative way to define commands and associate them with specific form controls. <command> represents a user action, like "copy" or "bold," and can be executed via various input methods (keyboard shortcuts, context menus, buttons). <commandfor> links a command to a specific HTML element, like a text input, clarifying which element the command operates on. This allows assistive technologies and other user agents to better understand the available actions and their targets, improving accessibility and user experience. This declarative approach simplifies command handling, especially for custom controls, and reduces reliance on JavaScript for basic command functionality.
This Chromium Developers blog post introduces two new HTML elements, <command> and <commandfor>, designed to enhance the declaration and association of commands within web applications, particularly focusing on improving accessibility and platform integration. The post elaborates on the motivation behind these additions, explaining that existing mechanisms for handling commands, such as using <button> or <input type="button">, lacked semantic clarity concerning their role as commands and offered limited means of linking a command to its specific target element. Furthermore, the reliance on JavaScript event handlers for command execution posed challenges for accessibility tools and platform integrations, as the intent of the element wasn't explicitly conveyed in the HTML.
<command> serves as a declarative representation of a command within a web page. It doesn't render visibly by default but can be styled for visual representation if desired. The element encompasses various attributes that define the command's properties, including its label for textual representation, its icon for visual representation, its associated shortcut keys, and a crucial disabled attribute for controlling its availability. The post details how these attributes contribute to a more robust and semantically rich description of a command. It illustrates how <command> encapsulates the nature and state of the command itself, independent of how it is triggered.
Complementing <command>, the <commandfor> element explicitly connects a defined command to a specific HTML element. This association enhances accessibility by providing a clear link between the command and its target, enabling assistive technologies to understand and convey this relationship to users. The for attribute within <commandfor> points to the ID of the target element, creating this essential connection. The blog post demonstrates through examples how using <commandfor> improves the discoverability and usability of commands within a web page, particularly for users relying on assistive technologies.
The post highlights the benefits of using <command> and <commandfor> for improved keyboard navigation, accessibility, and integration with platform features like context menus. By declaring commands and their targets directly in HTML, developers enable richer interactions with assistive technologies, allowing users to discover, understand, and execute commands more effectively. Furthermore, it streamlines the process of adding keyboard shortcuts and facilitates platform-specific integrations, such as context menu additions, without relying solely on complex JavaScript event handling. The post concludes by encouraging developers to explore these new elements and provide feedback to help shape their further development and standardization.
Summary of Comments ( 154 )
https://news.ycombinator.com/item?id=43292056
HN commenters generally expressed confusion about the purpose and utility of the new
<command>and<commandfor>HTML elements. Several pointed out the seemingly niche use cases and questioned whether they solved a real problem developers faced, especially given existing keyboard shortcut solutions. Some compared them unfavorably to existing menu role attributes in ARIA and questioned their semantic value. Others expressed concern about discoverability and the potential for abuse in creating confusing or malicious interfaces. A few commenters attempted to find practical applications, like contextual menus for selected text or improved accessibility, but overall the reception was skeptical, with many suggesting the feature was overly complex for limited benefit.The Hacker News post "Introducing command And commandfor In HTML" linking to a Chrome developer blog post about new HTML elements
<command>and<commandfor>sparked a discussion thread with several insightful comments.Many commenters expressed confusion about the purpose and utility of these new elements, especially in the context of existing, well-established mechanisms for handling commands and user interface interactions. Several questioned the need for
<command>and<commandfor>when similar functionality could be achieved with ARIA attributes and JavaScript event listeners. One commenter pointed out the potential for over-engineering and unnecessary complexity being introduced into HTML, especially given the lack of clear advantages over existing methods.Some commenters tried to understand the use cases presented in the blog post, with one specifically asking for clarification and real-world examples where these elements would be genuinely beneficial. The ambiguity around the practical application of
<command>and<commandfor>appeared to be a recurring theme.A few commenters delved into the history of
<command>, noting its long existence in HTML specifications but lack of widespread adoption or implementation. They speculated on the reasons for this, with some suggesting the original concept might have been flawed or simply ahead of its time. The renewed interest in<command>and the introduction of<commandfor>prompted discussions about whether these revised elements addressed the shortcomings of the original proposal and offered a more compelling case for their use.Some technical points were also raised, such as the accessibility implications of using these new elements and whether they would integrate seamlessly with existing assistive technologies. The discussion touched on the importance of semantic HTML and whether
<command>and<commandfor>genuinely contributed to a more semantically rich web experience.Overall, the sentiment expressed in the comments leaned towards skepticism and a wait-and-see approach. Many commenters seemed unconvinced of the necessity or value proposition of
<command>and<commandfor>, especially given the lack of clear, compelling use cases and the availability of alternative solutions. The discussion highlighted the need for more concrete examples and demonstrations to showcase the practical benefits of these new HTML elements and justify their inclusion in the web development landscape.