# Web_Operations_18 **Repository Path**: huangjieqi/Web_Operations_18 ## Basic Information - **Project Name**: Web_Operations_18 - **Description**: 网站运营与管理相关知识仓库 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2020-03-17 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web_Operations_18 # 网站运营与管理 ### Web可访问性文章入门编写技巧 #### 摘要 本页介绍了一些基本注意事项，可帮助您开始编写残障人士更容易访问的Web内容。这些提示是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。请点击相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户故事等。 ---- #### 页面内容 - [提供信息丰富，独特的页面标题](https://www.w3.org/WAI/tips/writing/#provide-informative-unique-page-titles) - [使用标题来表达意义和结构](https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure) - [使链接文本有意义](https://www.w3.org/WAI/tips/writing/#make-link-text-meaningful) - [为图像编写有意义的文本替代品](https://www.w3.org/WAI/tips/writing/#write-meaningful-text-alternatives-for-images) - [为多媒体创建成绩单和标题](https://www.w3.org/WAI/tips/writing/#create-transcripts-and-captions-for-multimedia) - [提供明确的说明](https://www.w3.org/WAI/tips/writing/#provide-clear-instructions) - [保持内容清晰简洁](https://www.w3.org/WAI/tips/writing/#keep-content-clear-and-concise) ![](https://upload-images.jianshu.io/upload_images/15426330-25596736b6ce3b7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/994/format/webp) ### 提供信息，独特的页面标题 ---- 对于每个页面，提供一个短小的标题来概括这页的内容并且这个短小的标题能与其它页面区分开。页面标题通常和页面的主标题相同。首先放置独特的和最相关的信息；例如，将页面的名称放在组织的名称前。对于多步骤流程的页面，在页面标题中包含当前的步骤。 **例子：页面标题** **主页标题** Space Teddy Inc.（太空泰迪公司） **页面名称跟在组织名称后面** Latest News • Space Teddy Inc.（最新消息•太空泰迪公司） **页面名称包括进程中的步骤** Buy Your Bear (Step 1 of 3) • Space Teddy Inc.（购买你的小熊(步骤3中的第1步)•太空泰迪公司） **更多的信息** - **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) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0302/125600_65781e46_1532279.png "1.png") ### 使用标题来表达意义和结构 ---- 使用简短的标题对相关的段落进行分组并且清楚地描述每一部分。好的标题提供内容的概述。 **例子：使用标题来组织内容** - 缺少标题 - 使用标题和副标题 **更多信息** - **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) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0302/125638_d2ff38f3_1532279.png "2.png") ### 使链接文本有意义 ---- 编写链接文本，以便描述链接目标的内容。避免使用含糊不清的链接文本，例如“点击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“提案文档（RTF，20MB）” #### **示例：使用链接文本描述目标页面** 无信息 - 有关设备独立性的更多信息，[请单击此处]()。 有意义的信息 - 详细[了解设备独立性]()。 #### **更多信息** - **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) ![](https://upload-images.jianshu.io/upload_images/15426330-8789e04b10889992.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/985/format/webp) ### 为图像编写有意义的文本替代品 ---- 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰图像，不需要编写替代文本。 #### **示例：使用替代文本来传达重要信息** ##### 无信息 ![](https://images.gitee.com/uploads/images/2019/0303/185549_dcf80ff5_1648165.png) 为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。 **图片的替代文字**：“充电电话” ##### 有意义的信息 ![](https://images.gitee.com/uploads/images/2019/0303/185549_dcf80ff5_1648165.png) 为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。 **图像的替代文字**：“将电缆插入手机的底部边缘。” - 详细[了解设备独立性]()。 #### **更多信息** - **WCAG** - [非文本内容1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)[（了解1.1.1）](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - **教程** - [图片](https://www.w3.org/WAI/tutorials/images/) - **用户故事** - [描述盲人用户的文本替代值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ![](https://upload-images.jianshu.io/upload_images/15426330-7639932eb20f0d46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/983/format/webp) ### 为多媒体创建文本和字幕 对于只有音频的内容，如播客，提供一份文本。对于音频和视频内容，例如培训视频，还提供字幕。在文本和字幕中包含对理解内容很重要的口头信息和声音，例如“门的嘎吱嘎吱声”。对于视频的字幕，还应包括对重要视觉内容的描述，例如“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) ![](https://images.gitee.com/uploads/images/2019/0302/142748_b0debde8_1532279.png) ### 提供清晰的说明 确保给予指令，指导和错误的信息清晰明了，使人易懂，并且还要避免使用不必要的专业术语。描述输入的要求，例如日期格式。 例子：说明并传达给用户应提供的信息 - 密码至少应为六个字符，且至少有一个数字（0-9）。 例子：表明错误问题是什么，可以的话，表明该如何解决问题。 - 1.用户名'superbear'已被使用。 - 2.密码中应包含至少一个数字。 **更多信息** ##### 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) ![](https://images.gitee.com/uploads/images/2019/0302/142152_9377c43b_1831515.png "微信图片_20190302131835.png") ### 保持内容清晰简洁 根据上下文使用简单的语言和格式设置 - 写一些简短明了的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为可能不知道术语的读者提供注解。 - 首次使用时扩展首字母缩略词。例如，Web内容可访问性指南（WCAG）。 - 考虑为可能不知道术语的读者提供注解。 - 根据需要使用列表格式。 - 考虑使用图像，插图，视频，音频和符号来帮助弄清楚意思。 ![](https://images.gitee.com/uploads/images/2019/0302/142239_ef2a99d5_1831515.png "微信图片_20190302142221.png") **例子：使内容可读并且易于理解** - 不必要的复杂 CPP：在车辆相撞的情况下，公司指派的代表将会设法查明所有有关各方财产损失的程度和原因。一旦我们的代表获得允许我们理解因果关系的信息，我们可能会或者可能不会给予适当的金钱补偿。产生的结果可能会出现以下选项之一：索赔没有获得批准并且被为拒绝壮体啊，索赔状态步明确，并且在进一步处理之前需要其它信息，索赔部分批准并减少付款是已分配和签发，或索赔已完全批准，并且已分配和发放索赔总额。 - 更容易理解 索赔处理程序（CPP）：如果你发生车祸，我们的代理人将会进行调查。调查结果将会决定索赔付款。这可能导致： 1. 批准索赔-全额付款 2. 部分批准的索赔-减少付款 3. 未确定的声明-需要更多信息 4. 被拒绝的索赔-没有付款 **更多信息** - 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) ### Step2 网站评价——淘宝网 ![淘宝网](https://images.gitee.com/uploads/images/2020/0325/100759_5f758257_2219751.png "淘宝网界面") 1. 淘宝网站的定位是购物网站，提供商品给消费者购买，淘宝页面均以此为导向，展示了用户所需要的商品，提供了众多选择。 2. 网站的链接数量非常多，在网速正常情况下打开速度也很快，外部链接无病毒。 3. 网站内容每天更新，且均为原创。 4. 导航栏清晰，访问者可以清楚的知道自己当时在网站中的位置，并且愉快的通过设置的指引而遍览网站。 5. 具有稳定性，早晚中哪个时间段登录都有较好的稳定性，即使是“双十一”等大型秒杀活动也基本能运行流畅。 6. 个人觉得网站的设计不够大方简洁，小图片和字太多，稍有扰乱。