8 回答
我看到自己一遍又一遍地使用可访问性的模式是从每个人都可以访问的内容开始,然后在客户端用首选的解决方案替换它。然后,如果他们没有那种技术,它就会优雅地退化。具体来说,我们在这里讨论的是 javascript。
例如,首先在表单中使用普通按钮。这适用于所有人,无论他们是否启用了 javascript。然后使用 javascript 用锚标记替换该按钮(这样你就可以在你的 css 中使用 :hover ),或者简单地使用 javascript 来执行你想要的悬停效果(如果你使用 jQuery,你可以将一个事件绑定到按钮的鼠标悬停)。
这意味着一小部分没有启用 javascript 并且没有使用支持更高级 :hover 的浏览器的人不会看到您的悬停效果,但您将确保它始终优雅地降级。
Internet Explorer 6 仅支持锚点的 :hover CSS 属性。
如果您支持 IE6,您将需要使用一些 javascript 解决方案,例如 @charles 建议的,基本上您需要动态地向元素添加/删除类。我通常将这些“修复”放在带有条件注释的 IE6.js 文件中。
使用jQuery是可选的,但它确实有助于减少为实现这些效果而必须编写的 javascript 数量。
使用 javascript,您还可以按照 Jon 的建议用 a-tag 替换按钮。这是使用 jQuery,但您可以使用普通的 javascript 或任何其他库来执行此操作:
var ahtml = "<div class='button'><a href=#>blabla</a></div>"; //whatever the HTML is for the styled a tag
$('button.submit') //select button
.hide()//Hide the button
.after(ahtml) //insert the styled a html
.next() //find the inserted html
.click( function(e) { //add click behaviour to the inserted HTML
$(this).prev().click(); //trigger click event of submit button
return false; //stop both event bubbling and event triggering
});
这样你就有了按钮,对于没有 javascript 的人。并且还为使用 javascript 的人提供了一个漂亮的样式标签。
我尚未对此进行广泛测试,也尚未跨平台测试,但对于 Midori 和 FF3.x(在 Ubuntu 8.04 上),button
标签采用 :hover、:focus 和 :active 的样式(类似于a
标签)。
这当然有效:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
button {color: #f00;
background-color: #ccc;
border: 0 none transparent;}
button:hover {color: #0f0; }
button:active {color: #00f; }
</style>
</head>
<body>
<div id="wrapper">
<form method="post" action="" enctype="form/multipart">
<fieldset>
<label for="input1">Label 1:</label>
<input id="input1" name="input1" type="text" />
<label for="input2">Label 2:</label>
<input id="input2" name="input2" type="text" />
</fieldset>
<fieldset>
<button class="reset" type="reset">Reset</button>
<button class="submit" type="submit">Submit</button>
</fieldset>
</for>
</div>
</body
</html>
演示在:http ://www.davidrhysthomas.co.uk/so/buttons.html
进一步编辑以回应问题编辑:
您可以尝试添加第三个列表元素并命名它们(我会进一步建议使用字段集而不是列表,但让我们使用您所拥有的)。
<head>
<link rel="stylesheet" type="text/css" href="regularStylesheet.css" />
<!--[if ie lte7]>
<link rel="stylesheet" type="text/css" href="ie-adaptations.css" />
<![endif]-->
<form name="contact" action="index.php" method="post">
<ul>
<li>
<label for="name" class="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li>
<li class="submit-buttons">
<button type="submit" class="submit">Send</button>
<input type="hidden" name="submit" value="yes">
</li>
<li class="submit-links">
<a href="where/ever/you/send.html">Send</a>
<input type="hidden" name="submit" value="yes">
</li>
</ul>
</form>
然后在常规 CSS 中添加:
li.submit-buttons
{
display: block;
}
li.submit-links
{
display: none;
}
并在 IE-adaptations.css 中反转:
li.submit-buttons
{
display: none;
}
li.submit-links
{
display: block;
}
它无论如何都不是完美的,但它不会扰乱使用表单模式的设备,并且应该允许按钮显示;并且应该只强制 IE 7(及以下)显示链接。所以......希望不应该过多地扰乱可访问性。
我可能会把脚放在嘴里或这里的东西,但我只是想指出其他需要考虑的事情。无论您决定解决这个问题,如果您的按钮或锚点应该执行某些操作(如删除记录或更改您的银行帐户),那么我强烈建议您确保执行回发 (POST)。这就是按钮通常在表单中所做的事情。不要执行 GET,这是 achor 通常所做的。
这是因为 GET 很容易被搜索引擎、浏览器预缓存器和其他东西意外跟踪。POST 被识别为执行操作且不会自动执行的操作。
另一方面,如果您的“按钮”只是进行某种查询,那么 GET 就可以了。
您也可以使用锚点发布帖子,尤其是使用 javascript。
有这个想法的人很可能会填写一些我忽略的细节。
即使您可以找到解决方案(Matt Ross 提到的可能是其中一个),您应该更好地选择可访问性而不是抛光外观!
一个 jQuery 解决方案怎么样,像这样:
$("input:button").mouseover(function(e) {
$(this).addClass("hovered");
}).mouseout(function(e) {
$(this).removeClass("hovered");
}).mousedown(function(e) {
$(this).addClass("pressed");
}).mouseup(function(e) {
$(this).removeClass("pressed");
});
你绝对可以单独使用 CSS 来做到这一点(对于可怜的 ie6,还有一点 js)。
首先,通过 :hover、:active 等使其在 FF 中工作。然后添加一些 js 以在悬停按钮上添加类,单击....将这些类添加到您的 :hover, :active... 声明 (button:hover, button.hover{color:red}) 然后就可以了. 您需要为 safari 和 IE 做一些按摩,但绝对可以做到。
另一种可能性是对先前建议的一种混搭。如果我没记错的话,JAWS 会读取具有可见性的元素:隐藏(不确定窗口的眼睛)。而不是使用 js 删除按钮或将其设置为 display:none,将其设置为不可见应该可以跨用户代理工作。然后只需我们 JS 将链接点击绑定到表单提交即可。