# translation **Repository Path**: NFUNM073/translation ## Basic Information - **Project Name**: translation - **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-01 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # web可用性编写入门技巧 > 以下内容引用自W3C WAI，其中很好的讲述了如何使网页更具可用性，对于学习和了解网页设计的小伙伴有一定的帮助。[*原文地址https://www.w3.org/WAI/tips/writing/*](https://www.w3.org/WAI/tips/writing/) ## 摘要 这个页面介绍了一些基本的注意事项，以帮助您开始编写更利于残疾人访问的web内容。这些技巧是帮助您满足Web内容可访问性指南(WCAG)要求的良好实践。请点击相关WCAG需求的链接、“理解”文档中的详细背景、教程中的指导、用户故事等。 ![avatar](https://images.gitee.com/uploads/images/2019/0304/140946_3d422f19_1831504.png) --- ### 提供信息丰富，独特的页面标题 对于每个网页，提供描述页面内容的简短标题，并将其与其他页面区分开来。页面标题通常与页面的主标题相同。首先提供独特和最相关的信息; 例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包含当前步骤。 ![title.png](https://images.gitee.com/uploads/images/2019/0304/141958_230652ec_1831504.png) #### 示例： 使用页面标题 主页标题 ![avatar](https://images.gitee.com/uploads/images/2019/0303/115002_d807a5f7_1831504.png) 页面名称后跟组织名称 ![avatar](https://images.gitee.com/uploads/images/2019/0303/115056_84e1287f_1831504.png) 页面名称包括进程中的步骤 ![avatar](https://images.gitee.com/uploads/images/2019/0303/115133_9cdf427d_1831504.png) --- ### 使用标题来表达意义和结构 使用简短标题对相关段落进行分组，并清楚地描述各个部分。好的标题提供了内容的概述。 ![use.png](https://images.gitee.com/uploads/images/2019/0304/142055_427c1fd4_1831504.png) #### 示例：使用标题来组织内容 缺乏标题和副标题 ![avatar](https://images.gitee.com/uploads/images/2019/0303/115749_2d457a7a_1831504.png) 使用标题和副标题 ![avatar](https://images.gitee.com/uploads/images/2019/0303/115958_365870f4_1831504.png) #### More Information #### WCAG * [Headings and Labels 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels/)[(Understanding 2.4.6) ](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) * [Section Headings 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)[(Understanding 2.4.10)](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) * [Info and Relationships 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)[(Understanding 1.3.1)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) #### User Story： * [How a screen reader user uses headings to navigate(屏幕阅读器用户如何使用标题进行导航)](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) --- ### 使链接文本有意义 编写链接文本，以便描述链接目标的内容。避免使用含糊不清的链接文本，例如“点击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“提案文档（RTF，20MB）”。 ![LINK.png](https://images.gitee.com/uploads/images/2019/0304/141748_b1f71398_1831504.png) #### 示例：使用链接文本描述目标页面 无信息：有关设备独立性的更多信息，请单击此处。 有意义的信息：详细了解设备独立性 ![微信截图_20190304142648.png](https://images.gitee.com/uploads/images/2019/0304/142704_9eb93fcd_1831504.png) #### More Information #### WCAG * [Link Purpose (In Context) 2.4.4](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)[(Understanding 2.4.4)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) 链接目的（在上下文中）2.4.4（理解2.4.4） * [Link Purpose (Link Only) 2.4.9](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only)[(Understanding 2.4.9)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only) 链接目的（仅限链接）2.4.9（了解2.4.9） --- ### 为图像编写有意义的文本替代品 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰图像，不需要编写替代文本。 ![微信截图_20190304142838.png](https://images.gitee.com/uploads/images/2019/0304/142855_17040f81_1831504.png) #### 示例：使用替代文本来传达重要信息 ![avatar](https://images.gitee.com/uploads/images/2019/0303/120838_bb2eb9b7_1831504.png) 无信息提示：为手机充电：使用随附的数据线和电源适配器将手机连接至电源插座。图片的替代文字：“正在充电的手机” ![avatar](https://images.gitee.com/uploads/images/2019/0303/120838_bb2eb9b7_1831504.png) 有信息提示：为手机充电：使用随附的数据线和电源适配器将手机连接至电源插座。图像的替代文字：“将数据线插入手机的底部边缘。” 替代文字通常不可见; 它包含在这个例子中，所以你可以看到它是什么。 ![avatar](https://images.gitee.com/uploads/images/2019/0304/101218_7ccea630_1648157.png) #### More Information #### WCAG： * [Non-text Content 1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)[(Understanding 1.1.1)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) * Tutorial（教程）：[Images](https://www.w3.org/WAI/tutorials/images/) #### User Story： * [Describes the value of text alternatives to a blind user（描述盲人用户的文本替代值）](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) --- ### 提供明确的说明 确保说明，指导和错误消息清晰，易于理解，并避免使用不必要的技术语言。描述输入要求，例如日期格式。 ![微信截图_20190304142513.png](https://images.gitee.com/uploads/images/2019/0304/142535_594062cf_1831504.png) #### 示例：说明传达用户应提供的信息 密码至少应为六个字符，且至少有一个数字（0-9）。 ![微信截图_20190304142435.png](https://images.gitee.com/uploads/images/2019/0304/142557_9208885e_1831504.png) #### 示例：错误表示问题是什么，可能还有如何解决问题 1. 用户名'superbear'已在使用中。 2. 密码至少需要包含一个数字。 ![avatar](/img/补充图片1.png) #### More Information #### WCAG: * [Labels or Instructions 3.3.2](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) [(Understanding 3.3.2)](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) #### User Story ： * [Describes simple instructions help someone with learning difficulties](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant) 描述简单的说明可以帮助有学习困难的人 --- ### 保持内容清晰简洁 根据上下文使用简单的语言和格式 * 写一些简短明了的句子和段落。 * 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 * 首次使用时扩展首字母缩略词。例如，Web内容可访问性指南（WCAG）。 * 考虑为读者可能不知道的术语提供词汇表。 * 根据需要使用列表格式。 * 考虑使用图像，插图，视频，音频和符号来帮助澄清意义。 ![微信截图_20190304142357.png](https://images.gitee.com/uploads/images/2019/0304/142417_48e9bdf6_1831504.png) #### 示例：使内容可读且易于理解 不必要的复杂：CPP：如果发生车辆碰撞，指定代表的公司将寻求确定属于所有相关方财产的损害程度和原因。一旦我们的代表获得允许我们理解因果关系的信息，我们可能会或可能不会分配适当的货币补偿。由此产生的决定可能会出现以下选项之一：索赔未获批准并被指定为拒绝状态，索赔状态不明确，并且在进一步处理之前需要其他信息，索赔部分批准并减少付款是已分配和签发，或索赔已完全批准，并且已分配和发放索赔总额。 （ 如何使内容易于理解） ： 索赔处理程序（CPP）：如果您发生车祸，我们的代理人将进行调查。调查结果将确定任何索赔付款。这可能导致： * 批准的索赔 - 全额付款 * 部分批准的索赔 - 减少付款 * 未确定的声明 - 需要更多信息 * 被拒绝的索赔 - 没有付款 ![avatar](https://images.gitee.com/uploads/images/2019/0303/120512_1299622c_1831504.png) ![cpp.png](https://images.gitee.com/uploads/images/2019/0304/141904_e0518e66_1831504.png) #### More Information #### WCAG : * [Reading Level 3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level)[(Understanding 3.1.5)](https://www.w3.org/WAI/WCAG21/Understanding/reading-level) * [Unusual Words 3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) [(Understanding 3.1.3)](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words) * [Abbreviations 3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) [(Understanding 3.1.4)](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations)缩写3.1.4（理解3.1.4） #### User Story ： * [User with reading disabilities benefits from easy to read text](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent) 阅读障碍的用户可以从易于阅读的文本中受益 --- ### 为多媒体创建成绩单和标题 对于纯音频内容，这样的播客提供成绩单。对于音频和视频内容，例如培训视频，还提供字幕。在成绩单和标题中包含对理解内容很重要的口头信息和声音，例如“门吱吱”。对于视频脚本，还包括重要视觉内容的描述，例如“Athan离开房间”。 ![multimedia.png](https://images.gitee.com/uploads/images/2019/0304/141838_ee96ebac_1831504.png) #### More Information #### WCAG * [Captions (Prerecorded) 1.2.2](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) [(Understanding 1.2.2)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded) 字幕（预先录制）1.2.2 * [Audio Description or Media Alternative (Prerecorded) 1.2.3](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) [(Understanding 1.2.3)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded)音频描述或媒体替代（预先录制）1.2.3（了解1.2.3） #### User Story: * [Describes how captions help a deaf student 描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) 编写者 石恒 171013073 李煜华 171013041 江泽锋 171013036