听觉障碍者制作音乐_如何制作无障碍表格：比您想象的要容易

听觉障碍者制作音乐

by Jonathan Speek

乔纳森·斯派克(Jonathan Speek)

如何制作无障碍表格：比您想象的要容易 (How to make an accessible form: it’s easier than you think)

Forms are an essential component of the web, as they connect users to your business and help them accomplish what they came to your site or app for. That being said, you want to make sure all of your users are able to use your forms without having a horrible experience. The goal is to make these key user interactions as frictionless as possible.

表单是网络的重要组成部分，因为它们将用户连接到您的企业，并帮助他们完成访问您的网站或应用程序的目的。 话虽这么说，您想确保所有用户都可以使用自己的表单而不会感到恐怖。 目的是使这些关键的用户交互尽可能无摩擦。

Although building forms can be a difficult task at times, making them moderately accessible isn’t as complicated as you might think. There are often excuses thrown around like, “we don’t have time to worry about accessibility” or “we’ll make it accessible later”. These excuses are often (if not always) invalid and you can help your team change this mindset.

尽管有时构建表单可能是一项艰巨的任务，但使其适度可访问并没有您想象的那么复杂。 通常会出现各种借口，例如“我们没有时间担心可访问性”或“我们将在以后使它可访问”。 这些借口通常是(如果不是总是)无效的，您可以帮助您的团队改变这种观念。

Here are some things to consider when building forms:

构建表单时，需要考虑以下几点：

• What difficulties might someone with visual impairments have using my form?
  有视觉障碍的人在使用我的表格时会遇到什么困难？
• Does the user have a clear indication of what data is expected for input?
  用户是否清楚指示需要输入什么数据？
• Is the form easy to understand quickly?
  表格容易快速理解吗？
• Am I able to use the keyboard to complete the form?
  我可以使用键盘填写表格吗？

让我们制作一个基本的订阅表格 (Let’s make a basic subscription form)

Start with this: starter code on CodePen

从此开始： CodePen上的入门代码

We’ll eventually get to this: finished CodePen

我们最终将涉及到： 完成的CodePen

I’ve provided you with some basic styling and elements that would make up a simple subscription form, but there is a lot we can do here to make this form more usable. With anything you make, using good semantic HTML will get you a long way.

我已经为您提供了一些基本的样式和元素，这些元素可以构成一个简单的订阅表单，但是我们可以做很多事情来使该表单更加有用。 无论您做什么，使用良好的语义HTML都会使您走得很长。

Let’s start by connecting the <input> elements to their respective &lt;label>’s. We do this by giving the &lt;input> an id and using that as the <label>’s for attribute. We can use “name” and “email” for these and we’ve already done two things:

让我们开始将<inp ut>元素连接到它们各自的ctive & lt; label>元素。 我们通过这样做giving所述& LT;输入> ID和using t帽子as所述<标签>的用于属性。 我们可以为它们使用“名称”和“电子邮件”，并且我们已经做了两件事：

1. we’ve programmatically associated the label to the input, which will read the label to a screen reader user if that input is focused
   我们已经以编程方式将标签与输入相关联，如果输入重点突出，它将向屏幕阅读器用户读取标签
2. the user can now click on the label and the respective input will be focused, so users now have a larger target size
   用户现在可以单击标签，并且相应的输入将成为焦点，因此用户现在具有更大的目标尺寸

Now that our inputs and labels are all wired-up, we can define the HTML input types. These are really useful and a super easy way to give an excellent user experience. Adding the type attribute (read about the different types here) will help the user auto-fill your form and will provide a more suitable keyboard for mobile users. For our use case we can do type="text" for the name input and type="email" for the email input.

现在我们的输入和标签都已连接，我们可以定义HTML输入类型。 这些是非常有用的，而且是提供出色用户体验的超级简单方法。 添加type属性( 在此处了解不同类型 )将帮助用户自动填写表单，并为移动用户提供更合适的键盘。 对于我们的用例，我们可以在名称输入中type="text" type="email" ，在电子邮件输入中type="email" 。

We also want our users to have a good idea of what type of data (and its formatting) we expect from them. Here it is pretty obvious, but that isn’t always the case. It’s generally good practice to provide a label that is always viewable and a placeholder that communicates the expected input. This means not using the placeholder attribute as a visual label for inputs where the label is not viewable once a users begins typing. This has been a popular practice and needs to be put to bed… We can give a placeholder of “ex. Jane Doe” for the name and “ex. jane.doe@example.com” for the email.

我们还希望我们的用户对我们希望他们从中获得什么类型的数据(及其格式)有所了解。 在这里很明显，但并非总是如此。 通常，良好的做法是提供一个始终可见的标签和一个传达预期输入的占位符。 这个装置不使用placeholder属性作为输入的视觉标签，其中，标签是不可见一旦用户开始键入。 这是一种很流行的做法，需要加以解决……我们可以给“ ex。 Jane Doe”的名称和“ ex。 jane.doe@example.com ”。

Now to wrap-up, we can work on the focus state styling. The default styling of focus states are different between the browsers and we can improve whatever the default styling might be to make more user friendly. In our case, we want the inputs to have a thick, colored outline that matches the button:

现在总结，我们可以进行focus状态样式化。 焦点状态的默认样式在浏览器之间是不同的，我们可以改进默认样式以提高用户友好性。 在我们的例子中，我们希望输入具有与按钮匹配的粗色轮廓：

Lastly, we need to add some focus styles around button element. This is often overlooked, but can really help keyboard-only users know where they are. We need to add this &::moz-focus-innner bit to get rid of some default styling in Firefox (you might want to save that snippet for future use).

最后，我们需要在按钮元素周围添加一些焦点样式。 这通常被忽略，但是确实可以帮助仅键盘用户知道他们的位置。 我们需要添加&::moz-focus-innner位，以摆脱Firefox中的一些默认样式(您可能希望保存该代码段以备将来使用)。

Just like that, we have a basic subscription form you can be proud of and improve on. Because we’ve used good semantics, the form is accessible via keyboard only (try using the tab and spacebar/enter keys). The colors used for the button are a color ratio of 11.51, meeting the AAA standards for WCAG (Web Content Accessibility Guidelines). We’ve provided labels for both visual users and screen reader users, as well as styled focus states for our keyboard-using friends. Finally, notice that the font is set to 18px in the body, this makes our form much more readable ? (you should try to stay above 14px).

像这样，我们有一个基本的订阅表格，您可以为此感到自豪并加以改进。 由于我们使用了良好的语义，因此只能通过键盘访问表单(尝试使用Tab和空格键/ Enter键)。 用于按钮的颜色的色彩比率为11.51 ，符合WCAG (网络内容可访问性准则)的AAA标准 。 我们为视觉用户和屏幕阅读器用户提供了标签，还为使用键盘的朋友提供了样式化的焦点状态。 最后，请注意，字体在主体中设置为18px ，这使我们的表单更具可读性？ (您应尝试保持在14px以上)。

Designing and building with accessibility in-mind takes practice, but you’ll be a better developer for it and you’ll have the added benefit of making the web a better place ?

认真考虑可访问性的设计和构建需要实践，但是您将因此而成为更好的开发人员，并且将拥有使Web变得更好的地方的额外好处？

翻译自: https://www.freecodecamp.org/news/how-to-make-an-accessible-form-its-easier-than-you-think-672d3f4ff573/

听觉障碍者制作音乐