# Web_Operations_Week01 **Repository Path**: Huzhaojie/Web_Operations ## Basic Information - **Project Name**: Web_Operations_Week01 - **Description**: 网站运营与管理作业任务 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-21 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ![1st](/Images/01.png) ## 编写Web可访问性 ### 摘要 此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ### 页面内容 - 提供内容丰富，独特的页面标题 - 使用标题传达含义和结构 - 使链接文字有意义 - 为图像编写有意义的文本替代 - 创建多媒体文字记录和字幕 - 提供明确的指示 - 保持内容简洁明了 --- --- ![2st](/Images/02.png) #### 提供内容丰富，独特的页面标题 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 示例：页面标题 - [x] 主页标题 Space Teddy Inc. - [x] 页面名称后跟组织名称 Latest News • Space Teddy Inc. - [x] 页面名称，包括流程中的步骤 Buy Your Bear (Step 1 of 3) • Space Teddy Inc. ##### 更多信息 WCAG [标题为2.4.2的页面](https://www.w3.org/WAI/WCAG21/quickref/#page-titled)（[了解2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)） --- --- ![3st](/Images/03.png) #### 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 示例：使用标题来组织内容 - [ ] 标题不足 ##### 标题和子标题 HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 - [x] 使用标题和副标题 ##### 标题和子标题 HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 ###### 标题的目的 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 ###### 标题级别 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 ###### 含义与格式 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 改编自[宾夕法尼亚州的标题和小标题](http://accessibility.psu.edu/headings/) ##### 更多信息 WCAG - [标题和标签2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)（[理解2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels)） - [本节标题2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)（[了解2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)） - [信息和关系1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)（[了解1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)） 用户的故事 - [屏幕阅读器用户如何使用标题导航](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) --- --- ![4st](/Images/04.png) #### 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 示例：使用链接文本描述目标页面 - [ ] 无信息 有关设备独立性的更多信息，请单击此处。 - [x] 有意义的信息 阅读[有关设备独立性的](javascript: return false)更多[信息](javascript: return false)。 ##### 更多信息 WCAG - [链接目的（在上下文中）2.4.4](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)（[理解2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)） - [链接目的（仅链接）2.4.9](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only)（[理解2.4.9](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only)） --- --- ![5st](/Images/05.png) --- #### 为图像编写有意义的文本替代 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ##### 更多信息 WCAG - [非文本内容1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) ([理解1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content)) 讲解 - [图片](https://www.w3.org/WAI/tutorials/images/) 用户的故事 - [向盲人用户介绍替代文本的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) --- --- ![6st](/Images/06.png) #### 创建多媒体文字记录和字幕 对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。 ##### 更多信息 WCAG - [字幕（预先录制）1.2.2](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) ([理解1.2.2](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded)) - [音频描述或媒体替代（预先录制）1.2.3](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([了解1.2.3](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded)) 用户的故事 - [描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) --- --- ![7st](/Images/07.png) #### 提供明确的指示 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 ##### 更多信息 WCAG - [标签或说明3.3.2](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) ([理解3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)) 用户的故事 - [描述简单的说明，帮助学习有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant) --- --- ![8st](/Images/08.png) ![9st](/Images/09.png) --- #### 保持内容简洁明了 根据情况，使用简单的语言和格式。 - 撰写简短明了的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 - 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 - 考虑为读者可能不知道的术语提供词汇表。 - 适当使用列表格式。 - 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 --- --- ![10st](/Images/10.png) ##### 更多信息 WCAG - [阅读级别3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level) ([理解3.1.5](https://www.w3.org/WAI/WCAG21/Understanding/reading-level)) - [不寻常的单词3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) ([理解3.1.3](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words)) - [缩写3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) ([理解3.1.4](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations)) 用户故事 - [阅读障碍者受益于易于阅读的文本](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent) --- --- --- ## 网站点评 #### 根据WAI原则点评任意一个网站 #### 我的点评网站：天猫-网页版 ![11st](/Images/11.PNG) - 有简短的副导航来引导相关的商品推荐，并清晰地做了分类。 - 使用了小标题将网站内容划分区域。 - 对于每个图片，都有提供图像信息或功能的介绍。 - 网站整体设计简洁明了，内容分块清晰。 #### 总的来说，天猫的网站设计都比较整洁明了，功能齐全，美中不足的是没有给各个图文链接附上相应的文字介绍，好让用户更方便使用。