可访问的网站表单——网站可访问性补救的一个重要方面!

只有当网页设计的每个方面对每个人都可访问时，数字可访问性才能实现. 虽然当你开始设计一个可访问的网站时，你的重点仍然是WCAG标准. 然而，尽管坚持定义的指导方针，还是有可能遗漏一些东西. That missed factor can become a reason behind the inaccessibility of your website; if not fully then partially.

最近，美国政府强制要求遵守无障碍指南. 但也有大量的网站/应用程序是无法访问的.

就像网站的其他方面/元素一样, 表单也是网站可访问性的一个组成部分. 它们可以用于注册、业务查询/报价、订单、调查等. 如果他们无法访问，你将失去潜在客户或销售. 因此，创建可访问的表单同样重要.

本文将帮助您使您的网站表单对每个人都可访问.

您可能还会喜欢: 对您的网站进行无障碍审计

制作易访问表单的技巧!

使用HTML创建可访问的表单很简单. 如果您正在遵循表单创建的一些最佳实践, 你的网站/应用程序将有这样的表格，每个人都可以访问.

1. 键盘导航应该是完美的工作!

   我们知道，很多患有视力或任何运动障碍的人, 使用键盘导航来填写在线表单. 此外, 有几位用户没有这样的身体问题，但更喜欢用键盘来浏览. 在键盘导航中，tab键可以帮助用户在不同的链接和部分之间跳转.

   为确保制表键正确执行，您应该使用

   1. 语义HTML表单元素

      语义元素 are code that clearly show their purpose for instance

      or . So, 标签键将自动移动之间的所有表单字段，如果你将编码一个网站与正确的语义HTML元素.

      However, 如果你要使用JavaScript的话, 非语义元素将无法正常工作, 键盘或屏幕阅读器将不能正确地解释表单字段.

   2. 主要的风格

      应该有可见的提示，帮助用户知道选择了哪个表单字段选项卡. 例如, 如果用户使用TAB键选择字段, 它应该被一种可见的颜色突出显示. 下面的表格来自pg电子官网的“pg电子官网”页面，显示了如何通过tab键选择字段，并且该字段清晰可见，因为它用不同的颜色突出显示.

      

      注意，焦点样式不会损害你的界面设计. 然而，如果你选择正确的颜色对比，它会增强外观.

2. 使用清晰的视觉标签来指示数字格式!

   在形式, 有些字段需要用电话号码等数字填充, 这些字段不应该有占位符浅色文本，因为它们会给视力不佳的用户带来麻烦. 由于对比度低，它们无法区分浅色文本和表单字段. 此外，屏幕阅读器不会检测占位符文本.

   

   一旦用户选择了字段，文本也会消失. 因此，他们可能会发现很难记住文本. 因此，当涉及到可访问的网站表单时，这种设计是不可取的. 而不是上面所示的设计选择

   

   Or

   

   这些设计有绝对清晰的文字和说明，清晰可见.

3. 在编写表单时总是考虑屏幕阅读器!

   Each label tag ( and ) should be written in a way that makes your form accessible via screen readers. 另外，不要忘记让标签清晰可见.

   所以，当你用文本格式创建标签时，

   全名
   

   屏幕阅读器将其呈现为，

   

   这里，屏幕阅读器将无法将文本与表单字段连接起来. 因此, use to connect these two (text and form field) by following the below-given methods.

   1. You can connect form field with by matching the label's for="" attribute with the input's id="" attribute.

      全名
      

   2. Or code the input within the tags.

      
        全名
        
      

   您可能还会喜欢: 屏幕阅读器可访问性

4. 屏幕阅读器的说明可以使用ARIA标签给出!

   ARIA只不过是包含屏幕阅读器的指令和信息的HTML属性. 因此，可以使用这些属性使标签更清晰. 但是，只有当本地HTML不能提供可访问的标签时，才应该使用它. ARIA属性有助于使依赖屏幕阅读器来听到表单的用户可以使用表单.

   例如, 一个清晰可见的“搜索”字段, 但要让屏幕阅读器能读懂, 你需要使用ARIA属性:

   
   Search

   ARIA属性和原生HTML都有助于提供可访问的标签, 只是在某些地方需要使用HTML，有些标签需要ARIA属性.

   类似地，ARIA属性也可用于提供指令.

   Date of birth:
   
   MM/DD/YYYY>/span>

   它是这样的:

   

   Here, 属性aria- descripbedby指示屏幕阅读器使用匹配的输入作为描述, 即id= " DOB-help ". 由于这个ARIA属性, 屏幕阅读器将显示与指定id相关联的值“MM/DD/YYYY”.

   还有更多的属性. 阅读ARIA文档以了解有关这些属性的更多信息.

   您可能还会喜欢: 多语言网站的无障碍功能

5. “字段集”和“图例”来构建多项选择选项!

   Multiple choice questions are fields in the form that require logical structure and to do that

   and

   tags can be used, 特别是如果问题有单选按钮或复选框.

   如果你不使用这些标签, 依赖屏幕阅读器的人可能无法了解带有正确选项的问题.

   Here is to know that

   tag is used to convey the information that a group of inputs belong together, and the

   tag works as a label for that group of inputs.

   

   In the absence of

   tag in your code, 屏幕阅读器将只读取每个输入(如cat)的标签, dog, 大象, 和猴子, 而不是问题. So, 如果视力受损的用户会听不完整的问题或混乱的文本, 他们将如何回答这个问题?

   Thus using

   and

   tags in code becomes essential if there are multiple-choice questions in the form.

除了这些练习，你也可以尝试一些，比如，

• 避免使用下拉菜单，因为它们很难操作，而且患有运动问题的用户可能会发现它有问题.
• 不要使用图标字体，因为它们不是通过所有软件或辅助技术都能读懂的.

• 不要仅仅依靠视觉线索来指示错误消息. Instead, 例如，写一些有用的信息，帮助用户了解他们正在做的错误,

  

您可能还会喜欢: 《pg电子官网》税收抵免

结束

以上给出的提示是为了帮助您创建可访问的网站表单，并改善您网站的用户体验. 不要只添加表单而不关注其可访问性. 它们可能是跳出率上升和转化率下降的重要原因之一. 确定你的网站的可访问性障碍，并解决它们，以扩大你的受众.

pg电子官网, 国际无障碍专业人士协会的准会员, 致力于促进全球无障碍. 与我们合作实现无缝网站WCAG可访问性修复，包括审核， ADA网站设计、补救、维护、咨询、培训和安全监控服务. 联络我们: (电子邮件保护) 或填写表格以了解更多详情.