Question

我有这个问题和答案格式：

＆＃13;

$('.qanda button').click(function(){
    var btn = $(this);
    btn.siblings('.answer').slideDown(function(){
        $(this).attr('tabindex', '-1').focus();
        btn.remove();
    });
});

＆＃13;

* {margin: 0;}

.qanda {
    margin: 2em 0;
    clear: both;
}
.answer {
    display: none;
    clear: both;
    outline: none;
}
.qanda h2 {
    float: left;
}
.qanda button{
    margin-top: 4px;
    margin-left: 8px;
}

＆＃13;

<div class="qanda">
    <h2>Is the sky blue?</h2>
    <button>+</button>
    <div class="answer">
        <p>That depends on various factors, including whether it's night or day.</p>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

＆＃13;

http://jsbin.com/jazekotosa/

我意识到我没有练习渐进增强，因为使用静态CSS隐藏了答案。但是，如果我使用JS添加此规则并将此页面用于许多问题，我假设在某些设备上，当页面加载时，答案可能会显示一瞬间。所以我依靠JavaScript来运行（虽然我不确定这本身就是可访问性的障碍）。

当答案显示动画完成时，焦点将设置为显示的div，这意味着屏幕阅读器将（从我有限的经验）读取该点。

按钮自然会聚焦，因此键盘可以访问。

我还能做什么？

Answer 1

使这种优雅降级的最简单方法是使用如下代码片段：

<noscript><link rel=stylesheet src="no_js.css"></noscript>

然后有一个CSS文件no_js.css，如下所示：

.answer {
    display: inline !important;
}

因此，当关闭脚本时，该样式表会覆盖原始样式，以使所有.answer可见。

Answer 2

如果您想根据JavaScript是否处于活动状态来更改页面上的CSS，请尝试avoid noscript。最佳实践似乎是在 head 中添加JavaScript以将CSS附加到DOM。

var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "css/style2.css");
document.getElementsByTagName("head")[0].appendChild(fileref);

或者在jQuery中......

$('<link rel="stylesheet" type="text/css" href="css/style2.css" />').appendTo('head');

至于你可以为没有JavaScript的浏览器做些什么，有一些方法可以使用纯CSS来操作内容。这个小提琴使用焦点，但跟踪隐形复选框也是一种替代方案。

http://jsfiddle.net/x33kcr18

或者将常见问题解答答案拆分为自己的HTML页面，然后使用iFrame动态加载它们。

<h2>Is the sky blue?</h2>
<a href="answer1.html" target="answer1"><button>+</button></a>
<iframe name="answer1"></iframe>

Answer 3

目前的时尚似乎是offset the text from the screen。

但是，请记住屏幕阅读器do support JavaScript。

我猜，最好的办法是try it out。

如何让我的常见问题更容易访问？

3 个答案: