网站建设中初级无障碍的HTML / XHTML的表单设计

日期:2011年05月26日

在这种形式第一次在外观和方便,我们将非常基本覆盖你应该考虑是否要帮助尽可能多的用户与您和您的网站互动就像你想他们。

形式往往是网络发展的最棘手的初学者方面得到他们的脑子里,主要是因为它意味着增加了单向信息的安乐窝 - 不再是你只需出示您的网站在浏览信息的人,现在你所要求的输入,反馈,你必须处理的一些方法。 而且,正如它可能难以为HTML初学者了解他们是如何处理表单数据,所以是很难了解有关访问的一些问题。

静态内容提交人访问您的网站可能非常清楚了解盲文电脑有人使用屏幕阅读器,或者一个,假设你使用的语义,结构标记(如 上半年 - 香港: 为标题)。 但是,有人简单地访问您的网站和阅读的内容是相当被动的活动-他们可以选择接受或者离开它,无论是'它'可能。 但是如果用的形式,游客发现了一件他们 想要 交互和公平竞争的环境突然改变了-这是一个双行道。 现在,这标志着让您的网页变得至关重要,如果你要捕获正确的信息。

实体使用的HTML

以下是HTML实体,你会用你的形式:

  • 本 的<form> 元素(您按照容器的一切,是于)
  • <input>的 -其中包括许多类型,包括文本,提交,按钮,单选按钮和复选框
  • <textarea> -输入文字,例如批注多行
  • 与 <选择> 元素-或称为下拉列表,或下拉菜单(取决于您的偏好)

还有一个 <button> 元素但这并没有被广泛使用,因为看到了蒸汽机的发明。

这些元素和行为上呈现不同的(基于GUI)浏览器几乎相同。 有可能是从一个浏览器的一些造型变化到另一个,但本质上,像一个文本输入文本输入和下拉列表会表现为一个下拉列表如下。 从理论上讲,使用形式应为每个人很容易,不管他们的设备或浏览器所使用。

布局的基础知识

当你看到报纸的故事,你读了标题,知道文字遵循的是相关的是,所显示的文字和照片下面是该照片的说明。 有时一个页面布局可能不同于这种期望,你可能要更加努力地了解发生了什么事 - 一个标题两张照片之间的会议。 好,你很聪明,你可以将它解决。

随着形式也有一些公认的驰(计算机人机交互)的使用原则和形式,像报纸的比喻,表示如果你做的事情一定的方式,这些形式将更加容易。正因为如此,一些读者自适应技术,如屏幕,遵循这些原则,在解释一个页包含一个表单。 因此,如果他们遇到一个文本输入,他们 希望 到有关它的文字输入是在这之前...如此这般寻找它的! 所以,如果一个屏幕阅读器看到这个东西喜欢有困难:

<输入type="text" name="firstname" id="firstname" /> - 请输入您的名字<br />
<输入type="text" name="surname" id="surname" /> - 请输入您的姓氏<br />

为什么呢? 因为它 可能会 错误地联想到第二个输入的第一行文字的,因为如果你有这样的:

<输入type="text" name="surname" id="surname" /> < - 请输入您的名字<br />

点击浏览下一页

这是一个灾难的处方。 但是,谁放输入文本后,我们听到你哭泣? 那么,对于一些投入这实际上是 正确的 做事情的方式:

<输入type="checkbox" name="athome" id="athome" />请致电我家<br />
<输入type="checkbox" name="atwork" id="atwork" />请致电我<br />工作

为什么这样圆的吗? 考虑一个长期的一系列复选框。 使用上面的,一切都行整齐的布局:

 请致电我家
 请拨打我的工作我
 请拨打我的小屋

但是,如果你有机会反过来,它会是这样呈现:

请致电我家   
请拨打我的工作我   
请拨打我的小屋 

如果你什么也不做,按照此建议, 您的表格将自动成为更容易获得 ,因为这是如何辅助器具 期望 他们成为列明:

