# Web_Operations **Repository Path**: Zoezhouyu/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: 网站运营与管理课程 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-22 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # :fa-pencil: 书写网站内容时体现网站的可访问性 --- [*一些入门的建议*](https://www.w3.org/WAI/tips/) **摘要** 这一页介绍一些基础的注意事项，以此帮助你写出方便残疾人士查阅且更具可访问性的网站内容。这些建议可以很好地帮助你满足网站内容可访问性准则（WCAG）的要求。遵循WCAG要求的相关链接，“了解”文档中的详细背景、指导教程、用户案例等。 **页面内容** - 提供内容丰富，独特的页面标题 - 使用标题传达含义和文章结构 - 使链接文字有意义 - 为图像编写有意义的文本替代 - 创建多媒体文字记录和说明 - 提供明确的指示 - 保持内容简洁明了 ## 提供内容丰富，独特的页面标题 每一个网页，都会有一个介绍文章内容和区别其他文章的简短标题。页面标题通常与页面的主要标题相同。网站内容编辑者通常将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤流程的页面，在页面标题中也应当包含当前步骤。 #### 示例：页面标题 :fa-check-circle: **主页标题** Space Teddy Inc. :fa-check-circle: **页面名称后跟组织名称** Latest News·Space Teddy Inc. :fa-check-circle: **页面名称，包括流程中的步骤** Buy Your Bear(Step 1of 3)·Space Teddy Inc. #### 更多信息 - WCAG - [标题为2.4.2的页面](https://www.w3.org/WAI/WCAG21/quickref/#page-titled)（[了解2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)） ## 使用标题传达含义和文章结构 使用短标题将相关段落分组，并清楚地描述文章的各小节。好的标题为读者展示了内容的大纲。 #### 示例：使用标题组织内容 :fa-times-circle: **副标题缺失** ![副标题缺失](https://images.gitee.com/uploads/images/2020/0320/211940_cb7f6a94_2229988.png "在这里输入图片标题") :fa-check-circle: **正确使用标题和副标题** ![正确使用标题与副标题](https://images.gitee.com/uploads/images/2020/0320/212303_d7d92d90_2229988.png "在这里输入图片标题") #### 更多信息 - WCAG - [标题和标签2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)（[理解2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels)） - [本节标题2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)（[了解2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)） - [信息和关系1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)（[了解1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)） - 用户案例 - [屏幕阅读器用户如何使用标题导航](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ## 使链接文字有意义 写链接文字是为了描述链接目标的内容。在书写时应避免使用有歧义的链接文字，例如“点击这里”或者“阅读更多”。链接文字也可以显示链接目标的相关信息，例如文件袋类型和大小，例如“提案文档（RTF,20MB）”。 #### 示例：使用链接文字描述目标页面 :fa-times-circle: **没有相关信息** 有关设备独立性的更多信息，[请单击此处](http://about:blank#blocked)。 :fa-check-circle: **有意义的信息** 阅读[有关设备独立性](http://about:blank#blocked)的更多信息。 #### 更多信息 - WCAG - [链接目的（在上下文中）2.4.4](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)（[理解2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)） - [链接目的（仅链接）2.4.9](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only)（[理解2.4.9](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only)） ## 为图像编写有意义的文本替代 网站的每一张图片，都会有一段替代文字来提供图片信息或者是图片功能。而对于单纯的装饰图片，一般不需要写替代文本。 #### 示例：使用文本替代交代重要信息 :fa-times-circle: **没有信息** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0320/212337_4ddb59a0_2229988.png "在这里输入图片标题") 为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。 **图片的替代文本** ：“正在为手机充电” :fa-check-circle: **内容丰富** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0320/212337_4ddb59a0_2229988.png "在这里输入图片标题") 为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。 **图片的替代文本** ：“将电缆插入电话的底部边缘。” _替代文字通常不可见；它包含在此示例中只是为了您可以看到它是什么。_ #### 更多信息 - WCAG - [非文本内容1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)（[了解1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content)） - 讲解 - [图片](https://www.w3.org/WAI/tutorials/images/) - 用户案例 - 向盲人用户介绍替代文本的价值[向盲人用户介绍替代文本的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ## 创建多媒体文字的记录和字幕 对于只有音频的网站内容，例如广播，网站内容编辑者应该提供相应的文字记录。对于音频和视频内容，例如培训视频，同样需要提供字幕。除了文字记录和字幕外，语音信息和声音对于理解内容来说同样重要。例如，“门吱吱作响”。对于视频的文字记录，同样包括对重要的视频内容的描述。例如，“Athan离开房间”。 #### 更多信息 - 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)） - [音频描述或媒体替代（预先录制）1.2.3](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded)（[了解1.2.3](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded)） - 用户案例 - [描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) ## 提供明确的指示 网站的内容应确保指示、指南和错误的信息是清晰可见的，这有利于理解专业术语或者避免没有必要的专业术语的使用。清晰地描述输入需求，例如日期格式。 #### 示例：说明用户应提供哪些信息 密码至少应包含六个字符，并且至少包含一个数字（0-9）。 | **密码** | ********* | | --- | --- | #### 示例：错误指示问题所在以及可能的解决方法 1.:fa-exclamation-triangle: 用户名“superbear”已在使用中。 2.:fa-exclamation-triangle: 密码必须至少包含一个数字。 #### 更多信息 - WCAG - [标签或说明3.3.2](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)（[理解3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)） - 用户故事 - [描述简单的说明，帮助学习有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant) ## 保持内容简洁明了 **使用适合内容的简单语言和格式。** - 写尽可能短、清晰的句子和段落。 - 减少使用没有必要的复杂词汇和短语。提供读者可能不知道的术语词汇表。 - 首次使用专业术语应给出术语的缩写。例如，Web Content Accessibility Guidelines (WCAG)。 - 为读者提供专业术语词汇表 - 适当使用列表格式。 - 适当使用图像，插图、视频，音频和符号来帮助阐明含义。 #### 示例：使内容更可读和更易理解 :fa-times-circle: 没必要的复杂 CPP：万一发生车辆碰撞，公司指派的代表将寻求查明所涉各方财产的损害程度和原因。一旦我们的代表获得使我们了解因果关系的信息，我们可能会分配也可能不会分配适当的货币补偿。最终的决定可能会出现以下选择之一：索赔未获批准并被指定为拒绝状态，索赔的状态不明确，在进一步处理之前将需要其他信息，部分索赔已获批准并且减免了付款。分配和签发，或者索赔已完全批准，并且分配了总索赔付款。 :fa-check-circle: 简洁易懂 索赔处理程序（CPP）：如果您发生车祸，我们的代理商将进行调查。调查结果将确定任何索赔款项。这可能导致： - 批准的索赔-全额付款 - 部分批准的索赔-减少付款 - 未确定的索偿-需要更多信息 - 索赔被拒-不付款 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0320/213400_81019014_2229988.png "在这里输入图片标题") #### 更多信息 - WCAG - [阅读级别3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level)（[理解3.1.5](https://www.w3.org/WAI/WCAG21/Understanding/reading-level)） - [不寻常的单词3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words)（[理解3.1.3](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words)） - [缩写3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations)（[理解3.1.4](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations)） - 用户故事 - [阅读障碍者受益于易于阅读的文本](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent) ## :fa-bookmark:学习更多关于可访问性 以下是您在进行网站访问时的一些注意事项。以下资源可以帮助您了解可访问性重要性，以及一些有利于残疾人士访问网站的准则。 - [可访问性指南](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要求和技术的可定制参考 # :fa-pencil: 根据WAI原则对网站进行评价 --- #### B站的官方简介 bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。 #### 评价准则 - B站主要是视频网站，因此我主要根据WAI 原则Design&Develop中的Audio&Video Media可访问性准则进行评价。 - B站视频内容主要是以动画、番剧以及up主自制视频为主。up主各方面的水平不同，因此up主投稿的视频质量也参差不齐。 #### 关于视频字幕 一些业余的up主可能在制作视频的时候并无考虑特殊人群的需求。例如没有为自己的视频提供字幕，这样对于聋哑和听障人士来说是不友好的。 ![无字幕示例](https://gitee.com/wuhuijing/Web_Operations/raw/master/images/%E6%97%A0%E5%AD%97%E5%B9%95.png "无字幕视频") 正如WAI 原则中的第一点：[了解用户需求](https://www.w3.org/WAI/media/av/)。在聋哑人无法听到音频时，网站需要提供其他形式的音频信息。 为视频提供字幕对聋哑和听障人士至关重要，同样为普通用户即无残障人士提供了方便。例如在一些特殊场景，在用户听不到声音的嘈杂环境中。例如，酒吧，机场或音乐会。在用户无法打开声音的安静环境中。例如，在图书馆，公共交通中或其他人睡觉时。[普通用户也可以使用字幕功能。](https://www.w3.org/WAI/media/av/#benefits) 针对这一弊端我给B站提供的建议是，为了获得最佳的可访问性，up主在投稿视频的同时提交一份单独的字幕文件。 #### 关于视频弹幕 B站的弹幕体系我认为体现了[Interactive Transcripts from Captions](https://www.w3.org/WAI/media/av/captions/#live-captions)这一准则，即交互式的字幕。 原网站主要讲的是视频的交互式笔录，交互式笔录可以显示出口语交流出现的文字短语。 在我看来这与B站的弹幕有相似之处。弹幕是观看用户对原视频的声音字幕和画面的一种补充。对于聋哑和听障人士来说，虽然这一功能设立之初并不是为他们服务的，但是却一定程度上帮助他们更好的了解视频内容。 ![有字幕](https://gitee.com/wuhuijing/Web_Operations/raw/master/images/%E6%9C%89%E5%AD%97%E5%B9%95.png "弹幕") #### 关于网站评价 事实上B站用户主要是普通用户，但也不排除有一部分特殊用户，因此B站的大部分功能都是按照普通人的可访问性原则来制作的。以上只是我针对B站视频的某几点功能现象做评价，并非对网站的整体评价