ReactJS +/-计数器组件能否以HTML表单编写？语义合规性问询

嘿，这个思路从HTML语义和合规性上来说是完全站得住脚的，不过咱们可以拆解细节，让它更贴合Web标准和无障碍需求：

1. <form>包裹的合理性 #

虽然你的计数器没有提交到服务器的需求，但用<form>来包裹这组控件是没问题的——它能把关联的交互元素分组，帮助屏幕阅读器识别这是一组协同工作的控件。不过要注意，默认情况下表单会响应回车触发提交，可能导致页面刷新，所以建议加上阻止默认提交的逻辑：

<form onSubmit={(e) => e.preventDefault()}>
  {/* 你的控件 */}
</form>

2. <input type="button">的合规性 #

用按钮来实现增减操作是完全正确的选择：原生按钮自带无障碍支持（可通过Tab聚焦、回车/空格触发），语义上也明确是可交互的操作控件。这里可以小优化一下，给按钮加上aria-label，让屏幕阅读器用户能明确知道按钮的作用，而不只是看到符号：

<input 
  type="button" 
  value="+" 
  onClick={this.increment} 
  aria-label="增加计数" 
/>

3. <output>元素的正确性 #

<output>就是专门为展示用户交互或计算产生的动态结果设计的，用来显示计数器的值完全符合它的语义定义。可以进一步优化，给<output>加上for属性，关联到控制它的按钮（需要给按钮设置id），这样屏幕阅读器会把输出内容和对应的操作控件关联起来，提升无障碍体验：

<input id="increment-btn" type="button" value="+" onClick={this.increment} aria-label="增加计数" />
<input id="decrement-btn" type="button" value="-" onClick={this.decrement} aria-label="减少计数" />
<output for="increment-btn decrement-btn">{this.state.count}</output>

额外优化建议 #

你也可以考虑用<button>元素代替<input type="button">，因为<button>的样式定制更灵活（比如可以在里面嵌套图标+文本），语义上同样清晰，写法示例：

<button onClick={this.increment} aria-label="增加计数">+</button>

内容的提问来源于stack exchange，提问作者Silvère MAZIERE