布局形式要素 - 智最佳实践
HTML元素和类型 显示顺序 范例
输入类型=“文本” 描述性标签,HTML元素 您的名字<br />
<输入type="text" name="txtFirstName" />
输入类型=“密码” 描述性标签,HTML元素 您Passnumber <br />
<输入type="password" name="txtPassword" />
输入类型=“按钮” 不适用(value属性用来代替) <输入type="button" name="cmdChkAvail" value="Check Availability" />
输入类型=“提交” 不适用(value属性用来代替) <输入type="submit" name="cmdBookNow" value="Place Booking" />
输入类型=“无线电” HTML元素,描述性的标签 <输入type="radio" name="radMarried" value="Yes" />是的,我结婚了<br />
<输入type="radio" name="radMarried" value="No" />不,我单身<br />
输入类型=“复选框” HTML元素,描述性的标签 <输入type="checkbox" name="chkSubscribe" value="Subscribe" />订阅电子报
选择 描述性标签,HTML元素

标题<br />
<选择name="d​​dlTitle">
<选项先生</选项“>
...
</选择“>

textarea的 描述性标签,HTML元素 您的意见<br />
<textarea name="txtComments"> </ textarea的>
按钮 不适用(value属性用来代替) <button name="cmdBigButton">继续,点击我!</按钮>“

但对于辅助功能?

什么? 哦,对了,还有的没有多大提到的'辅助功能标签的任何。 相信我们,按照上述指引的形式和布局按照公认的气原则,你将作你的形式更加方便和实用。 现在,它是关于建立良好的做法和让事情简单(我们“会在此基础上建立非常快)。 并在保持简单的精神,我们应该考虑如何使用脚本(而不是使用),使形式更容易获得。

这个脚本吸

不要以为脚本启用

一个表格必须可用,不论是否启用脚本在浏览器(如果它甚至支持脚本-记住,一些辅助设备不支持脚本在所有)。 服务器端验证和数据处理的形式显然意味着它是可以做到这一点。 然而,许多开发商仍然在很大程度上依赖于客户端验证脚本或例子只是为了触发事件(这里是是一种形式,这完全依赖于脚本的工作正在启用它: <输入类型=“按钮”值= “下单”的OnClick =“document.forms('主';。提交()”/>在 <输入order" /> type="submit" value="Place 会做同样的工作井)。

确保表单残疾人工作和脚本 -让服务器做的工作!

避免的JavaScript导航

另一方面,如果你是使用JavaScript做这样一个表单元素,即从用户控制你的东西? 这个典型的例子是下拉列表作为导航工具。 许多网站使用这样的,当你从列表中选择一个项目,你会自动采取这些方式的网页。 不过,这些都是很难用的人谁不能使用鼠标(如果不是不可能的)(这包括屏幕阅读器,与运动不足,更多的人盲目的用户)。

点击浏览下一页

因此,使用键盘来更改列表总是在被选中和激活名单中的第一项成果。 为了做个聪明在辅助功能障碍抛出。 保持简单 - 使用一个下拉列表,如果你想要的,但允许用户激活选择使用这样​​一个Go按钮:

点击浏览下一页

一个表格的说明

无障碍疑难杂症的另一个形式是,他们总是使用表列,实现了很好的格状效应。 这并不总是一个自动访问性问题,但它可以是 - 一表布局irrelevent给屏幕阅读器,有效读取的顺序是在源代码中出现的内容。 如果您决定分裂的文本和表单元素的文本有关的话,你会得到粘住。 这是因为屏幕读者的线性化'的内容,然后会随着这个图片展示的东西严重错误:

点击浏览下一页

综述

因此,这些都是一些基本规则方面的布局和定位的形式和内容相关的文本,将让你有一个良好的开端。 在中间页面,我们将开始看到一些元素的HTML,专门援助无障碍,包括 标签 , 字段 ,  optgroup 。

Tags:网站建设 网页设计
上一篇文章:企业网站建设中使用正确的DOCTYPE文档说明
下一篇文章:网页设计中常见的可用性问题