# Web_Operations **Repository Path**: NFUNM048/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-03-04 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营与管理 ### Web可访问性入门编写贴士 #### 概述 本页介绍了一些基本注意事项，可帮助您开始编写对残障人士更容易访问的Web内容。这些贴士是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。关注WCAG相关要求的链接，“理解”文档中的详细背景，教程指南和用户故事等。 #### 页面内容 -提供详实的独特的页面标题 -使用标题来传达意义和结构 -使链接文本有意义 -为图像编写有意义的文本替代品 -为多媒体创建副本和标题 -提供清晰的说明 -保持内容清晰简洁 ![](https://images.gitee.com/uploads/images/2019/0302/125534_014e0705_1532279.png "0.png") ### 1.提供详实信息和独一无二的的页面标题 对于每个页面，提供一个短标题来概括页面内容并与其他页面区别开。页面标题通常和主标题相同。首先放置独特的和最相关的信息；例如，将页面名称放在组织名称前。对于多层级的页面，在页面标题中包含当前的页面层级。 **例子：页面标题** **主页标题** Space Teddy Inc.（太空泰迪公司） **页面名称跟在组织名称后面** Latest News • Space Teddy Inc.（最新消息•太空泰迪公司） **页面名称包括步骤中的某一步** Buy Your Bear (Step 1 of 3) • Space Teddy Inc.（购买你的小熊(3步骤中的第1)•太空泰迪公司） **更多的信息** - WCAG 页面标题2.4.2（[了解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") - [2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/125218_6dbea567_1532279.png "屏幕快照 2019-03-04 12.51.53.png") --- ### 2.使用标题来传达意义和结构 ---------------------------------------------- 使用简短的标题对相关的段落进行分组并且清楚地描述每一部分。好的标题提供内容的概述。 **例子：使用标题来组织内容** - 缺少标题 - 使用标题和副标题 **更多信息** WCAG - [标题和标签2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/131205_82ad48ab_1532279.png "屏幕快照 2019-03-04 13.09.56.png") - [章节标题2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/131502_62a42405_1532279.png "屏幕快照 2019-03-04 13.10.08.png") - [信息和关系1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/131846_8d5224ac_1532279.png "屏幕快照 2019-03-04 13.10.21.png") 用户故事 - 屏幕阅读器用户如何使用标题来进行导航 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0302/125638_d2ff38f3_1532279.png "2.png") --- ### 3.使链接文本有意义 编写带有链接目标的内容的链接文本，避免使用含糊不清的文本，列如点击此处”或“阅读更多”。标明关于链接目标的相关信息，比如文档类型和大小，如“提案文档（RTF，20MB）”。 **示例：使用链接文本描述目标页面** -无意义的信息（错误的） 获取更多关于此设备的有关信息，请点击这里 -有意义的信息（正确的） 获取更多关于此设备的有关信息 **更多信息** ##### WCAG ![输入图片说明](https://images.gitee.com/uploads/images/2019/0302/212915_3be19fb2_1831518.png "QQ图片20190302205134.png") - 链接目的（上下文）2.4.4（理解2.4.4） 每个链接的目的可以单独从链接文本或链接文本连同其程序确定的链接上下文来确定，除非链接的目的通常对用户不明确。 ![](https://images.gitee.com/uploads/images/2019/0304/124313_b4e6de29_1831518.png "2.44.png") - 链接目的（仅链接）2.4.9（理解2.4.9） 有一种机制可以允许仅从链接文本中识别每个链接的目的，除非链接的目的通常对用户不明确。 ![](https://images.gitee.com/uploads/images/2019/0304/124432_0e64773e_1831518.png "2.49.png") ### 4.为图像编写有意义的文本备选方案 对于每个图像，需要提供图像信息或功能的替代文本。对于纯装饰图像，不需要编写替代文本。 **示例：使用可选文本传达重要信息** -非信息性的 1.为手机充电：使用原配的充电线和电源适配器将手机与插座链接。 2.图像的可选文字：“为手机充电”。 -信息性的 1.为手机充电：使用原配的充电线和电源适配器将手机与插座链接。 2.图片的可选文字：“将充电线插入手机底部边缘。” -可选文本通常不可见；这次它包含在本例中，以便您可以看到它是什么。 ![](https://images.gitee.com/uploads/images/2019/0302/213000_ae4c58ff_1831518.png "QQ图片20190302205140.png") **更多信息** ##### WCAG -非文本内容1.1.1（理解1.1.1）除了下面列出的情况之外，呈现给用户的所有非文本内容都具有用于等效目的的文本替代。 ![](https://images.gitee.com/uploads/images/2019/0304/124857_e57861d1_1831518.png "1.1.1.png") -教程 -图像 **用户故事** -为盲人用户编写替代文本 **更多信息** ##### 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)) **为同步媒体中的所有预先录制的音频内容提供字幕，除非媒体是文本的媒体替代品并且明确标记为此类。** ![](https://images.gitee.com/uploads/images/2019/0304/102958_444f43a2_1831515.png "1.png") ### 6.提供清晰的说明 确保说明与指导还有错误信息的提示清晰易懂，并避免使用不必要的专业语言，描述清楚输入的要求，例如日期格式。 例子：说明并传达给用户应提供的信息 - 密码至少应为六个字符，且至少有一个数字（0-9）。 例子：表明错误是什么，可以的话，说明该如何解决问题。 - 1.用户名'superbear'已被使用。 - 2.密码中应包含至少一个数字。 -- **更多信息** ##### WCAG - [标签或说明 3.3.2](https://www.w3.org/WAI/WCAG21/quickref/#labels-or) --- ![](https://images.gitee.com/uploads/images/2019/0304/210514_38c3c91d_1829803.png) ### 保持内容的简洁与明晰 根据上下文使用简单的语言与格式。 - 用简短，简洁的句子与段落。 - 考虑到会为读者提供到他们不熟悉的难词，避免使用不必要的复杂词句。 - 在第一次使用时扩展首字母的缩写，举个例子，网页内容无障碍指南（WCAG）。 - 考虑为读者不熟悉的术语提供词汇表。 - 根据需要使用列表格式。 - 考虑使用图像，插图，视频，音频以及符号来帮助说明意思。 --- ![](https://images.gitee.com/uploads/images/2019/0304/211553_489c0716_1829803.png) **例子：使内容可读且容易理解** - 不必要的复杂 CPP：当车辆相撞，公司派出的代表将会查清楚所有有关各方财产损失的程度和原因。当我们的代表获得我们可以理解因果关系的信息，我们可能会或者可能不会给予适当的金钱赔偿。产生的结果可能会出现以下选项之一：索赔没有获得批准并且为拒绝状态，说法模棱两可的状态,将需要额外的信息进行进一步的处理之前,索赔部分批准和减少支付分配和发行,或声称完全批准和总索赔付款分配和发行。 - 更容易理解 索赔处理程序（CPP）：如果你发生车祸，我们的代理人将会进行调查。调查结果将会决定任何索赔付款。这可能导致： 1. 批准索赔-全额付款 2. 部分批准的索赔-减少付款 3. 未确定的声明-需要更多信息 4. 被拒绝的索赔-没有付款 --- ![](https://images.gitee.com/uploads/images/2019/0304/211553_fee49cf3_1829803.png) **更多信息** ##### WCAG * [阅读水平3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level) * [异常词3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) * [缩略语3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) ##### 用户故事 * [阅读障碍用户从易读文本中获益](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent) --- ![](https://images.gitee.com/uploads/images/2019/0304/211553_36b2e330_1829803.png) **了解有关辅助功能的详细信息** 这些技巧是您需要考虑的一些关于Web可访问性的内容。以下资源可帮助您了解为什么可访问性很重要，以及有关使残障人士更容易访问Web的指导原则。 * [辅助功能介绍](https://www.w3.org/WAI/fundamentals/accessibility-intro/)-介绍辅助功能并提供指向许多有用资源的链接 * [可访问性原则](https://www.w3.org/WAI/fundamentals/accessibility-intro/)-WCAG要求简介 * [残疾人如何使用网络](https://www.w3.org/WAI/people-use-web/)-现实生活中的例子显示了残疾人可访问性的重要性 * [如何满足wcag（快速参考）](https://www.w3.org/WAI/WCAG21/quickref/)-所有wcag要求和技术的可定制参考 --- ![](https://images.gitee.com/uploads/images/2019/0304/211553_137b1e59_1829803.png) **帮助提升这个页面** * 请通过电子邮件或GitHub将您的想法，建议或意见分享到公开存档的列表[wai-eo-editors@w3.org](wai-eo-editors@w3.org)。 * [电子邮件](wai-eo-editors@w3.org) * [在Github上分叉以及编辑](https://github.com/w3c/wai-quick-start/edit/master/_tips/writing.md) * [Github新事件](https://github.com/w3c/wai-quick-start/issues/new)