# 网站运营与管理 **Repository Path**: Carlalyz/Week1trans_yh ## Basic Information - **Project Name**: 网站运营与管理 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2020-03-20 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Tips for Getting Started Writing for Web Accessibility ## 翻译小组成员：林莉明+181013130 陈立豪+181013057 李一鸣+181013058 *** ## 编写Web可访问性 ### 摘要 * 此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ### 页面内容 * 提供内容丰富，独特的页面标题 * 使用标题传达含义和结构 * 使链接文字有意义 * 为图像编写有意义的文本替代 * 创建多媒体文字记录和字幕 * 提供明确的指示 * 保持内容简洁明了 ![Image](https://images.gitee.com/uploads/images/2020/0321/101035_35fda120_2228569.png) *** ### 提供内容丰富，独特的页面标题 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 #### 示例：页面标题 * 主页标题（Space Teddy Inc * 页面名称后跟组织名称（Latest News • Space Teddy Inc. * 页面名称，包括流程中的步骤（Buy Your Bear (Step 1 of 3) • Space Teddy Inc. #### 更多信息 * WCAG * 标题为2.4.2的页面（了解2.4.2） ![Image](https://images.gitee.com/uploads/images/2020/0321/100956_12c74d12_2228569.png) *** ### 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 #### 示例：使用标题来组织内容 * 标题不足 * 标题和子标题 * HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。（改编自宾夕法尼亚州的标题和小标题 * 使用标题和副标题 * 标题和子标题 * HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 * 示例：标题的目的 * 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 * 示例：标题级别 * 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 * 示例：含义与格式 * 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。（改编自宾夕法尼亚州的标题和小标题 #### 更多信息 * WCAG * 标题和标签2.4.6（理解2.4.6） * 本节标题2.4.10（了解2.4.10） * 信息和关系1.3.1（了解1.3.1） * 用户的故事 * 屏幕阅读器用户如何使用标题导航 ![Image](https://images.gitee.com/uploads/images/2020/0321/100924_46db6dd6_2228569.png) ![Image](https://images.gitee.com/uploads/images/2020/0321/100855_269d4352_2228569.png) *** ## 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 #### 示例：使用链接文本描述目标页面 ✖️无信息：有关设备独立性的更多信息，请单击此处。 ✔️有意义的信息：阅读有关设备独立性的更多信息。 #### 更多信息 * WCAG * 链接目的（在上下文中）2.4.4（理解2.4.4） * 链接目的（仅链接）2.4.9（理解2.4.9） ![image](https://images.gitee.com/uploads/images/2020/0321/182928_19aa083b_2232011.png "F5946A0F-5A36-4191-AD26-96AE9377683D.png") *** ## 为图像编写有意义的文本替代 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 #### 示例：使用替代文本传达重要信息 ✖️没有信息：为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。图片的替代文本：“正在为手机充电” ✔️内容丰富：为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。图片的替代文本：“将电缆插入电话的底部边缘。” * 替代文字通常不可见；它包含在此示例中只是为了您可以看到它是什么。 #### 更多信息 * WCAG * 非文本内容1.1.1（理解1.1.1） * 讲解 * 图片 * 用户的故事 * 向盲人用户介绍替代文本的价值 ![image](https://images.gitee.com/uploads/images/2020/0321/183030_1e1718dc_2232011.png "EFA7D483-D1CB-4CE4-B062-6A3E7600351F.png") *** ## 为多媒体创建文本和标题 对于只提供音频的内容，比如播客，会提供文字记录。对于音频和视频内容，如培训视频，也提供字幕。在文字记录和说明中包含对理解内容很重要的口头信息和声音，例如，“门吱嘎声”。对于视频记录，还包括了对重要视觉内容的描述，例如“Athan离开了房间”。 #### 更多信息 * WCAG * 标题(预先录制)1.2.2(理解1.2.2) * 音频描述或媒体选择(预先录制)1.2.3(理解1.2.3) * 用户故事 * 描述字幕如何帮助聋哑学生 ![image](https://images.gitee.com/uploads/images/2020/0320/234511_3123bdf8_2232011.png "C15E7EF2-7E00-4846-86BD-20E8F98C66B7.png") *** ## 提供明确的指示 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 #### 示例：说明传达用户应提供哪些信息 密码至少应包含六个字符，并且至少包含一个数字（0-9）。 密码 [ ] #### 示例：错误指示问题所在以及可能的解决方法 1. 用户名“ superbear”已在使用中。 2. 密码必须至少包含一个数字。 #### 更多信息 * WCAG * 标签或说明3.3.2（理解3.3.2） * 用户故事 * 描述简单的说明，帮助学习有困难的人 ![image](https://images.gitee.com/uploads/images/2020/0321/183142_0070a8b9_2232011.png "2ECA5ED0-0F39-4AA1-B56A-C4B903E3BB64.png") *** ## 保持内容清晰简洁 根据上下文使用简单的语言和格式。 * 写简短、清晰的句子和段落。 * 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供一个术语表。 * 扩大首字母缩略词的使用范围。例如，Web内容可访问性指南(WCAG)。 * 考虑为读者可能不知道的术语提供一个术语表。 * 使用适当的列表格式。 * 考虑使用图像、插图、视频、音频和符号来帮助阐明含义。 ### 例如:使内容可读和可理解 | ✖️不必要的复杂 | ✔️ 更容易理解 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | CPP：一旦发生车辆碰撞，公司指派的代表将设法查明所有有关各方的财产损失的程度和原因。一旦我们的代表获得信息，使我们能够理解因果关系，我们可以或不可以分配适当的金钱补偿。由此产生的决策可能会导致下列选项之一:索赔未被批准，并被分配一个拒绝状态，索赔的状态是模糊的，在进一步处理之前需要额外的信息，索赔是部分批准的。| 索赔处理程序(CPP):如果你发生了交通事故，我们的代理将进行调查。调查结果将决定任何索赔付款。这可能导致:批准索赔-全额付款；部分批准索赔-减少付款；待定索赔-需要更多的信息；拒绝索赔-无付款 | #### 更多信息 * WCAG * 阅读水平3.1.5(理解3.1.5) * 常用词汇3.1.3(理解3.1.3) * 缩写词3.1.4(理解3.1.4) * 用户故事 * 有阅读障碍的用户得益于易于阅读的文本。 ### 了解更多关于可访问性的信息 这些提示是你需要考虑的网页可访问性的一些事情。下面的资源可以帮助您了解为什么可访问性很重要，以及如何使web更容易被残疾人访问。 * 易访问性介绍——介绍易访问性并提供许多有用资源的链接 * 易访问性原则——对WCAG要求的介绍 * 残疾人士如何使用网络-现实生活中的例子显示无障碍对残疾人士的重要性 * 如何满足WCAG(快速参考)-所有WCAG要求和技术的可定制参考 ![image](https://images.gitee.com/uploads/images/2020/0321/000958_aae1f10e_2232011.png "0143B8E6-5978-4761-8FF8-25F1FA14D60B.png") ![image](https://images.gitee.com/uploads/images/2020/0321/004128_0829ebef_2232011.png "1F358FBB-DD81-41AA-806F-2E9344381888.png") *** # 使用WAI原则来点评一个网站 ## 我们点评的网站是**王者荣耀**的官网 ![image](https://images.gitee.com/uploads/images/2020/0322/210904_f1a26a2d_2232011.jpeg "404016D0-D47E-40FC-9B78-AC517F2095C4.jpeg") ### 页面内容 * 从王者荣耀的官网页面可以看到，它的内容提供了明确的指示并保持内容简洁明了。 * 如：内容中心下的精品栏目、赛事精品、英雄攻略 * 如：赛事中心下的KPL、冠军杯、KPLG、T城市赛、高校联赛、TGA、微信游戏邀请赛、模拟战冬冠 * 为图像编写有意义的文本替代 ![image](https://images.gitee.com/uploads/images/2020/0322/191944_b00b98f2_2228569.png) ### 提供内容丰富，独特的页面标题 ![image](https://images.gitee.com/uploads/images/2020/0322/192056_be4861ea_2228569.png) * 由页头的导航栏对于每个网页提供了简短的标题，以描述页面内容并将其与其他页面区分开。↓↓↓ |官网首页|游戏资料|内容中心|赛事中心|百态王者|社区互动|玩家支持| | :------: | :------: | :------: | :------: | :------: | :------: | :------: | |HOME|DATA|CONTENTS|MATCH|CULTURE|COMMUNITY|PLAYER| ### 使用标题传达含义和结构 * 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题 * 由王者荣耀官网的内容中可见，它的标题和小标题对于内容的可用性和可访问性很重要。它们帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 ### 使链接文字有意义 王者荣耀官网编写链接文本时，直接描述链接目标的内容。如下图所示“下载游戏”或“对局环境”避免使用歧义的链接文本。 ![image](https://images.gitee.com/uploads/images/2020/0322/230527_7536171a_2229045.png "链接文字有意义.png") ### 为多媒体创建文本和标题 在王者荣耀官网的视频中我们可以看到关于视频中的重要内容包含了一定的文字描述，比如“庄周（英雄角色）的技能——蝴蝶效应”。 ![image](https://images.gitee.com/uploads/images/2020/0322/233238_3e04c381_2232011.jpeg "1ED37346-A442-459E-9592-86EF7AE65C10.jpeg") ### 提供明确的指示 在王者荣耀登录游戏时需要用户输入或选择登录渠道、服务大区和游戏角色，易于理解，并避免不必要的技术性语言。 ![image](https://images.gitee.com/uploads/images/2020/0322/231039_2c696cce_2229045.png "明确提示.png") ### 保持内容清晰简洁 在王者荣耀的文章推送中我们可以看到整个官网的文章标题采用了最易懂清晰的句子来表达推文内容，在文章内部尽量避免了使用不必要的复杂词语，整体内容非常清晰易懂。但是网页因为用户需求的关系并没有突出易被残疾人访问的功能。 ![image](https://images.gitee.com/uploads/images/2020/0322/234900_195ae306_2232011.jpeg "741206EC-7AEA-4CAC-9A02-8655B2D70F03.jpeg") ![image](https://images.gitee.com/uploads/images/2020/0322/234935_698f9199_2232011.jpeg "292FD684-568C-45B4-87E4-C3CAE8C005B8.jpeg")