# 网站运营与管理 **Repository Path**: jiayiluo/Web_operation ## 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**: 0 - **Created**: 2020-03-18 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 为Web可访问性编写 ## 摘要 此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ### 页面上下文 • 提供内容丰富，独特的页面标题 • 使用标题传达含义和结构 • 使链接文字有意义 • 为图像编写有意义的文本替代 • 创建多媒体文字记录和字幕 • 提供明确的指示 • 保持内容简洁明了 ## 提供内容丰富，独特的页面标题 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ![提供内容丰富，独特的页面标题](https://images.gitee.com/uploads/images/2020/0318/205103_be2d9d55_2231155.png "1.png") ## 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ![使用标题传达含义和结构](https://images.gitee.com/uploads/images/2020/0318/205156_cff20d54_2231155.png "2.png") ## 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ![使链接文字有意义](https://images.gitee.com/uploads/images/2020/0318/205214_0878dca6_2231155.png "3.png") ## 为图像编写有意义的文本替代 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ![为图像编写有意义的文本替代](https://images.gitee.com/uploads/images/2020/0318/205230_b84b4dcd_2231155.png "4.png") ## 创建多媒体文字记录和字幕 对于音频内容，例如播客，提供一个字幕。对于音频和视频内容，例如，培训视频也提供字幕。在文字记录中包括对理解内容和重要得口语信息和声音，例如，，“门的吱吱作响”。对于视频的字幕，也包括重要的视频内容描述，例如，“Athan 离开房间” ![创建多媒体文字记录和字幕](https://images.gitee.com/uploads/images/2020/0318/232145_5ed92fb7_2231155.png "1.png") ## 提供明确的指示 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 示例：说明传达用户应提供哪些信息 密码应该至少6个字符和至少一个数字（0-9） 密码 示例：错误指示问题所在以及可能的解决方法 1. 用户名“ superbear”已在使用中。 2. 密码必须至少包含一个数字。 ![提供明确的指示 ](https://images.gitee.com/uploads/images/2020/0318/232300_8c745556_2231155.png "2.png") ## 保持内容清晰和简洁 根据情况，使用简单的语言和格式。 • 撰写简单明了的句子和段落 • 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 • 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 • 考虑为读者可能不知道的术语提供词汇表。 • 适当使用列表格式。 • 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 示例：使内容易读易懂 ❌不必要的复杂 CPP：万一发生车辆碰撞，公司指派的代表将寻求查明所涉各方财产的损害程度和原因。一旦我们的代表获得使我们了解因果关系的信息，我们可能会分配也可能不会分配适当的货币补偿。最终的决定可能会出现以下选择之一：索赔未获批准并被指定为拒绝状态，索赔的状态不明确，在进一步处理之前将需要其他信息，部分索赔已获批准并且减免了付款。 ✔更容易理解 索赔处理程序（CPP）：如果您发生车祸，我们的代理商将进行调查。调查结果将确定任何索赔款项。这可能导致： • 批准的索赔-全额付款 • 部分批准的索赔——减少付款 • 未确定的索赔——需要更多信息 • 拒绝的索赔——不需要付款 ![保持内容清晰和简洁](https://images.gitee.com/uploads/images/2020/0318/232353_d4969e68_2231155.png "3.png") # 根据WAI原则进行分析哔哩哔哩网站： ## 提供内容丰富，独特的页面标题 哔哩哔哩网站在页面标题上在页面进行相关操作时会进行分类，是网页之间形成一个区分，便于用户使用。 ![哔哩哔哩](https://images.gitee.com/uploads/images/2020/0321/005304_c20b9625_2231155.png "1.png") ![动画-哔哩哔哩](https://images.gitee.com/uploads/images/2020/0321/005233_102a70be_2231155.png "2.png") ## 使用标题传达含义和结构 在主页上，哔哩哔哩网站在分类方面会有不同的标题，例如：前方高能、近期热门、MAD·AMV、短片·手书·配音、特摄等标题，使用户在使用该网站时可以通过标题找到自己感兴趣的内容。 ![前方高能](https://images.gitee.com/uploads/images/2020/0321/005438_cb753f92_2231155.png "3.png") ![使用标题组织内容结构](https://images.gitee.com/uploads/images/2020/0321/005507_5d53b22a_2231155.png "4.png") ## 使链接文字有意义 哔哩哔哩在网站的分类上的同一行右侧会有一个更多的选项，当用户想要了解自己感兴趣分类下的更多产品则可以通过点击此项进行。 ![更多选项](https://images.gitee.com/uploads/images/2020/0321/005608_823e4645_2231155.png "5.png") ## 为图像编写有意义的文本替代 哔哩哔哩网站拥有多种导航机制可以提供用户进行选择操作，可以根据小图标进行更进一步了解分类。 ![首页导航](https://images.gitee.com/uploads/images/2020/0321/010038_4f11e344_2231155.png "6.png") ![分类导航](https://images.gitee.com/uploads/images/2020/0321/010101_ff5b7111_2231155.png "7.png") ## 创建多媒体文字记录和字幕 哔哩哔哩网站作为一个视频大站，根据不同用户的需求创建多媒体文字记录和字幕，可调节字幕语音（不同国家语言，可能需要别人贡献字幕），调节字幕颜色等功能。除此之外，还有弹幕功能，在这里人们可以发表文字记录自己的影评，或者看外国人视频时，有人可以进行实时字幕分享。 ![字幕设置](https://images.gitee.com/uploads/images/2020/0321/010148_f5110ded_2231155.png "8.png") ![弹幕](https://images.gitee.com/uploads/images/2020/0321/010209_660bf6df_2231155.png "9.png") ## 提供明确的指示 在输入框架里，除了注册时对输入密码要求这个警示之外，我们可以看到视频点评言论框会提醒用户，犯不必要的错误。 ![提示](https://images.gitee.com/uploads/images/2020/0321/010247_ca3dcbb4_2231155.png "10.png") ## 保持内容简洁明了 1. 撰写简单明了的句子和段落 2. 突出重点，进行不同分类说明 ![活动页面示例](https://images.gitee.com/uploads/images/2020/0321/010325_1e34cfc3_2231155.png "11.png")