# Web-operations **Repository Path**: carrin328pro/Web-operations ## Basic Information - **Project Name**: Web-operations - **Description**: 大二下-网站运营与管理 - **Primary Language**: 其他 - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-22 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web-operations 本翻译由黄嘉慧（181013060）及方乔（181013010）共同合作完成 以下部分为方乔进行翻译： # 编写web可访问性 #### 摘要 本页面介绍了一些基本注意事项，以帮助您开始编写对残疾人更容易访问的web内容。这些提示是帮助您满足Web内容可访问性指南(WCAG)要求的良好实践。按照相关WCAG要求的链接，“理解”文档中的详细背景，教程中的指导，用户故事，等等。 #### 页面内容 - 提供内容丰富，独特的页面标题 - 使用标题传达含义和结构 - 使链接文字有意义 - 为图像编写有意义的文本替代 - 创建多媒体文字记录和字幕 - 提供明确的指示 - 保持内容简洁明了 ![1](https://images.gitee.com/uploads/images/2020/0322/133650_6f6fe395_2230147.png "1.png") ### 提供内容丰富，独特的页面标题 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 #### 示例：页面标题 - 主页标题 - 页面名称后跟组织名称 - 页面名称，包括流程中的步骤 ##### 更多信息 - WCAG ![2](https://images.gitee.com/uploads/images/2020/0322/133720_0f9c217f_2230147.png "2.png") ### 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 #### 示例：使用标题来组织内容 - 标题不足 - 使用标题和副标题 ##### 更多信息 - WCAG - 标题和标签2.4.6（理解2.4.6） - 节标题2.4.10（了解2.4.10） - 信息和关系1.3.1（了解1.3.1） - 用户的故事 - 屏幕阅读器用户如何使用标题导航 ![3](https://images.gitee.com/uploads/images/2020/0322/133751_ceb3f128_2230147.png "3.png") ![4](https://images.gitee.com/uploads/images/2020/0322/133822_11792db9_2230147.png "4.png") ### 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 #### 示例：使用链接文本描述目标页面 - 无信息 有关设备独立性的更多信息，请单击此处。 - 有意义的信息 阅读有关设备独立性的更多信息。 ##### 更多信息 - WCAG - 链接目的（在上下文中）2.4.4（理解2.4.4） - 链接目的（仅链接）2.4.9（理解2.4.9） ![5](https://images.gitee.com/uploads/images/2020/0322/133834_0d36baa1_2230147.png "5.png") 以下部分为黄嘉慧进行翻译： ### 为图像编写一些有意义的文本可供选择 对于每个图像，为图像填写提供信息或功能的文本。对于单纯作装饰的图像，则没有必要填写供选择的文本。 #### 示例：使用替代文本传达重要信息 - 不提供信息的 - 内容丰富的 ![图1](https://images.gitee.com/uploads/images/2020/0322/114428_8ecd7989_2230147.png "图1.png") ##### 更多信息 - WCAG - 非文本内容1.1.1 （理解内容1.1.1） - 讲解 - 图片 - 用户的故事 -向盲人用户介绍替代文本的价值 ![图1.1](https://images.gitee.com/uploads/images/2020/0322/114450_216c28dd_2230147.png "图1.1.png") ### 创建多媒体文字记录和字幕 对于只有音频的内容，例如播客，请提供文字记录。对于音频和视频内容，例如训练视频，也请提供字幕。在文字记录和字幕中包括对理解内容很重要的语音信息和声音，例如“门的响声”。对于视频的文字记录，还包括对重要视觉内容的描述，例如“Athan离开了房间”。 ![图2](https://images.gitee.com/uploads/images/2020/0322/114632_543c1b9e_2230147.png "图2.png") ### 提供明确的指示 确保指示，引导和错误的信息是清晰的且容易理解的，还有避免不必要的技术性语言。描述输入要求，例如日期格式。 #### 示例：说明传达用户应提供哪些信息 - 密码至少应包含六个字符，并且至少包含一个数字（0-9）。 ![图3](https://images.gitee.com/uploads/images/2020/0322/114908_f6d8fbb0_2230147.png "图3.png") #### 示例：错误指示问题所在以及可能的解决方法 - 用户名“ superbear”已在使用中。 - 密码必须至少包含一个数字。 ![图3.1](https://images.gitee.com/uploads/images/2020/0322/114950_3b4ffcd1_2230147.png "图3.1.png") ![图3.2](https://images.gitee.com/uploads/images/2020/0322/115005_fae19ec7_2230147.png "图3.2.png") ### 保持内容简洁明了 根据情况，使用简单的语言和格式。 - 撰写简短明了的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 - 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 - 考虑为读者可能不知道的术语提供词汇表。 - 适当使用列表格式。 - 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 #### 示例：使内容易读易懂 ![图4](https://images.gitee.com/uploads/images/2020/0322/115129_59a56e9d_2230147.png "图4.png") ![4.1](https://images.gitee.com/uploads/images/2020/0322/115236_8c6bde0a_2230147.png "图4.png") ### 了解有关辅助功能的更多信息 这些技巧是您需要进行Web访问的一些注意事项。以下资源可帮助您了解为什么可访问性很重要，以及有关使残障人士更易访问网络的准则。 ![5](https://images.gitee.com/uploads/images/2020/0322/115252_425a3120_2230147.png "图5.png") # 根据WAI原则点评网站 ## 点评网站：[马蜂窝](http://www.mafengwo.cn/) - 点评如下 ### 提供独特的页面标题 :heavy_check_mark: 在网页有提供简短的标题，且有将最相关的信息放在了首位 ![1](https://images.gitee.com/uploads/images/2020/0322/151605_451d7874_2230147.png "马蜂窝33.png") ### 使用标题传达含义和结构 :heavy_check_mark: 标题导航列提供帮助用户导航，查找内容并确定其位置的方法，用户更快捷地到达不同页面 ![2](https://images.gitee.com/uploads/images/2020/0322/151857_fea6b3ed_2230147.png "导航.png") ### 提供明确的指示 :heavy_check_mark: 提供明确的指示，内容简洁明了，让用户使用得更方便 ![3](https://images.gitee.com/uploads/images/2020/0322/152216_69931666_2230147.png "指示.png") ### 使用标题来传达信息 :heavy_check_mark: 使用了标题传达含义和结构，在马蜂窝的首页里，使用了标题和副标题，可以有帮助读者确定文档的主题轮廓并浏览到感兴趣的特定信息 ![4](https://images.gitee.com/uploads/images/2020/0322/152100_07d1e0aa_2230147.png "标题.png") ### 使链接文本有意义 :heavy_check_mark: 文本直接写出标题，且可以超链接到另一页面，通过点击即进行跳转 ![5](https://images.gitee.com/uploads/images/2020/0322/152007_b97cd246_2230147.png "链接.png") ### 创建多媒体文字记录和字幕 :heavy_check_mark: 创建多媒体音频，添加图片、音频、视频能让用户在浏览游记时更设身处地地获得感受，增加用户体验 ![6](https://images.gitee.com/uploads/images/2020/0322/152312_881ca2f6_2230147.png "多媒体.png") ### 保持内容简洁明了 :heavy_check_mark: 保持内容简洁明了，在选择目的地的时候适当使用列表格式，使内容易读易懂，让使用者更快找到目标 ![7](https://images.gitee.com/uploads/images/2020/0322/152508_8a8ecea4_2230147.png "89.png")