使用 Web 标准生成 ASP.NET 2.0 Web 站点 |
| 作者：Stephen Walther 来源：Stephen Walther 发布时间：2006-4-27 1:19:21 |
|
ge... </div> </form> </body> </html> 如果查看清单 5 中页的源代码，您将看到以下链接出现在菜单顶部。 <a HREF="#Menu1_SkipLink" TARGET="_self"><img alt="Skip Navigation Links" src="/WebResource.axd?d=ChXz41GuDxNm-7TcWyCl_w2&t=632495684475122400" width="0" height="0" style="border-width:0px;" /> 该链接包含一幅在您查看该页时不会出现的宽和高皆为零的图像。但是，通过屏幕阅读器访问该页的用户可以选择“跳过导航”链接跳到该菜单的结尾。 默认情况下，“跳过导航”链接包含文本 Skip Navigation Links。可以通过更改 Menu 控件的 SkipLinkText 属性修改该值。 返回页首 创建可访问的数据 ASP.NET 2.0 框架包含一组丰富的、用于显示数据库数据的控件。这些控件包括 GridView、DetailsView、DataList、FormView 和 Repeater 控件。默认情况下，GridView、DetailsView 和 DataList 控件在 HTML 表中显示数据库记录。 在 HTML 表中呈现信息时，如果操作错误，则可能引起可访问性问题。在聆听 HTML 表的内容时，您很容易忘记自己当前在该表中的位置。例如，假设您使用 HTML 表显示一个产品信息列表。在聆听由屏幕阅读器朗读的表内容时，您很容易将某个表单元格所代表的信息搞混，不知道它们是有关产品名称的，还是有关所订购产品数量的，抑或是有关存储这些产品的仓库的代码。 在查看 HTML 表时，可通过扫视列或行标题来确定特定单元格的含义。为使表对于使用屏幕阅读器的用户是可访问的，需要显式标记表标题并将这些标题与各个单元格显式关联起来。 在创建表以显示数据时，应当始终使用正确的标记来标记列和行标题。表标题应当总是用 <th> 标记进行标记，如下所示。 <table> <thead> <tr> <th>Product Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Milk</td> <td>$2.33</td> </tr> <tr> <td>Cereal</td> <td>$5.61</td> </tr> </tbody> </table> 在该示例中，<th> 标记用来标记以下两个列标题：Product Name 和 Price。 一些设计人员避免使用 <th> 标记，因为他们不喜欢它的默认可视化外观。在大多数浏览器中，<th> 标记的内容居中并且加粗。但是，需要记住的是，标记绝不应当用来控制表示形式。如果您希望列标题看起来像标准的表单元格，则您应当添加如下所示的样式规则。 <style type="text/css"> th {text-align:left;font-weight:normal} </style> 为了使表可访问，还应当显式指明与各个单元格相关联的一个或多个标题。您可以将多个属性用于此目的：scope、headers 和 axis。 scope 属性可用来指示表标题是列标题还是行标题。例如，下面的表同时包含列标题和行标题，它们都通过使用 scope 属性的 <th> 标记进行标记。 <table> <thead> <tr> <th></th> <th scope="col">First Train</th> <th scope="col">Last Train</th> </tr> </thead> <tbody> <tr> <th scope="row">Alewife</th> <td>5:24am</td> <td>12:15am</td> </tr> <tr> <th scope="row">Braintree</th> <td>5:15am</td> <td>12:18am</td> </tr> </tbody> </table> 该表包含 Boston 地铁 Red Line 的时间表（参见图 8）。请注意，每个列标题都包含 scope="col" 属性，而每个行标题都包含 scope="row" 属性。  图 8. 简单的地铁时间表 scope 属性非常适合于简单的表。但是，对于更为复杂的表，需要使用 headers 属性。例如，嵌套表可能有三个或更多的标题与单个单元格相关联。headers 属性使您能够用与各个单元格相关联的标题来标记它。 axis 属性使您能够对表标题进行分类。例如，在地铁时间表中，可以将属性 axis="location" 添加到每个表示位置的标题（Alewife 和 Braintree 标题）中。axis 属性接受由逗号分隔的类别列表。 清单 6 中的页包含一个更复杂版本的 Boston 地铁时间表，它同时使用了 headers 和 axis 属性（参见图 9）。  图 9. 复杂的地铁时间表 清单 6. Subway.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Red Line Subway Schedule</title> <style type="text/css"> caption {color:white;background-color:red;font-size:xx-large} table {width:500px;border-collapse:collapse} td,th {padding:5px} td {border:1px solid black} tbody th {text-align:right} .headerRow th {font-size:x-large;text-align:left} </style> </head> <body> <form id="form1" runat="server"> <div> <table summary="This table contains the schedule of train departures for the Red Line"> <caption>Red Line Schedule</caption> <thead> <tr> <th></th> <th id="hdrFirstTrain" axis="train">First Train</th> <th id="hdrLastTrain" axis="train">Last Train</th> </tr> </thead> <tbody> <tr class="headerRow"> <th id="hdrWeekday" axis="day" colspan="3">Weekday</th> </tr> <tr> <th id="hdrAlewife1" axis="location">Alewife</th> <td headers="hdrAlwife1 hdrWeekday hdrFirstTrain">5:24am</td> <td headers="hdrAlwife1 hdrWeekday hdrLastTrain">12:15am</td> </tr> <tr> <th id="hdrBraintree1" axis="location">Braintree</th> <td headers="hdrBraintree1 hdrWeekday hdrFirstTrain">5:15am</td> <td headers="hdrBraintree1 hdrWeekday hdrLastTrain">12:18am</td> </tr> <tr class="headerRow"> <th id="hdrSaturday" axis="day" colspan="3">Saturday</th> </tr> <tr> <th id="hdrAlewife2" axis="location">Alewife</th> <td headers="hdrAlewife2 hdrSaturday hdrFirstTrain">8:24am</td> <td headers="hdrAlewife2 hdrSaturday hdrLastTrain">11:15pm</td> </tr> <tr> <th id="hdrBraintree2" axis="location">Braintree</th> <td headers="hdrBraintree2 hdrSaturday hdrFirstTrain">7:16am</td> <td headers="hdrBraintree2 hdrSaturday hdrLastTrain">10:18pm</td> </tr> </tbody> </table> </div> </form> </body> </html> 请注意，每个表单元格都包含 headers 属性。headers 属性表示与列和行标题相对应的 ID 的空格分隔列表。地铁时间表中的每个单元格都具有相关联的位置、日期和列车标题。 同时，请注意，每个 <th> 标记都具有一个 axis 属性，用于表示与标题相关联的类别。例如，Weekday 和 Saturday 标题都与 day 轴相关联。First Train 和 Last Train 标题与 train 轴相关联。 最后，请注意清单 6 中的表同时包含 summary 属性和 标记。summary 属性的工作方式非常类似于 alt 属性。您 上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] 下一页 |
| [] [返回上一页] [打 印] |
|
文章评论 |
| WAP资讯 | 3G动态 | SP动态 | 运营商动态 | 内容商动态 | 制造商动态 | 论坛讨论>> | 每次自动访问 |
| WAP技术 | WAP源码 | 手机编程 | 手机源码 | 无线技术 | J2ME技术 | 手机软件 | 添加到收藏夹 |
| IVR技术 | SP资料 | SMS MMS技术 | 商业方案 | IVR下载 | 书籍教程 | 工具软件 | 语言：繁體中文 |