设置font-size为0隐藏HTML表单标签，仍能保持可访问性吗？

直接给HTML标签设置font-size: 0来隐藏标签，无法保证稳定的可访问性，原因如下：

• 部分屏幕阅读器会忽略字号为0的文本，导致标签信息无法被读取，这会让依赖辅助技术的用户无法理解表单字段的用途。
• 不同浏览器和屏幕阅读器的表现存在差异，有些环境下可能仍能识别，但这种不一致性会带来可访问性风险，属于不可靠的实现方式。

推荐的可访问隐藏方案 #

如果需要视觉上隐藏标签但保留辅助技术的可识别性，有两种更稳妥的方法：

1. CSS视觉隐藏类
   用CSS将标签移出可视区域，但保留其在辅助技术中的可读取性，示例代码：

   .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
   }
   

   使用时把标签放入该类：

   <label for="username" class="sr-only">用户名</label>
   <input type="text" id="username">
   

2. ARIA属性替代
   直接给表单元素添加aria-label属性提供标签文本，或者用aria-labelledby关联页面上已存在的相关文本元素，示例：

   <!-- 使用aria-label -->
   <input type="text" aria-label="用户名">
   
   <!-- 使用aria-labelledby关联已有元素 -->
   <h3 id="login-title">登录</h3>
   <input type="text" aria-labelledby="login-title username-label">
   <span id="username-label" class="sr-only">用户名</span>
   

内容的提问来源于stack exchange，提问作者user5507535