# 网站运营与管理 **Repository Path**: VirginiaT/WOAM ## Basic Information - **Project Name**: 网站运营与管理 - **Description**: No description available - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-03-03 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## [Tips for Getting Started Writing for Web Accessibility 的原则](https://www.w3.org/WAI/tips/writing/#top) ### 摘要 本页介绍了一些基本注意事项，可帮助您开始编写残障人士更容易访问的Web内容。这些提示是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。可点击相关链接了解WCAG的要求，文档的详细背景，教程指南，用户故事等。 ### 内容 - 提供丰富的信息，独特的页面标题 - 使用标题传达意义和结构 - 使链接文本更有意义 - 为图像编写有意义替代文本 - 为多媒体创建文本和标题 - 提供明确的指示 - 保持内容清晰简洁 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0303/175722_e7eb6f9e_1648197.png "23c21585d90e29569e20a06833ced04.png") --- ### 提供丰富的信息，独特的页面标题 > 对于每一个网页，给出一个描述页面内容的小标题以及能将此页面区别于其他的页面。页面的标题通常应与页面的主标题相似。首先，给出独特的和最密切相关的信息。例如：将页面名称放于组织名称前。对于属于多步骤流程的页面，应将当前步骤包含于页面标题中。 #### 示例：页面标题 说明|页面标题 :-:|:-: 主页标题|Space Teddy Inc. 页面名称后跟组织名称|Latest News • Space Teddy Inc. 页面名称包括进程中的步骤|Buy Your Bear (Step 1 of 3) • Space Teddy Inc. ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/123531_d0eb5593_1648197.png "原则1.png") #### 更多信息 - **WCAG** - [Page Titled 2.4.2](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) - [Understanding 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) #### Understanding 2.4.2中的相关内容 ##### 页面标题的优点 - 该标准使所有用户受益，允许用户快速且容易地识别网页中包含的信息是否与他们的需求相关。 - 视力残疾人士可以在多个网页打开时能够了解内容。 - 有认知障碍、短期记忆和阅读障碍的人也可以通过其标题了解内容。 - 这一标准还有益于那些在网页间浏览时，依赖于音频信息的严重移动障碍患者（难以使用键盘和输入设备的人）。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/125210_2f236615_1648197.png "1链接-优点.png") #### 页面标题的操作例子 - **一个HTML网页** `HTML网页的描述性标题用元素标记，这样它会显示在用户代理的标题栏中。` - **文档集** `告诉大家UnderstandingWCAG 2.1的标题 是“UnderstandingWCAG 2.1”。` - 介绍页面的标题是“UnderstandingWCAG 2.0简介”。 - 该文档的主要部分是标题为“Understanding Guideline X”和“Understanding Success Criterion X”。 - 附录A的标题为“Glossary”。 - 附录B的标题是“Acknowledgements”。 - 附录C的标题为“References”。 - **一个Web应用程序** `银行应用程序允许用户检查他的银行账户，查看过去的报表和执行交易。Web应用程序会为每个Web页面动态生成标题，例如“Bank XYZ，John Smith帐户”，“Bank XYZ，2005年12月帐户1234-5678”。` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/125157_2948e02c_1648197.png "1链接-例子.png") --- ### 使用标题传达意义和结构 > 使用简短标题对相关段落进行分组，并清楚地描述各个部分。好的标题会告诉你页面内容的概要。 #### 示例：使用标题来概括内容 **1、缺乏子标题** 一个主标题|内容 :-:|:-: Headings and Subheadings|HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术（为残疾人设计的技术）传达附加的意义。在许多情况下，这样做也会使您的文档更容易编辑。对于段落超过三段或者四段的文件，标题和副标题在可用性和可访问性上显得尤为重要。它们能够帮助读者了解总体大纲并且引领读者了解其感兴趣的事物的特定信息。标题通常分为1到6个等级。最高级别的是“级别1”，通常对应于页面或主要文档部分的标题。副标题的标题等级则是不停地增加。等级越低，一节的内容会越详细。可视阅读器通过扫描页面来查找更大尺寸或不同样式的文本来识别标题。使用辅助技术的用户无法看到这些视觉变化，因此更改样式并不是足够的提示。相反，标题必须在语义上“标记”，以便辅助技术可以识别标题。这可以作为导航展示给用户。这使得“添加标题”成为屏幕阅读器用户最重要的工具之一，以便他或她可以了解页面上的内容。请注意，标记通常会直观地触发格式更改，但这是可以在许多文档中进行调整。 **2、使用标题和子标题** 标题|对应标题内容 :-:|:-: 标题和子标题|HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术（为残疾人设计的技术）传达附加的意义。在许多情况下，这样做也会使您的文档更容易编辑。 标题的目的|对于段落超过三段或者四段的文件，标题和副标题在可用性和可访问性上显得尤为重要。它们能够帮助读者了解总体大纲并且引领读者了解其感兴趣的事物的特定信息。 标题的级别|标题通常分为1到6个等级。最高级别的是“级别1”，通常对应于页面或主要文档部分的标题。副标题的标题等级则是不停地增加。等级越低，一节的内容会越详细。 意义与格式|可视阅读器通过扫描页面来查找更大尺寸或不同样式的文本来识别标题。使用辅助技术的用户无法看到这些视觉变化，因此更改样式并不是足够的提示。相反，标题必须在语义上“标记”，以便辅助技术可以识别标题。这可以作为导航展示给用户。这使得“添加标题”成为屏幕阅读器用户最重要的工具之一，以便他或她可以了解页面上的内容。请注意，标记通常会直观地触发格式更改，但这是可以在许多文档中进行调整。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/182521_92892dea_1648197.png "原则2.png") #### 更多信息 - **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)) - [Section Headings 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)([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) #### Understanding 2.4.6中的相关内容 ##### **目的** `目的是帮助用户了解网页中包含哪些信息以及如何组织这些信息。当标题清晰且具有描述性时，用户可以更轻松地找到他们所寻求的信息，并且他们可以更轻松地理解内容的不同部分之间的关​​系。描述性标签可帮助用户识别内容中的特定要素。` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/183957_2b9b92c3_1648197.png "原则2的intent.png") ##### **优点** - 描述性标题对于阅读缓慢的残疾用户和短期记忆力有限的用户尤其有用。当可以通过章节标题预测所属部分的内容时，这些人会受益。 - 带有标签的表单输入控件可以清楚地描述预输入的内容的话可以帮助用户了解如何成功填写表单。 - 当标题和标签也按[1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)所说进行正确的标记时，可帮助使用屏幕阅读器的人确保标签和标题在脱离上下文时有意义，例如，自动生成标题/目录列表，或者从页面中的标题跳转到标题。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/184039_8ff8253b_1648197.png "原则2的优点.png") ##### **例子** - 一个新闻网站 `新闻网站的主页列出了小时热门新闻的头条新闻。每个标题下都是故事的前35个单词和完整文章的链接。每个标题都清楚地表明了文章的主题。` - 如何写得好的指南 `写作指南包含以下部分标题：如何写得好，删减无用的词，识别不必要的单词等。章节标题清晰简洁，信息结构反映在标题的结构中。` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/184425_b6ce2d51_1648197.png "原则2链接例子.png") #### Understanding 1.3.1中的相关内容 ##### **目的** `目的是确保在演示文稿格式更改时保留视觉或听觉格式隐含的信息和关系。例如，当屏幕阅读器读取内容时或者当用户样式表被替换成作者提供的样式表时，显示格式会改变。` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/191137_b3a6471b_1648197.png "原则2链接2intent.png") ##### **优点** - 允许用户代理根据个人用户的需求调整内容，从而帮助不同残疾人士。 - 盲人（使用屏幕阅读器）的用户可以在“通过颜色传递的信息在文本中也可用”时受益（包括使用颜色传达信息的图像的文本替代）。 - 使用盲文（文本）可刷新显示器的失聪盲人用户可能无法访问颜色相关信息。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/191155_d30cc0e8_1648197.png "原则2链接2优点.png") #### **例子** - 包含必填字段的表单 `表单包含几个必填字段。必填字段的标签以红色显示。另外，每个标签的末尾都是星号字符*。填写表格的说明表明“所有必填字段均以红色显示并标有星号*”，后面是一个示例。` - 使用颜色和文本指示必填字段的表单 `表单包含必填字段和可选字段。利用表单顶部的说明告诉用户标有红色文字为必填字段，还有一个图标，其替代文本为“必填”。红色文本和图标都以编程方式与相应的表单字段相关联，以便实用辅助技术用户可以确定其所需填的表单部分。` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/191922_33fa564b_1648197.png "原则2链接2例子.png") ---- ### 使链接文本更有意义 > 编写链接文本，以便描述链接目标的内容。避免使用含糊不清的链接文本，例如“点击这里”或者“阅读更多”。指示链接目标的相关信息，例如文本的样式和大小，就像‘Proposal Documents (RTF, 20MB)’ #### 示例：利用文本链接描述目标页面 没有信息|有关设备独立性的更多信息，[点击此处](about:blank) :-:|:-: 丰富的信息|阅读更多[关于设备独立性的内容](about:blank) #### 更多信息 - **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)) - [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)) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0303/182936_a3fbef81_1648197.png "ea87a95c62211c176063b7cf94138df.png") ---- ### 为图像编写有意义替代文本 > 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰图像，则不需要编写替代文本。 #### 示例：使用替代文本来传达重要信息 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/120326_e0e945a5_1648197.png "中文示例图.png") #### 更多信息 - 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) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/120807_304ef564_1648197.png "f057df320d62da9dd013b9eb51dd4ff.png") ---- ### 为多媒体创建文本和标题 > 对于只有音频的内容，如播客，提供一份文本。对于音频和视频内容，如培训视频，也提供说明。在笔录和字幕中包括对理解内容很重要的语音信息和声音，例如门的吱吱声。对于视频记录，还包括对重要视觉内容的描述，例如Athan离开房间。 #### 更多信息 - **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)) - [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)) - **User Story** - [Describes how captions help a deaf student](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/203608_51777999_1648197.png "原则5.png") ---- ### 提供明确的指示 > 确保指令、指导和错误消息清晰、易于理解，并避免不必要的技术语言。描述输入需求，例如日期格式。 #### 示例 1、指令传达用户应该提供的信息 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/203918_7734111d_1648197.png "原则5示例截图1.png") 2、错误指示问题是什么，以及如何修复它 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/203942_b0eb98db_1648197.png "原则5示例截图2.png") #### 更多信息 - **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)。 - 考虑为读者可能不知道的术语提供术语表。 - 适当使用列表格式。 - 考虑使用图像、插图、视频、音频和符号来帮助澄清含义。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/204535_ec266f38_1648197.png "原则7.png") #### 示例 1、不必要的复杂 `CPP:在发生车辆碰撞的情况下，公司指派的代表将设法查明所有有关各方财产损失的程度和原因。一旦我们的代表获得了使我们能够理解因果关系的信息，我们可能会也可能不会给予适当的金钱补偿。由此产生的决策可能会导致以下选项之一:索赔未获批准，并被分配到拒绝状态，索赔的状态是模糊的，在进一步处理之前需要额外的信息，索赔是部分批准的。` 2、更通俗易懂 `理赔处理程序(CPP):如果您发生车祸，我们的代理会进行调查。调查结果将决定任何索赔付款。这可能导致： - 批准索赔-全额付款 - 部分批准索赔-减少付款 - 未定索赔-需要更多信息 - 拒绝索赔-不付款` ![输入图片说明](https://images.gitee.com/uploads/images/2019/0304/204904_08f22b12_1648197.png "原则7案例.png") #### 更多信息 - **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)) - **User Story** - [User with reading disabilities benefits from easy to read text](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent)