表单是网站设计中的重要组成部分，因为它们可以将用户连接到您的业务，并帮助您的站点或应用程序收集想要的内容。话虽如此，您希望确保所有用户都能够使用您的表单而不必遭受可怕的体验。目标是使这些关键用户交互尽可能无摩擦。
虽然表单设计形式有时可能是一项艰巨的任务，但要使它们适度可访问并不像您想象的那么复杂。通常会有一些借口，例如“我们没时间担心可访问性”或“我们以后可以访问”。这些借口通常（如果不总是）无效，您可以帮助您的团队改变这种心态。
以下是构建表单时应考虑的一些问题：
有视力障碍的人有什么困难可以使用我的表格？
用户是否清楚地指出了输入的预期数据？
表单易于使用 - 用户是否能够快速理解？
我可以使用键盘来完成表格吗？
如何制作基本订阅表格
我已经给你一些入门代码来帮助你获得成功。我们将从这开始，最终得到这个。
我已经为您提供了一些基本的样式和元素，它们构成了一个简单的订阅表单，但我们可以在这里做很多事情来使这个表单更有用。使用您创建的任何内容，使用良好的语义HTML将为您提供很长的路要走。
让我们首先将<input> 元素连接 到各自的 <label>。我们通过给 <input> 一个id并将其作为<label>的for属性来实现。我们可以使用“名称”和“电子邮件”这些，我们已经完成了两件事：
我们以编程方式将标签与输入相关联。这样做的好处是，如果该输入是聚焦的，它将向屏幕阅读器用户读取标签。
用户现在可以单击标签并且相应的输入将被聚焦，因此用户现在具有更大的目标尺寸。
现在我们的输入和标签都已连线，我们可以定义HTML输入类型。这些非常有用，是提供卓越用户体验的超级简单方法。添加type属性将有助于用户自动填写表单，还可以为移动用户提供更合适的键盘。对于我们的用例，我们可以 为名称输入键入type =“text”， 为电子邮件输入键入=“email”。
我们还希望我们的用户能够很好地了解我们期望从中获得哪种类型的数据（及其格式）。这里很明显，但情况并非总是如此。通常，良好的做法是提供始终可见的标签和传达预期输入的占位符。这意味着不使用占位符属性作为输入的可视标签，其中一旦用户开始键入，标签就不可见。这对很多开发人员来说都是一种流行的做法，真的需要一劳永逸地上床睡觉。
现在我们可以开始研究焦点 状态样式了。焦点状态的默认样式在浏览器之间是不同的，我们可以改进默认样式可能是什么，以使其更加用户友好。在我们的例子中，我们希望输入具有与按钮匹配的粗色轮廓。
最后，我们需要在button元素周围添加一些焦点样式。这经常被忽视，但可以真正帮助仅限键盘的用户知道他们在哪里。我们需要添加这个 ＆:: moz-focus-innner 位以摆脱Firefox中的一些默认样式（您可能希望保存该片段以备将来使用）。
就像那样，我们有一个基本的订阅表格，你可以为此感到自豪和改进。因为我们使用了良好的语义，所以只能通过键盘访问表单（尝试使用tab和spacebar / enter键）。用于按钮的颜色的颜色比为11.51，符合WCAG（Web内容可访问性指南）的AAA标准。我们为视觉用户和屏幕阅读器用户提供了标签，并为使用键盘的朋友提供了样式化的焦点状态。最后，请注意字体 在正文中设置为 18px。这使我们的表单更具可读性（您应该尽量保持在14px以上）。
在网站设计和网站构建时考虑到可访问性需要加强，但您将成为更好的开发人员并帮助使网站设计的变得更加美好。