创建可访问更新区域

aria-live=true告知屏幕阅读器朗读已变化区域的全部内容,将其设为false告知屏幕阅读器仅仅朗读已变化的节点内容

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AwesomeCo</title>
</head>
<body>
    <header id="page_header" role="banner">
        <h1>AwesomeCo</h1>
        <nav role="navigation">
            <ul>
                <li><a href="#welcome">Welcome</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    <section id="content" role="document" aria-live="assertive" aria-atomic="true">
        <section id="welcome">
            <header>
                <h2>Welcome</h2>
            </header>
            <p>The Welcome Section</p>
        </section>
    </section>
    <footer id="footer">
        <p>©2012 Dan</p>
        <nav>
            <ul>
                <li><a href="http://awesomeco.com/">Home</a></li>
                <li><a href="about">About</a></li>
                <li><a href="terms.html">Terms of Service</a></li>
                <li><a href="privacy.html">Privacy</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

  

posted @ 2012-11-07 18:33  bradleydan  阅读(144)  评论(0)    收藏  举报