javascript - 如何使我的常见问题解答更易于访问？

Question

我有这个问答格式:

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

* {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;
}

<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>

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可见。