是否需要无障碍标签？

Question

我有一个搜索字段，它(视觉上)不需要<label>。

​

​

我在输入中添加了一个title属性，以提醒(使用工具提示)字段描述。提交按钮有屏幕外的描述来解释它的功能。Q1：也许在这里使用咏叹调标签会更好？

Q2：要符合要求，您是否总是必须提供一个标签，即使它意味着通过sr-only类将其从屏幕上删除，或者它并不总是必要的？

<div class="field field-search">
  <form action="" method="GET">
    <button type="submit" class="btn-search">
      <span class="sr-only">Search</span>
      <svg class="icon icon--search" aria-hidden="true »>…</svg>
    </button>
    <input title="Search in events" placeholder="Search in events" id="search" type="search" name="search">
  </form>
</div>

Q2.1对于用户必须添加链接的字段也有相同的问题。输入的标题是足够的还是标签是强制性的？如果是这样的话，我是否也可以将其设置为"sr-only"？

​

​

<form method="post" action="">
  <ul class="social-links social-links--inline">
    <li class="social-links__item">
      <div class="social-links__icon">
         <svg class="icon" aria-hidden="true »>…/svg>
      </div>
      <input title="My website" placeholder="My website" id="website" type="text" name="user_website_url">
    </li>
  </ul>
  <br>
  <input aria-label="Save links" type="submit" value="Submit">
</form>

Answer 1

对此有两种答案：

1. 为了便于访问，我最低限度的必须做什么
2. 什么是最好的用户体验

从最低限度的角度来看，WCAG需要什么？记住，WCAG是一个基线。仅仅因为您通过了WCAG并不意味着您有一个愉快的用户体验。

WCAG 3.3.2说您的输入字段需要一个标签，但是该标签不必是文本标签。它可以是一个图标，只要图标有一个可访问名称，以便它可以与输入字段相关联。

因此，在搜索字段示例中，使用放大镜作为输入字段的标签是可以的。人们普遍认为，这个图标意味着搜索。但是有些用户可能不熟悉这个图标，所以拥有一个真正的文本标签会使他们受益。文本标签是否需要(由WCAG编写)？没有，但这是一个更好的用户体验。

对于其他链接字段，这些图标可能被识别，也可能无法识别。YouTube和Twitter可能会被重新命名，但在领域中填写的人有可能不是社交媒体的人，所以他们可能不知道这些图标的含义。图标是否通过WCAG？是。对用户有好处吗？这取决于你的目标观众。如果你的页面是为那些精通社交媒体的人设计的，那么它可能没问题。如果页面是为一般人设计的，那么它可能是不够的。

记住，当用户开始键入时，placeholder属性就会消失，因此占位符提供的可见标签将不再可见，并且可能会使某些用户感到困惑。

从用户体验的角度来看，我建议既是一个图标，也是一个真正的文本标签。对于文本标签，您可以使它成为“浮动”标签。

• 浮标图案
• 通过动画窗体标签避免占位符文本
• 测试占位符法