可访问的输入元素 |基础知识

TL;DR:无论组件有多小，始终确保在实现时考虑各种不同的用户及其能力。乍一看，诸如复选框之类的输入元素似乎是一个简单的解决方案 - 但为了确保它们可访问，仍然需要考虑一些事情。

本系列将解决不同类型的输入元素以及如何使它们更易于访问，从基础知识开始：使用正确的输入类型并关联标签。

我们来看看吧。

选择正确的输入类型

在 HTML 中使用输入元素时，我们希望确保始终为相应元素设置正确的输入类型。默认输入类型是文本，可以在多种情况下使用，但尽可能具体可以帮助所有您的用户 - 并且附带一系列固有功能。 例如，定义一个数字输入字段，打开手机上的数字键盘而不是键盘，您可以使用最小和最大数字来限制范围。 屏蔽相应的输入，从而保护用户的隐私。根据浏览器的不同，打开日期选择器，...等等。通过选择正确的输入类型，我们可以让自己的生活变得更轻松，能够使用 HTML 中的某些继承功能，同时改善用户体验。

确保始终有一个与您的输入元素关联的标签

无论您使用什么类型的输入，请确保将标签与输入字段相关联。通常，这可以通过 来完成。元素和 for 属性。

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

咏叹调标签

当另一个元素用作标记输入的参考时，aria-labelledby 会派上用场。

<div role="dialog">



<p>只要有可能，请尝试使用语义 HTML 为您的输入元素提供可访问的名称。仅当您确定在这种特定情况下不可能时，才恢复使用 aria 属性。 </p>

<p>一旦我们掌握了这些基础知识，例如使用语义结构、添加正确的输入类型和关联标签，我们就可以仔细研究使输入元素更易于访问的其他方面，例如禁用的输入元素，焦点样式和颜色对比以及预期的键盘导航。 </p>

<p><strong>资源：</strong></p>

<ul>
<li>W3Schools：HTML 输入类型</li>
<li>标签控件 - W3 </li>
<li>A11y Collective - Aria-label 与 aria-labelledby</li>
</ul>


          </div>

            
        

以上是可访问的输入元素 |基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！