# 03-语义化与可访问性 ## 📋 学习目标 - 理解HTML5语义化标签的重要性 - 掌握ARIA属性的使用 - 学习Web可访问性最佳实践 - 提升SEO优化能力 ## 🏷️ HTML5语义化标签 ### 页面结构标签 ```html 语义化页面示例

网站名称

文章标题

2025年10月21日作者：张三

章节标题

章节内容...

``` ### 语义化标签详解 #### header - 页眉 ```html

网站标题

文章标题

发布时间和作者信息

章节标题

``` #### nav - 导航 ```html ``` #### main - 主要内容 ```html

页面主要内容

这是页面的核心内容区域

``` #### article - 独立文章 ```html

文章标题

2025年10月21日 14:30 作者：张三

文章正文内容...

用户名

2025年10月21日

评论内容...

``` #### section - 章节 ```html

完整教程

第一章：基础知识

基础内容...

第二章：进阶技巧

进阶内容...

``` #### aside - 侧边内容 ```html

主要内容

正文...

``` #### footer - 页脚 ```html

文章标题

文章内容...

``` ### 其他语义化标签 #### figure和figcaption ```html


function hello() {
    console.log('Hello World');
}

示例1：Hello World函数

生存还是毁灭，这是一个问题。

—— 莎士比亚，《哈姆雷特》

``` #### details和summary ```html

点击查看详情

这是隐藏的详细内容

列表项1
列表项2

FAQ问题

答案内容...

第一章

1.1 节

内容...

1.2 节

内容...

``` #### mark - 高亮 ```html

搜索结果中的关键词会被高亮显示

``` #### time - 时间 ```html 2025年10月21日 2025年10月21日 14:30 2小时30分钟 ``` ## ♿ Web可访问性（A11y） ### ARIA属性 #### role属性 ```html

主要内容（等同于main）

自定义按钮

标签页

标签面板

警告信息

文章

列表

列表项

``` **注意**：优先使用HTML5语义化标签，只有在必要时才使用role属性。 #### aria-label和aria-labelledby ```html

用户信息

用户详细信息...

商品名称

商品描述

``` #### aria-describedby ```html 请输入有效的邮箱地址密码至少8位密码过于简单 ``` #### aria-hidden ```html

文章标题

文章摘要...

``` #### aria-live ```html

新消息：您有3条未读消息

正在加载...

``` #### aria-expanded ```html ``` #### aria-selected和aria-current ```html

``` ### 键盘可访问性 #### tabindex ```html

可聚焦的div

``` #### 键盘事件处理 ```html

点击我

``` ### 焦点管理 ```javascript // 焦点陷阱（模态框中） const modal = document.getElementById('modal'); const focusableElements = modal.querySelectorAll( 'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])' ); const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; modal.addEventListener('keydown', (e) => { if (e.key === 'Tab') { if (e.shiftKey && document.activeElement === firstElement) { e.preventDefault(); lastElement.focus(); } else if (!e.shiftKey && document.activeElement === lastElement) { e.preventDefault(); firstElement.focus(); } } }); // 打开模态框时设置焦点 function openModal() { modal.style.display = 'block'; firstElement.focus(); } // 关闭模态框时恢复焦点 let previousFocus; function openModal() { previousFocus = document.activeElement; modal.style.display = 'block'; firstElement.focus(); } function closeModal() { modal.style.display = 'none'; previousFocus.focus(); } ``` ### 图片替代文本 ```html 2025年Q1销售额同比增长25%

``` ## 🔍 SEO优化 ### 结构化数据 ```html ``` ### 语义化HTML与SEO ```html

网站主标题

文章标题

章节标题

小节标题

这是重要内容，这是强调内容。

点击这里阅读完整文章：HTML语义化详解 ``` ## 🎯 完整示例 ### 可访问的模态框 ```html 可访问的模态框示例 ``` ## 📚 实践练习 ### 练习1：语义化博客页面创建一个语义化的博客文章页面，包含： - 正确的文档结构 - 面包屑导航 - 文章元信息（作者、时间、分类） - 相关文章侧边栏 - 评论区 ### 练习2：可访问的下拉菜单实现一个完全可访问的下拉菜单，要求： - 键盘可操作（Tab、Enter、Escape、方向键） - 正确的ARIA属性 - 焦点管理 - 屏幕阅读器友好 ### 练习3：SEO优化页面创建一个SEO优化的产品页面，包含： - 完整的meta标签 - 结构化数据（Product schema） - 语义化HTML - 图片优化 ## 💡 最佳实践 ### 1. 优先使用语义化标签 ```html

``` ### 2. 提供多种访问方式 - 键盘导航 - 屏幕阅读器支持 - 触摸操作 - 语音控制 ### 3. 测试工具 - **axe DevTools**：自动化可访问性测试 - **WAVE**：网页可访问性评估工具 - **Lighthouse**：综合评分（包含可访问性） - **NVDA/JAWS**：屏幕阅读器测试 ## 📚 参考资料 - [WCAG 2.1指南](https://www.w3.org/WAI/WCAG21/quickref/) - [WAI-ARIA最佳实践](https://www.w3.org/WAI/ARIA/apg/) - [MDN可访问性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility) - [Schema.org结构化数据](https://schema.org/)