无障碍网页设计：「05」使用 header、nav、footer 标签使屏幕阅读器更容易导航

路条编程 2020-09-25

196

欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。

今天我们介绍的内容是使用 header、nav、footer 标签使屏幕阅读器更容易导航。

header 是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。与 main 类似，header 的语义化特性也可以使辅助技术快速定位到它的内容。

注意：header 标签用在 HTML 文档的 body 标签中。header 标签与包含页面标题、元信息的 head 标签不同。header 标签代表一组入门或导航帮助。它可能包含一些标题元素，也可以包含其他元素，例如徽标，包装部分的标题，搜索表单等。head 标签提供有关文档的基础信息（元数据），包括其标题以及脚本和样式表的链接及定义等。

nav 标签也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。对于在多个页面底部出现的站点链接，不需要使用 nav，用 footer 会更好。

与 header 和 nav 类似，footer 标签也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

以我们本专题的框架模板为例，我们页头及导航使用 header 及 nav 标签, 页面尾使用 footer 标签。页头部分代码如下所示：

<header class="header">
    <div class="header-main ">
      <div class="header-main-left ">
          <div class="nav-header-logo">
            <img src="../images/logo.png" alt="logo">
            <h1>路条编程</h1>
          </div>
      </div>
      <nav class="nav" style="flex: 1 1 0%;">
        <ul class="menu">
              <li><a href="../../html-base/html/index.html" target="_blank">HTML基础</a></li>
              <li><a href="../../css-base/html/index.html" target="_blank">CSS基础</a></li>
              <li><a href="../../Applied-Visual-Design/html/index.html" target="_blank">应用视觉设计</a></li>
              <li><a href="#" ><span class="current">无障碍网页设计</span></a></li>
              <li><a href="#">Flex布局</a></li>
              <li><a href="#">Grid布局</a></li>
          </ul>
      </nav>
      <div style="min-width: 53px;"></div>
    </div>
</header>

页尾部分代码如下所示：

<footer class="footer">ICodeRoad-&copy;路条编程版权所有</footer>

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

无障碍网页设计：「05」使用 header、nav、footer 标签使屏幕阅读器更容易导航

评论