使用 Web 标准生成 ASP.NET 2.0 Web 站点 |
| 作者：Stephen Walther 来源：Stephen Walther 发布时间：2006-4-27 1:19:21 |
|
tp://www.cs.tut.fi/~jkorpela/forms/accesskey.html）。 使用下划线指示访问键的一个问题是无法为按钮中的字符添加下划线，并且超链接已经带有下划线。例如，下面的 Button 控件并不像您预期和希望的那样工作。 <asp:Button Text="<u>S</u>ubmit" Runat="server" /> 在呈现该 ASP.NET Button 控件时，会显示实际文本 Submit，而不是显示带下划线的<u>S</u>字符。ASP.NET Button 控件呈现 HTML<input type="submit"> 标记，但遗憾的是， <input type="submit">标记不支持下划线。 您可能认为可以通过使用样式规则解决该问题。遗憾的是，当前不存在以下这种跨浏览器兼容方法：即，使用层叠样式表为 <input type="submit">标记中的单个字符加下划线。 如果您愿意在页中使用客户端 JavaScript，则可以解决该问题。清单 4 中的页包含的 JavaScript 根据是否按下 ALT 键而显示或隐藏所有访问键。当按下 ALT 键时，会弹出一个框，显示访问键键盘组合键（参见图 6）。该脚本在 Internet Explorer 和 Firefox 中都能够正常工作（Opera 不使用 ALT 键来选择访问键）。  图 6. AccessKeys.aspx 清单 4. AccessKeys.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 id="Head1" runat="server"> <title>Contact Form</title> <style type="text/css"> .accessKey { display:none; position:absolute; z-index:5000; padding:3px; border:solid 1px black; background-color: #ffffe0 } </style> <script type="text/javascript"> /* <![CDATA[ */ window.onload = function() { document.onkeydown = displayAccessKeys; } function displayAccessKeys(e) { if (!e) e = window.event; if (e.keyCode == 18) { toggleAccessKeys(); document.onkeydown = null; document.onkeyup = hideAccessKeys; } } function hideAccessKeys(e) { if (!e) e = window.event; if (e.keyCode == 18) { toggleAccessKeys(); document.onkeyup = null; document.onkeydown = displayAccessKeys; } } function toggleAccessKeys() { var spans = document.getElementsByTagName('span'); for (var k=0;k<spans.length;k++) if (spans[k].className == 'accessKey' ) { if ( 'inline' != spans[k].style.display) spans[k].style.display = 'inline'; else spans[k].style.display = 'none'; } } /* ]]> */ </script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td> <asp:Label ID="lblFirstName" AssociatedControlID="txtFirstName" AccessKey="f" runat="server">First Name</asp:Label> </td> <td> <asp:TextBox ID="txtFirstName" runat="server" /> <span class="accessKey">access key is f</span> </td> </tr> <tr> <td> <asp:Label ID="lblLastName" AssociatedControlID="txtLastName" AccessKey="l" runat="server">Last Name:</asp:Label> </td> <td> <asp:TextBox ID="txtLastName" runat="server" /> <span class="accessKey">access key is l</span> </td> </tr> <tr> <td colspan="2"> <asp:Button Text="Submit" runat="server" /> <span class="accessKey">access key is s</span> </td> </tr> </table> </div> </form> </body> </html> 清单 4 中的页包含样式表和客户端 JavaScript。样式表隐藏了由 accessKey 类标识的任何 <span> 标记的内容。JavaScript 会在 ALT 键已经被按下时进行检测，并且显示 <span> 标记的内容。 请注意，即使 Web 浏览器中禁用了样式表和 JavaScript，该页也能够正常工作。在这种情况下，将总是显示访问键帮助（参见图 7）。  图 7. AccessKeys.aspx 适度降格 返回页首 创建可访问的导航 我讨厌拨打客户支持电话并按照自动系统的指示操作。当计算机语音系统用其低沉单调的声音宣布每个选项时，我感觉自己正在慢慢地变老。如果按错了一个键，那么您就会永远迷失在自动计算机系统深不可测的迷宫中。 遗憾的是，如果您被迫使用屏幕阅读器，那么这正是您在访问几乎任何 Web 页时的体验。大多数 Web 站点都在每一页中包含一个导航栏，其中包含指向 Web 站点各个部分的链接列表。如果使用屏幕阅读器，则每当您打开页时，都必须逐个聆听这些导航链接中的各个链接。 通过对导航栏进行一处简单的修改，就可显著提高 Web 页的可访问性。只需添加一个用来跳过所有导航链接的方法。可以用“跳过导航”链接完成该工作。 例如，CNN Web 站点包含一个导航栏，其中列出了 CNN Web 站点的不同部分（World、U.S.、Weather 等等）。但是，CNN Web 站点的设计人员已经做了一件聪明的事情。如果查看页的源代码，则您将注意到导航栏上会出现以下链接。 <a HREF="#ContentArea" TARGET="_self"> <img src="/html/UploadPic/2006-4/200642711749258.gif" alt="Click here to skip to main content." width="10" height="1" border="0" align="right"></a> 当查看 CNN Web 站点的主页时，您绝对不会看到该链接。该链接中包含的图像是一幅透明的单像素图像。但是，如果您用屏幕阅读器访问该页，则会阅读与该图像相关联的替换文本。盲人可以选择跳过所有导航链接，并直接移至 Web 页的主要内容区域（这与在自动语音系统中按 0 并直接导航到话务员等效）。 “跳过导航”链接已经被集成到多个标准 ASP.NET 2.0 控件中。特别需要指出的是，Menu、TreeView、SiteMapPath、Wizard 和 CreateUserWizard 控件全都支持“跳过导航”链接。 例如，清单 5 中的页包含 ASP.NET Menu 控件。该控件用来显示指向该 Web 站点中其他页的链接列表。 清单 5. SiteMenu.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>Skip Navigation</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Menu id="Menu1" Runat="server"> <Items> <asp:MenuItem Text="Home" NavigateUrl="Home.aspx" /> <asp:MenuItem Text="Products" NavigateUrl="Products.aspx" /> <asp:MenuItem Text="Services" NavigateUrl="Services.aspx" /> <asp:MenuItem Text="About" NavigateUrl="About.aspx" /> </Items> </asp:Menu> <hr /> Here is the main content of the pa 上一页 [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下载 | 书籍教程 | 工具软件 | 语言：繁體中文 |